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
精彩评论