使用jQuery的iPhone切换按钮

Question

是否有用于模拟iPhone切换按钮的jQuery插件？

Answer 1

这是一个非常好用，简单的jquery插件：http://simontabor.com/toggles/

Answer 2

我不确定预期效果是什么，但我认为你想要一个覆盖蓝色'On'的滑块并显示灰色'Off'

我的主张： http://jsfiddle.net/GzL87/1/

Answer 3

在这里，伙计：

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

Answer 4

我使用了@ Randomblue的解决方案并将其用作创建更全面的滑块切换的基础，该滑块切换完全支持ARIA standards。它建立在jQuery和jQuery UI之上。我被要求在IE9和JAWS 14中使用ARIA支持，尽管声称支持，开箱即用的jQuery解决方案在这方面仍有奇怪的行为。

该解决方案是一个简单的jQuery插件，可以将带有无线电输入的div转换为滑块切换。

所以给出了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>

它创建了一个可拖动，可点击，符合ARIA标准的滑块切换。

完整代码：http://jsfiddle.net/reesbyars/JrVgt/

Answer 5

我使用jQuery UI插件Switchbutton 演示：http://naeka.github.io/jquery-switchbutton/ 资料来源：https://github.com/tdreyno/iphone-style-checkboxes