使用jQuery的iPhone切換按鈕

Question

是否有一個用於模擬iPhone切換按鈕的jQuery插件？

Answer 1

我不知道什麼是預期的效果，但是我認爲你要覆蓋的藍色「開」，並揭示灰「關」

我主張一個滑塊： http://jsfiddle.net/GzL87/1/

Answer 2

在這裏你去哥們：

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

Answer 3

釷是一個相當不錯的，容易jquery插件：http://simontabor.com/toggles/

Answer 4

我採取@Randomblue的解決方案，並用它作爲我的基礎創建一個更多的涉及滑塊切換，完全支持ARIA standards。它建立在jQuery和jQuery UI之上。我被要求在IE9和JAWS 14中開展ARIA支持工作，儘管有聲稱的支持，但開箱即用的jQuery解決方案在這方面有着奇怪的行爲。

該解決方案是一個簡單的jQuery插件，可將無線電輸入轉換爲滑塊切換。

所以給出的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