iPhone toggle button using jQuery

Is there a jQuery 开发者_JAVA技巧pluggin for emulating an iPhone toggle button?

This is a pretty nice, easy jquery plugin: http://simontabor.com/toggles/

I'm not sure what is the expected effect, but I assume that You want a slider which covers blue 'On' and reveals grey 'Off'

My proposition: http://jsfiddle.net/GzL87/1/

Here you go buddy:

http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html

I took @Randomblue's solution and used it as my base for creating a more involved slider toggle that has full support for ARIA standards. It is built on top of jQuery and jQuery UI. I was required to have working ARIA support in IE9 and JAWS 14, and the out-of-the-box jQuery solutions have weird behavior in this regard despite purported support.

The solution is a simple jQuery plugin that turns a div with radio inputs into a slider toggle.

So given the HTML:

<div id="myToggle"
     class="slider-toggle-container"
     style="float: left"
     data-initialvalue="0"
     data-height="50"
     data-width="90"
     data-ballwidth="24"
     data-tabindex="undefined"
     data-speed="150">

    <span id="myToggleLabel" class="slider-toggle-label-text">
        Like this toggle?
    </span>

    <label for="leftInput">YES</label>
    <input id="leftInput" type="radio" name="enabled" value="1">

    <label for="rightInput">NO</label>
    <input id="rightInput" type="radio" name="enabled" value="0">

</div>

It creates a draggable, clickable, ARIA-compliant slider toggle.

The full code: http://jsfiddle.net/reesbyars/JrVgt/

I use jQuery UI plugin Switchbutton Demo: http://naeka.github.io/jquery-switchbutton/ Source: https://github.com/tdreyno/iphone-style-checkboxes