Turn boring HTML checkboxes into iPhone toggle switches

http://jqr.github.com/2009/08/05/iphone-toggle-switches.html

by jqr • 17 years ago

54 23 17 years ago

jqr.github.com

barredo3• 17 years ago

This is the first iPhone-like toggle switches that works well and are usable. Both with click and drag.

Edit: They are an improvement of these: http://awardwinningfjords.com/2009/06/16/iphone-style-checkb...

Kudos to the author.

endtwist• 17 years ago

Actually, mooSwitch has been around since 2008 and has always supported both click and drag, however, I don't believe it actually works on the iPhone (quite a thing to miss):

http://reaktivo.com/mt/mooswitch/index.php

jcromartie• 17 years ago

The only reason I'd want these is for a web page to be used on an iPhone. They kill usability for keyboard-focused users.

barredo3• 17 years ago

Edit: it has keyboard support indeed. I've just tried and works perfect. Pressing space switches the checkbox state and tab switches between checkboxes.

It's a pretty damn good job.

<s>I bet it's not too dificult to add keyboard support to them</s>

kingsley_20• 17 years ago

Non-obvious keyboard support is still almost worthless.

robin_reala• 17 years ago

You use Prototype on your iPhone sites? I’ve tried to avoid using libraries on mobile sites as they add a fair chunk of download and processing overhead.

Actually, it’d be nice to see a Webkit specific (or at least modern browser specific) JS library that dumps IE workarounds and fallback DOM selection routines; leaves us with syntactic sugar for QuerySelector and XMLHTTPRequest, and an animation library.

jrockway2• 17 years ago

Most of the code in jQuery is not to work around IE, it's for features you actually want. So I doubt this would buy you much savings, especially when gzipped.

slig• 17 years ago

I tested other fancy option button like this in a very simple webapp and the users doesn't seem to understand that they can change it.

for now on, I'll stick with the default, unless the web app is build to run on the iPhone.

s3graham• 17 years ago

Ack, please don't. Neither space nor tab work (at least in Chromium), and not owning an iPhone, those things don't intuit "toggle" to me.

jrockway2• 17 years ago

Don't you get it, they're an Apple look-alike. How can you not like that!?

TweedHeads• 17 years ago

Absolutely beautiful!

makecheck• 17 years ago

This is a classic case of why you don't necessarily make a UI element look like something real. Every time I used the toggle switches, I just wanted to "swish" them with the mouse (a completely awkward gesture), even though they technically respond to simple on/off clicks like checkboxes do. So all they've done is make the "easy" behavior unintuitive, while almost encouraging an awkward gesture.

tumult• 17 years ago

You can actually swish them on an iPhone (the real iPhone ones, not the ones in this kit.)

michaelneale• 17 years ago

They irritate me a lot on the iphone as well - I really hope this metaphore goes away, checkbox type thing is just fine...

mattp• 17 years ago

I agree that we shouldn't automatically copy and past UI elements from one platform to every other, unless they present real usability benefits to those other platforms.

But one benefit I can see is that these switches increase the target area, which I've always found to be somewhat small with checkboxes and radio buttons...

DougBTX• 17 years ago

The text label beside the radio button is clickable too, if the page author has used the <label> tag correctly.

hyperbovine• 17 years ago

Standards: who needs em.

sayrer• 17 years ago

oh yeah, turn checkboxes into iPhone toggle switches. that's not boring! very, very exciting.

what is wrong with you people?

mjgoins• 17 years ago

Let's just hope they're not patented.

idleworx• 17 years ago

just because it looks cool on another platform doesn't mean it's needed or useful in a regular web browser. the majority of people who use web browsers probably don't use an iphone, so the interface wouldn't make sense to them.

Turn boring HTML checkboxes into iPhone toggle switches

Related Stories