本帖最後由 ray 於 2013-2-6 20:13 編輯
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
- <script src="jquery-1.8.0.min.js"></script>
- <script src="jquery.mobile-1.1.1.min.js"></script>
- <title>工作小幫手</title>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header">
- <h1>工作小幫手</h1>
- </div>
- <div data-role="content">
- <input type="hidden" id="id" />
- 工作標題:<input type="text" id="title"/><br/>
- 完成期限:<input type="date" id="deadline"/><br/>
- 工作內容:<input type="text" id="content"/><br/>
- 工作地點:<input type="text" id="address"/><br/>
- <div id="map_canvas" style="width:300px;height:200px;">
- </div>
- <button onclick="resetForm();">清除重來</button>
- <button onclick="updateRecord();">修改工作</button>
- <button onclick="insertRecord();">新增工作</button>
- <button onclick="dropTable()">全部清除</button>
- </div>
- <div data-role="content">工作列表:</div>
- <div data-role="content" id="results"></div>
- </div>
- </body>
- <script>
- var results = $("#results");
- var id = $("#id");
- var title = $("#title");
- var deadline = $("#deadline");
- var content = $("#content");
- var address = $("#address");
-
- var creatStatement = new Array();
- creatStatement[0] = "create table if not exists MyTaskTB(id integer primary key autoincrement,title text,deadline date,content text)";
- creatStatement[1] = "alter table MyTaskTB add address text";
- /*
- var creatStatement = [
- "create table if not exists MyTaskTB(id integer primary key autoincrement,title text,deadline date,content text)"
- ,"alter table MyTaskTB add address text"
- ];
- */
- var selectAllStatement = "select * from MyTaskTB order by deadline";
- var insertStatement = "insert into MyTaskTB(title,deadline,content,address)values(?,?,?,?)";
- var updateStatement = "update MyTaskTB set title=?,deadline=?,content=?,address=? where id=?";
- var deleteStatement = "delete from MyTaskTB where id=?";
- var dropStatement = "drop table MyTaskTB";
-
- var db = openDatabase("TaskDB","1.0","TaskDB",200000);
- var dataset;
- createTable();
- drawHereMap();
- function createTable()
- {
- db.transaction(function(tx){
- for(var i = 0;i < creatStatement.length;i++)
- {
- tx.executeSql(creatStatement[i],[],null,onError);
- }
- });
- showRecords();
- }
-
- function showRecords()
- {
- var show = ""; //results.innerHTML = "";
- db.transaction(function(tx){
- tx.executeSql(selectAllStatement,[],function(tx,result){
- dataset = result.rows;
- show = "<ul data-role='listview' data-insert='true' data-filter='true'>\n";
- for(var i = 0,item = null;i < dataset.length;i++)
- {
- item = dataset.item(i);
- show += "<li>"+item['title']+"<button onclick='loadRecord("+i+");'>編輯</button><button onclick='deleteRecord("+item['id']+")'>刪除</button></li>";
- }
- show += "</ul>";
- results.html(show);
- },onError);
- });
- }
-
- function onError(tx,error)
- {
- alert(error.message);
- }
-
- function resetForm()
- {
- id.val("");
- title.val("");
- deadline.val("");
- content.val("");
- address.val("");
- }
-
- function insertRecord()
- {
- db.transaction(function(tx){
- tx.executeSql(insertStatement,[title.val(),deadline.val(),content.val(),address.val()],loadAndReset,onError);
- });
- }
-
- function loadAndReset()
- {
- resetForm();
- showRecords();
- }
-
- function loadRecord(idx)
- {
- var item = dataset.item(idx);
- id.val(item["id"]); //id.value=""
- title.val(item["title"]);
- deadline.val(item["deadline"]);
- content.val(item["content"]);
- address.val(item["address"]);
- }
-
- function updateRecord()
- {
- function doUpdate(tx)
- {
- tx.executeSql(updateStatement,[title.val(),deadline.val(),content.val(),address.val(),id.val()],loadAndReset,onError);
- }
-
- db.transaction(doUpdate);
- }
-
- function deleteRecord(idx)
- {
- db.transaction(function(tx){
- tx.executeSql(deleteStatement,[idx],loadAndReset,onError);
- });
- }
-
- function dropTable()
- {
- resetForm();
- db.transaction(function(tx){
- tx.executeSql(dropStatement,[],createTable,onError);
- });
- }
-
- function drawMap(lat,log)
- {
- 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'/>";
- map_canvas.innerHTML = showMap;
- }
-
- function drawHereMap()
- {
- var option =
- {
- enableHighAccuracy:false,
- maximumAge:10000,
- timeout:5000
- };
- /* 產生物件的另外一種寫法:
- var option = new Object();
- option.enableHighAccuracy=false;
- option.maximumAge=10000;
- option.timeout=5000;
- */
- function successHandle(location)
- {
- drawMap(location.coords.latitude,location.coords.longitude);
- }
-
- function errorHandle(error)
- {
- alert("定位失敗:"+error.message);
- }
-
- if(navigator.geolocation)
- {
- navigator.geolocation.getCurrentPosition(successHandle,errorHandle,option);
- }
- else
- {
- alert("您的瀏覽器不支援HTML5定位!");
- }
- }
-
- </script>
- </html>
複製代碼 |