So here we are creating jquery mobile Iphone/Ipad application which is simple Todo app for iphone ipad using jquery mobile and web storage, where you can list your todo’s and once its completed you delete it from list. For this app i am using local storage so if you create a list and then come back after few days it will be there as it is, so you can use this app for your daily tasks management.






<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

<SCRIPT src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">


 

Clear
TODO
Add




 

More iphone Apps
 




jquery code
var i = localStorage.length;
function onBodyLoad(){
var todo = "";
 
create_new_list();
 
$("#clear").click(function(){
localStorage.clear();
$("#todo_list li").fadeOut(function(){
$(this).html("");
});
});
 
$("#remove").live("click",function(e){
var index = $(this).closest("li").attr("id");
$(this).closest("li").slideUp(function(){
 
// remove the selected item
localStorage.removeItem('names_'+index);
 
// rearrange localstorage array 
for(i=0; i < localStorage.length; i++) {
 if( !localStorage.getItem("names_"+i)) {
localStorage.setItem("names_"+i, localStorage.getItem('names_' + (i+1) ) );
localStorage.removeItem('names_'+ (i+1) );
 }
}
 
// clear existing list UI
$("#todo_list").html("");
 
// create new list
create_new_list();
});
});
}
function create_new_list(){
for (var i = 0; i < localStorage.length; i++){
todo = localStorage.getItem('names_'+i);
$("#todo_list").append('
'+todo+'Remove
');
}
// Refresh list so jquery mobile can apply iphone look to the list
$("#todo_list").listview();
$("#todo_list").listview("refresh");
}
function save_todo(){
var todo = $("#textinput1").val();
if(todo.length){
// store item in local storage
localStorage['names_'+i] = todo;
 
// Update todo list
$("#todo_list").append('
'+todo+'Remove
');
 
// Refresh list so jquery mobile can apply iphone look to the list
$("#todo_list").listview();
$("#todo_list").listview("refresh");
i++;
}
}