專業(yè)提供濟南網(wǎng)站建設(shè)服務(wù),豐富的濟南網(wǎng)站設(shè)計和濟南網(wǎng)站制作經(jīng)驗,為企業(yè)公司提供濟南網(wǎng)站建設(shè),濟南網(wǎng)站設(shè)計,濟南網(wǎng)站開發(fā),手機網(wǎng)站

142◆第9章客戶端數(shù)據(jù)的使用Download htm15sql]javascripts/notesjsinsertNote = function(title, note){db.transaction(function(tx){      tx.executeSql("INSERT INTO notes (tit7e, note) VALUES (?, ?)"                                [title.val(),  note.val()] ,      function(tx, result){        var id = result.insertld ;            alert('Record  r + id+  ' saved! ');       title.attr("data_/d", result.insertld );                    addToNotesList(id,   title.val (》 ;              $("#de7ete_button").show() ;)；))；)},function() {  alert(rThe note cou7d not be saved. ')}  insertNote0方法將記錄插入到數(shù)據(jù)庫中，使用結(jié)果集的insertid屬性獲取剛插入記錄的ID。然后將其作為一種自定義數(shù)據(jù)屬性應(yīng)用到表單的title域，觸發(fā)addToNotesList()窮法將留言添加到頁面左側(cè)的列表中。接下來，我們需要處理更新事件。updateNote0方法同其他方法類似：Download htm15sql/javascripts/notes.jsupdateNote = function(title, note){    var id = title.attr("data-/d") ;db.transaction(function(tx){   tx.executeSql("UPDATE notes set tit7e = ?, note = ? where id = ?               [title.val(), note.val(), id],     function(tx, result){      alert('Record r + id + , updated!');              $( "#notes>71[data-/d="  +  id  +  "J ").html(title.val(》 ;      },               function () {      alert('The note was not updated!');         }    ); });};update語句成功執(zhí)行后，我們通過data-id域中的剛更新過的ID值更新列表中的留言標題。刪除記錄幾乎同更新是一樣的。我們需要如下所示的刪除事件處理程序：Download htm15sql/javascripts/notes.js9.2實例21：在客戶端關(guān)系數(shù)據(jù)庫中保存數(shù)據(jù)●143$( "#de7ete_button") .click(function(event) {   event.preventDefault() ; var title = $("#t/t7e");   deleteNote(title) ;});    接著，編寫刪除方法。此方法不僅要從數(shù)據(jù)庫中刪除記錄，而且還要在前端的側(cè)邊欄列表中也一并刪除它：Download htm15sql/javascripts/notes.jsdeleteNote = function(title){    var id = title.attr("data-/d") ;      db.transaction(function(tx) {     tx.executeSql("DELETE from notes where id = 7", [id]       function(tx, result){ alert('Record r + id +  $( "#notes>7iEdata-/d="},function() { ' de7eted! ') ;al ert( 'The  note  was  not de7eted! ') ;    )    )；    ))；    )；    現(xiàn)在剩下的工作只是清空表單了。這樣做是為了避免在創(chuàng)建新的記錄時意外地影響到現(xiàn)有的記錄。9.2.8包裝    我們的留言系統(tǒng)基本完成了，接下來只需要激活New按鈕即可。按下該按鈕會清空表單，這樣用戶便可以在編輯完一條留言后，創(chuàng)建新的留言。與先前的模式一樣，先從iQuery函數(shù)中New按鈕的事件處理程序開始：Download htm15sql/javascripts/notes.js$( "#new_button") .click(function(event) {   event.preventDefault() ;   newNote() ;});//end:newbutton    newNote ()});144◆第9章客戶端數(shù)據(jù)的使用    接著，清空“title”域的data-id屬性，從表單中移除對應(yīng)值。在此，我們還會隱藏頁面上的Delete按鈕：    Download htm15sql/javoscripts/notesjs    newNote=function(){    $("#de7ete_button").hide0;    var title=$（"孝t彳t7e"）；    title.removeAttr( "data-/d¨);    tjtle.val("");    var note=$("#note¨)；    note.val(¨¨)；    )    我們應(yīng)該在iQuery函數(shù)內(nèi)部調(diào)用newForm方法，這樣當頁面加載的時候表單就可用了。這樣的話，Delete按鈕也就隱藏了。    所有的操作都完成了。我們的應(yīng)用在iPhone、Android設(shè)備和安裝有Chrome、Safari和Opera的計算機中運行。不過在Firefox中有一定幾率可成功，而在Internet Explorer中卻得不到支持。9.2.9回退    同其他的解決方案不同，對于SQL存儲來說，還沒有比較好的庫可用。因此無法為InternetExlporer用戶提供原生支持。但是，如果你認為這種座用是有用的，那么可以說服用戶使用GoogleChrome來訪問這個特殊的應(yīng)用，因為Google Chrome在各種平臺上都能使用。實際項目中這種方式并不少見，特別是對于需要同時在手機上訪問的內(nèi)部系統(tǒng)來說，要求更換瀏覽器是很正常的。    另一種可選方案是使用Google Chrome Frame插件。。在HTML頁面中的head標簽下添加：Download htm15sql/index.html<meta http-equiv="X-UA-Compatible" content="chrome=l">這個代碼片段會被Google Chrome Frame插件讀取，并為頁面啟用此功能。    如果要檢測插件的存在性，然后在它不存在的情況下提醒用戶安裝，那么可以將下面的代碼插入到body結(jié)束標簽的上方：Download htm15sql/index.himl<script type="text/javascript"src=   "http://a jax.goog7eapis.com/a jax/7 ibs/chrome- frame/l/CFInsta7 7 .min. js "></sc ript>①參見 http://code.google.com/chrome/chromeframe/。