Turn boring HTML checkboxes into iPhone toggle switches(jqr.github.com)
jqr.github.com
Turn boring HTML checkboxes into iPhone toggle switches
http://jqr.github.com/2009/08/05/iphone-toggle-switches.html
23 comments
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.
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...
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...
You can actually swish them on an iPhone (the real iPhone ones, not the ones in this kit.)
They irritate me a lot on the iphone as well - I really hope this metaphore goes away, checkbox type thing is just fine...
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.
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>
It's a pretty damn good job.
<s>I bet it's not too dificult to add keyboard support to them</s>
Non-obvious keyboard support is still almost worthless.
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.
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.
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.
Standards: who needs em.
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.
Edit: They are an improvement of these: http://awardwinningfjords.com/2009/06/16/iphone-style-checkb...
Kudos to the author.
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
http://reaktivo.com/mt/mooswitch/index.php
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.
for now on, I'll stick with the default, unless the web app is build to run on the iPhone.
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.
Let's just hope they're not patented.
Absolutely beautiful!
oh yeah, turn checkboxes into iPhone toggle switches. that's not boring! very, very exciting.
what is wrong with you people?
what is wrong with you people?