CODEWITHSUNDEEP
jqueryiphone
Randomblue
Randomblue

Reputation: 116293

iPhone toggle button using jQuery

Is there a jQuery pluggin for emulating an iPhone toggle button?

iPhone toggle button

Upvotes: 9

Views: 28356

Answers (5)

Serhii Koval
Serhii Koval

Reputation: 354

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

Upvotes: 2

rees
rees

Reputation: 1576

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/

Upvotes: 2

T3db0t
T3db0t

Reputation: 3551

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

Upvotes: 7

Jacek Kaniuk
Jacek Kaniuk

Reputation: 5229

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/

Upvotes: 5

SeanCannon
SeanCannon

Reputation: 77976

Here you go buddy:

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

Upvotes: 3

Related Questions