Use your left/right keys to browse tutorials
jQuery Iphone Style Ajax Switch

jQuery Iphone Style Ajax Switch

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on July 3, 2009

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");
});

demodownload



More tutorials from Papermashup
  • http://www.yakaclick.com Regis Grison

    Hi,

    I had to do 2 minor changes : I needed to override 2 settings (background-position & speed) so I haded this parameters.

    May I submit it to you?

    • Marcio

      Submit it to me at least, please. Or let it online for download. I updated the jquery and it’s not working any more. I’m trying to see what’s wrong. Regards.

  • Pingback: 分享19个值得学习的jQuery和CSS按钮教程 | 站长站