jQuery Mobile with JavaScript Object, JSON and Local Storage
This tutorial splits a single HTML document into separate HTML documents |
Based on http://blog.jamesjacobs.me/2014/01/simple-todo-app-jquery-mobile-localstorage/
Continue from the previous exercise
http://xdk-steps.blogspot.com/2015/01/jquery-mobile-with-javascript-object_12.html
Download the Startup Codes
https://drive.google.com/file/d/0B86b-ALn-1MGb1RJMjNLaVZBbjQ/view?usp=sharing
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile To Do</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script src="./js/local-storage.js"></script> <script src="./js/app.js"></script> </head> <body> <!-- Home --> <div data-role="page" id="home"> <div data-role="header" data-position="fixed"> <h1>JQM To Do</h1> <a href="add.html" data-icon="plus" data-iconpos="notext" class="ui-btn-right" data-transition="slide">New</a> </div> <div data-role="content"> <ul data-role="listview" class="todo-listview"></ul> </div> </div> <!-- /Home --> </body> </html> |
add.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile To Do</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script src="./js/local-storage.js"></script> <script src="./js/app.js"></script> </head> <body> <!-- Add --> <div data-role="page" id="add" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h1>Add</h1> </div> <div data-role="content"> <form method="" action="" id="insert"> <label for="title">Title:</label> <input type="text" name="title" id="text-basic" value=""> <label for="description">Description:</label> <textarea cols="40" rows="8" name="description" id="text-basic"></textarea> </form> <a href="" data-role="button" class="add">Add</a> </div> </div> <!-- /Add --> </body> </html> |
view.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile To Do</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script src="./js/local-storage.js"></script> <script src="./js/app.js"></script> </head> <body> <!-- View --> <div data-role="page" id="view" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h1>View</h1> <a href="add.html" data-icon="plus" data-iconpos="notext" class="ui-btn-right" data-transition="slide">New</a> </div> <div data-role="content"> <form id="edit"> <input type="hidden" id="id" value="" name="id"/> <input type="text" id="title" value="" data-id="" class="target" name="title"/> <textarea id="description" data-id="" class="target" name="description"></textarea> </form> <a href="" data-role="button" class="delete">Delete</a> </div> </div> <!-- /View --> </body> </html> |