在使用jQuery Mobile開發移動應用時,經常需要使用返回鍵來實現上一頁、上一步的操作。而在jQuery Mobile中,可以很方便地實現該功能。
首先,要在HTML中加入以下代碼:
<div data-role="page" id="page1"> <div data-role="header"> <h1>Page 1</h1> </div> <div data-role="content"> <p>Content of Page 1</p> <a href="#page2" data-transition="slide">Go to Page 2</a> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>Page 2</h1> </div> <div data-role="content"> <p>Content of Page 2</p> </div> </div>
以上代碼包含兩頁,第一頁中有一個鏈接指向第二頁,第二頁中只有一些文本內容。
為了能夠使用返回鍵,還需要在JavaScript中添加以下代碼:
$(document).on("pagebeforeshow", function (event, data) { var page = data.toPage; if (typeof history.pushState !== "undefined") { history.pushState({url: page.attr("id")}, page.attr("id"), "#" + page.attr("id")); } }); $(window).on("popstate", function (event) { if (typeof event.originalEvent.state !== "undefined") { var page = $('#' + event.originalEvent.state.url); if (page.length) { $.mobile.changePage(page, {reverse: true, changeHash: false}); } } });
以上代碼分為兩部分,第一部分在新頁面加載前執行,用于在瀏覽器歷史中添加新的記錄。第二部分添加了一個popstate事件監聽器,當用戶點擊瀏覽器返回鍵時觸發,用于切換頁面或返回上一頁。
至此,我們就成功地實現了使用jQuery Mobile返回鍵功能。