With so much hype surrounding the new iPhone 4S release we’ve seen a lot more iOS app development hitting the mainstream. As such their techniques in design and user interfaces are sure to trickle out among the mass of web designers. In this case I’d like to spend some time examining the iOS slider switches common since early iOS 4.
This tutorial is a straightforward walkthrough about how to implement and work with these inputs. Through jQuery we can dynamically create a hidden input field which holds the checked/unchecked position of the slider bar. In my demo we’ve created a mockup settings page which mirrors the current switch value openly in the form.
Jumping into Core HTML
To again start us off let’s focus on the basic HTML5 template. Each new project I start follows this same template, as it provides crucial aspects into each design as a boilerplate. I would also like to point out this iOS toggle switch repo found on Github which we’ll be working with. The developer has crafted a beautiful set of icons we can utilize with jQuery.
But to start off let’s include the standard jQuery library from Google CDN and a new style.css file. Also I’ve kept the beautiful font Alice included from the Google Fonts API CDN. Check out my code example below:
[html wraplines=”false”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iOS-Style Sliding Checkboxes with jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href=’http://fonts.googleapis.com/css?family=Questrial|Alice’ rel=’stylesheet’ type=’text/css’ />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.ios-toggle.js"></script>
</head>
<body>
</body>
</html>
[/html]
Initially the style.css is blank, but we can match many of the default styles from this tutorial written by the developer dzy0451 on Github. The fonts for Questrial and Alice have been included to keep consistent styles within his example and ours. I personally love the Alice font, it has a Times New Roman look with more block-formatted letters.
You may notice an additional jquery.ios-toggle.js which is included in the Github code. This file holds a lot of the complicated functions and math calculations required to change the sliding images. We won’t need to edit this part, although you can go through and change some of the settings if you can pick apart the script. Such features include animation style, speed, and delays which can all be implemented in jQuery.
HTML – Main Body Area
Inside our body element I’ve wrapped all the content inside a core div with the ID #w. This saves code in our stylesheet and makes targeting properties a lot simpler. Inside are two distinct sections – HTML and jQuery functions.
[html wraplines=”false”] <h1>iOS-Input Form Buttons</h1>
<span class="labelform">Remember Personal Settings</span>
<a href="javascript:void(0)" class="toggle-switch small on" id="remsettings" rel="remsettings"></a>
<small id="remsettingsmsg">Turned On</small>
<div class="cleardiv"></div>
<span class="labelform">Keep Log of History(30 days)</span>
<a href="javascript:void(0)" class="toggle-switch small off" id="sitehistory" rel="sitehistory"></a>
<small id="sitehistorymsg">Turned Off</small>
<div class="cleardiv"></div>
<span class="labelform">Recieve E-mail Notices</span>
<a href="javascript:void(0)" class="toggle-switch small off" id="emails" rel="emails"></a>
<small id="emailsmsg">Turned Off</small>
<div class="cleardiv"></div>
[/html]
Above is the form HTML code which you’ll find inside the main wrapper. Each of the anchor links are given 2 classes – toggle-switch and small. The .toggle-switch class tells jQuery to replace that element with the dynamic images used in the iostoggle script. You can include small or large styles depending on the type of switch you’re looking to use. Within a crowded settings page I find the compact toggle switch fits into the interface much easier.
You should also notice I’ve included 3 different small elements labeled with a different ID. Inside I added some text setting the default state of each button status, and the inner content will change as you toggle a switch. Normally you wouldn’t include this in your page but it provides an example of how you can pull a response into the server-side code and update the settings in your database.
Standard document.ready() Call
Now let’s focus on a bit of jQuery code outside the wrapper div. This calls out to a few of the functions in our custom jQuery ios-toggle script, but nothing absolutely confusing. It’s a fairly small code block to consider – however I’ve broken it into 2 parts for easier analysis.
[javascript wraplines=”false”] $(function(){
$(‘.toggle-switch’).toggleSwitch();
$(‘.toggle-switch’).change(function(){
if(this.id == "remsettings"){
var usersetup = $(‘#remsettings’).toggleSwitch(‘val’);
if(usersetup == "on") { $(‘#remsettingsmsg’).html(‘Turned On’); }
else {
$(‘#remsettingsmsg’).html(‘Turned Off’);
}
}
[/javascript]
If you look under the basic usage section in the original developer’s guide it mentions the need for a toggleSwitch(); function. This is opened once the document has finished loading all DOM elements, and then executes a mass find & replace for all toggle-switch classes. The change() event handler will be run whenever the user changes the value in one of these input sliders.
Then we go into a series of if/else statements to look for which one we’ve toggled. The first block checks if we’re editing the “remove settings” feature, and if so we want to update the message text underneath. By using the toggleSwitch(‘val’); we can pull out the current value and see if the user is changing to on or off.
[javascript wraplines=”false”] else if(this.id == "sitehistory"){
var usersetup = $(‘#sitehistory’).toggleSwitch(‘val’);
if(usersetup == "on") { $(‘#sitehistorymsg’).html(‘Turned On’); }
else {
$(‘#sitehistorymsg’).html(‘Turned Off’);
}
}
else if(this.id == "emails") {
var usersetup = $(‘#emails’).toggleSwitch(‘val’);
if(usersetup == "on") { $(‘#emailsmsg’).html(‘Turned On’); }
else {
$(‘#emailsmsg’).html(‘Turned Off’);
}
}
});
});
[/javascript]
The other two code blocks are merely replicas checking against site history and e-mail notification settings. You could setup a variable array to loop through these values instead. However the taxing cost on memory would add up over time. Yet this method is solid to implement anywhere in your web app where you feel checkboxes just don’t work right.
CSS with Images
One last talking point to bring up is centered around the image-based inputs. Both of the images have been included in the download .zip archive and found within the original Github repository. Since the developer is Chinese he’s included an English and Chinese character version of these sliders.
You are certainly encouraged to build your own graphics if they fit your design better. I find these compact switches are perfect since they don’t use any labeling or text, and they also don’t require much space on the page.
There also hasn’t been a whole lot of freebies in this department. Although I have found a few goodies on Dribbble. The designer Chris Brummel is fantastic on mobile and has offered his iOS5 styled toggle switch PSD free for download! The width/height sizes are vastly different in comparison, but you can find pixel-perfect retina display toggles in this free iPad GUI kit built for Photoshop CS4.
Any way you choose to implement the CSS toggles will come out great. The backing jQuery library and smaller ios-toggles script fit perfect with these images. And of course you can always estimate new image dimensions if you customize the default values.
Conclusion
Be sure to mess around and see if you can fit these cool toggle switches somewhere in your layout. I have found that users are very receptive to UI elements they’re commonly familiar with. And the iOS mobile platform is by no means a stranger to the tech world. If you have similar implementations of this method or custom graphics please share with us in the discussion area below.
