使用 jQuery 的 iPhone 切换按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6934785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPhone toggle button using jQuery
提问by Randomblue
Is there a jQuery pluggin for emulating an iPhone toggle button?
是否有用于模拟 iPhone 切换按钮的 jQuery 插件？
回答by T3db0t
This is a pretty nice, easy jquery plugin: http://simontabor.com/toggles/
这是一个非常漂亮、简单的 jquery 插件：http: //simontabor.com/toggles/
回答by Jacek Kaniuk
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/
我的提议：http: //jsfiddle.net/GzL87/1/
回答by AlienWebguy
回答by rees
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.
我采用了@Randomblue 的解决方案并将其用作我的基础，以创建一个完全支持ARIA 标准的更复杂的滑块切换。它建立在 jQuery 和 jQuery UI 之上。我需要在 IE9 和 JAWS 14 中使用 ARIA 支持，尽管声称支持，但开箱即用的 jQuery 解决方案在这方面有奇怪的行为。
The solution is a simple jQuery plugin that turns a div with radio inputs into a slider toggle.
解决方案是一个简单的 jQuery 插件，它将带有无线电输入的 div 转换为滑块切换。
So given the HTML:
所以给定 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.
它创建了一个可拖动、可点击、符合 ARIA 标准的滑块切换。
The full code: http://jsfiddle.net/reesbyars/JrVgt/
回答by Serhii Koval
I use jQuery UI plugin Switchbutton Demo: http://naeka.github.io/jquery-switchbutton/Source: https://github.com/tdreyno/iphone-style-checkboxes
我使用 jQuery UI 插件 Switchbutton 演示：http: //naeka.github.io/jquery-switchbutton/来源：https: //github.com/tdreyno/iphone-style-checkboxes
