本文將介紹如何使用jQuery Mobile修改URL,讓你的網站更加友好和用戶友好。 在這里我們介紹兩種方法——使用jQuery Mobile內置的東西和使用Javascript。
首先,讓我們看看如何使用jQuery Mobile內置的東西。 HTML5引入了新的API,它允許我們訪問瀏覽器歷史記錄。 在jQuery Mobile中,我們可以使用$.mobile.changePage()方法來實現它。
$.mobile.changePage('page.html', {changeHash : false});
還有一種方法是使用Javascript的window.history實現。假設你已經懂jQuery Mobile了。 首先,用jQuery選擇要點擊的元素。
$('a').click(function() {});
其次,禁用默認的行為(避免打開一個新的頁面)。
$('a').click(function(e) { e.preventDefault(); });
最后,使用window.history.pushState()函數更改URL和標題。
$('a').click(function(e) { e.preventDefault(); var href = $(this).attr('href'); var title = $(this).text(); window.history.pushState({url: href}, title, href); });
順便提一下,由于這個方法的瀏覽器支持不是很好,最好加一個適配器到jquery.js。適配器可以是History.js或HTML5 History API插件,可以從GitHub上下載。