返回列表 發帖

Rank: 7Rank: 7Rank: 7
1# 跳轉到 » 倒序看帖
打印
tT
ray發表於 2013-2-6 20:12 | 只看該作者

tasklist

本帖最後由 ray 於 2013-2-6 20:13 編輯
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
  7.         <script src="jquery-1.8.0.min.js"></script>
  8.         <script src="jquery.mobile-1.1.1.min.js"></script>
  9.         <title>工作小幫手</title>
  10. </head>
  11. <body>
  12. <div data-role="page">
  13.         <div data-role="header">
  14.         <h1>工作小幫手</h1>
  15.         </div>
  16.         <div data-role="content">
  17.         <input type="hidden" id="id" />
  18.         工作標題:<input type="text" id="title"/><br/>
  19.         完成期限:<input type="date" id="deadline"/><br/>
  20.         工作內容:<input type="text" id="content"/><br/>
  21.         工作地點:<input type="text" id="address"/><br/>
  22.         <div id="map_canvas" style="width:300px;height:200px;">
  23.         </div>
  24.         <button onclick="resetForm();">清除重來</button>
  25.         <button onclick="updateRecord();">修改工作</button>
  26.         <button onclick="insertRecord();">新增工作</button>
  27.         <button onclick="dropTable()">全部清除</button>
  28.         </div>
  29.         <div data-role="content">工作列表：</div>
  30.         <div data-role="content" id="results"></div>       
  31. </div>       
  32. </body>
  33. <script>
  34.         var results = $("#results");
  35.         var id = $("#id");
  36.         var title = $("#title");
  37.         var deadline = $("#deadline");
  38.         var content = $("#content");
  39.         var address = $("#address");
  40.        
  41.         var creatStatement = new Array();
  42.         creatStatement[0] = "create table if not exists MyTaskTB(id integer primary key autoincrement,title text,deadline date,content text)";
  43.         creatStatement[1] = "alter table MyTaskTB add address text";
  44.         /*
  45.         var creatStatement = [
  46.         "create table if not exists MyTaskTB(id integer primary key autoincrement,title text,deadline date,content text)"
  47.         ,"alter table MyTaskTB add address text"
  48.         ];
  49.         */
  50.         var selectAllStatement = "select * from MyTaskTB order by deadline";
  51.         var insertStatement = "insert into MyTaskTB(title,deadline,content,address)values(?,?,?,?)";
  52.         var updateStatement = "update MyTaskTB set title=?,deadline=?,content=?,address=? where id=?";
  53.         var deleteStatement = "delete from MyTaskTB where id=?";
  54.         var dropStatement = "drop table MyTaskTB";
  55.        
  56.         var db = openDatabase("TaskDB","1.0","TaskDB",200000);
  57.         var dataset;
  58.         createTable();
  59.         drawHereMap();
  60.         function createTable()
  61.         {
  62.                 db.transaction(function(tx){
  63.                         for(var i = 0;i < creatStatement.length;i++)
  64.                         {
  65.                                 tx.executeSql(creatStatement[i],[],null,onError);
  66.                         }
  67.                 });
  68.                 showRecords();
  69.         }
  70.        
  71.         function showRecords()
  72.         {
  73.                 var show = ""; //results.innerHTML = "";
  74.                 db.transaction(function(tx){
  75.                         tx.executeSql(selectAllStatement,[],function(tx,result){
  76.                                 dataset = result.rows;
  77.                                 show = "<ul data-role='listview' data-insert='true' data-filter='true'>\n";
  78.                                 for(var i = 0,item = null;i < dataset.length;i++)
  79.                                 {
  80.                                         item = dataset.item(i);
  81.                                         show += "<li>"+item['title']+"<button onclick='loadRecord("+i+");'>編輯</button><button onclick='deleteRecord("+item['id']+")'>刪除</button></li>";
  82.                                 }
  83.                                 show += "</ul>";
  84.                                 results.html(show);
  85.                         },onError);
  86.                 });
  87.         }
  88.        
  89.         function onError(tx,error)
  90.         {
  91.                 alert(error.message);
  92.         }
  93.        
  94.         function resetForm()
  95.         {
  96.                 id.val("");
  97.                 title.val("");
  98.                 deadline.val("");
  99.                 content.val("");
  100.                 address.val("");
  101.         }
  102.        
  103.         function insertRecord()
  104.         {
  105.                 db.transaction(function(tx){
  106.                         tx.executeSql(insertStatement,[title.val(),deadline.val(),content.val(),address.val()],loadAndReset,onError);
  107.                 });
  108.         }
  109.        
  110.         function loadAndReset()
  111.         {
  112.                 resetForm();
  113.                 showRecords();
  114.         }
  115.        
  116.         function loadRecord(idx)
  117.         {
  118.                 var item = dataset.item(idx);
  119.                 id.val(item["id"]);  //id.value=""
  120.                 title.val(item["title"]);
  121.                 deadline.val(item["deadline"]);
  122.                 content.val(item["content"]);
  123.                 address.val(item["address"]);
  124.         }
  125.        
  126.         function updateRecord()
  127.         {
  128.                 function doUpdate(tx)
  129.                 {
  130.                         tx.executeSql(updateStatement,[title.val(),deadline.val(),content.val(),address.val(),id.val()],loadAndReset,onError);
  131.                 }
  132.                
  133.                 db.transaction(doUpdate);
  134.         }
  135.        
  136.         function deleteRecord(idx)
  137.         {
  138.                 db.transaction(function(tx){
  139.                         tx.executeSql(deleteStatement,[idx],loadAndReset,onError);
  140.                 });
  141.         }
  142.        
  143.         function dropTable()
  144.         {
  145.                 resetForm();
  146.                 db.transaction(function(tx){
  147.                         tx.executeSql(dropStatement,[],createTable,onError);
  148.                 });
  149.         }
  150.        
  151.         function drawMap(lat,log)
  152.         {
  153.                 var showMap = "<img width='300' height='200' src='http://maps.google.com/maps/api/staticmap?center="+lat+","+log+"&markers=size:small|color:blue|"+lat+","+log+"&zoom=16&size=300x200&sensor=false'/>";
  154.                 map_canvas.innerHTML = showMap;
  155.         }
  156.        
  157.         function drawHereMap()
  158.         {
  159.                 var option =
  160.                 {
  161.                         enableHighAccuracy:false,
  162.                         maximumAge:10000,
  163.                         timeout:5000
  164.                 };
  165.                 /* 產生物件的另外一種寫法:

  167.                 var option = new Object();
  168.                 option.enableHighAccuracy=false;
  169.                 option.maximumAge=10000;
  170.                 option.timeout=5000;
  171.                 */
  172.                 function successHandle(location)
  173.                 {
  174.                         drawMap(location.coords.latitude,location.coords.longitude);
  175.                 }
  176.                
  177.                 function errorHandle(error)
  178.                 {
  179.                         alert("定位失敗:"+error.message);
  180.                 }
  181.                
  182.                 if(navigator.geolocation)
  183.                 {
  184.                         navigator.geolocation.getCurrentPosition(successHandle,errorHandle,option);
  185.                 }
  186.                 else
  187.                 {
  188.                         alert("您的瀏覽器不支援HTML5定位!");
  189.                 }
  190.         }
  191.        
  192. </script>
  193. </html>
複製代碼
收藏 分享

返回列表