jQuery Iphone Style Ajax Switch
I’ve been looking for a while at how to mimic the iPhone on / off switch with Jquery and stumbled across this post By Daniel LaBare over at elctech.com which is a great start to base an ajax tutorial on. In this tutorial I’ll purely be looking at making a simple ajax request using the functionality of the iPhone buttons to trigger a script to return a string based on whether the switch is on or off. You need to include the ‘jquery.iphone-switch.js’ file along with jquery which is in the download.
The Code:
<div id="ajax"></div>
<div id="1"></div>
<script type="text/javascript">
$('#1').iphoneSwitch("on",
function() {
$('#ajax').load('on.html');
},
function() {
$('#ajax').load('off.html');
},
{
switch_on_container_path: 'iphone_switch_container_off.png'
});
</script>
So to run through whats happening when the iphoneSwitch() function is called we run an ajax call to return the contents of the pages on.html and off.html. You could make this more dynamic by calling a php page which authenticates a user with a session id which would then update data in a database depending on the switches current status.
looking at jQuery .load:
Another way of using the .load function is to pass POST variables through to a script for example below we are passing the POST variable ‘limit’ with a value of ‘10′ to the file rss.php and asking it to load the results into the div #rss, once the ajax request has completed it will alert ‘The last 10 entries in the rss feed have been loaded’:
$("#rss").load("rss.php", {limit: 10}, function(){
alert("The last 10 entries in the rss feed have been loaded");
});
Cool, lots of people are copying the iPhone GUI these days.
On a side note, could you make your RSS feed display full posts so I don’t have to come out of Google Reader. It kind if makes the point of an RSS feed useless.
@ben thanks for the feedback, I’ve been having major problems with my feed and have had to hackit a bit but i’ll take a look at doing that.
Hey why dont you make it so you can drag the button lest anf right that way it will be easer then just clicking it because im used to seeing it on my iphone to drag it but here i have to click it.
So is there a way to have it load the on.html at page load?
I figured it out, I added the following code after the script tag:
$(document).ready(function(){
$(‘#ajax’).load(‘/alpha’);
And you’ll also need to add the following at the end:
});
@Jason good to see you found a solution
ERROR!
text code inside file jquery.iphone-switch.js:
image = jQuery(”);
Pay attention to the end – there is an extra div-tag! It must be removed, otherwise, you will not see the switch in IE-browsers.
Thanks.
@igor thanks for pointing that out, i’ve updated the code
Thank you Ashley for your post, cool demo
Does anybody know why on IE6 it doesn’t work?
Hi… nice little plugin here….
I’d like to make one suggestion….
change the “click handling” section to pass the through to the callback events, a la:
jQuery(this).click(function() {
...
switched_off_callback(this);
...
switched_on_callback(this);
...
});
that way
$(".Boolean").iphoneSwitch(
"on",
function(obj) {
//do something on change to "on"
},
function(obj) {
//do something on change to "off"
}
);
that way if there are multiple objects wired to this plugin, there is some hook to be able to tell “where” we are inside those events…
thanks for reading….
- Stephen
Leave a comment...
Connect
Latest Poll
Recent Posts