JQuery Mobile jQuery.mobile.navigate()用法及代碼示例

jQuery.mobile.navigate( url [, data ] )

添加的版本：1.3

說明：更改 url 和跟蹤曆史記錄。適用於有和沒有新曆史 API 的瀏覽器。

```
jQuery.mobile.navigate( url [, data ] )
```
- url
  
  類型：String
- data
  
  類型：Object

$.mobile.navigate 方法為支持新曆史 API 和不支持(哈希更改)的瀏覽器提供統一的曆史操作 API。它通過存儲和檢索與 URL 關聯的任意數據(很像 popState 和 replaceState )與導航事件協同工作。當用戶返回到由 navigate 方法設置的 URL 時，將使用關聯的數據觸發 Navigation 事件。

注意： 此方法是一個可單獨使用的低級實用程序。如果您使用 jQuery Mobile 導航框架，則不應單獨使用此實用程序。相反，您應該使用pagecontainer 方法導航到另一個頁麵。

例子：

更改哈希片段兩次，然後在瀏覽器向後移動曆史記錄時記錄導航事件提供的數據。

// Starting at http://example.com/
 
// Alter the URL: http://example.com/ => http://example.com/#foo
$.mobile.navigate( "#foo", { info: "info about the #foo hash" });
 
// Alter the URL: http://example.com/#foo => http://example.com/#bar
$.mobile.navigate( "#bar" );
 
// Bind to the navigate event
$( window ).on( "navigate", function( event, data ) {
  console.log( data.state.info );
  console.log( data.state.direction )
  console.log( data.state.url )
  console.log( data.state.hash )
});
 
// Alter the URL: http://example.com/#bar => http://example.com/#foo
window.history.back();
 
// From the `navigate` binding on the window, console output:
// => "info about the #foo hash"
// => "back"
// => "http://example.com/#bar
// => "#bar"

劫持鏈接單擊以使用導航方法，然後加載內容。

// Starting at http://example.com/
 
// Define a click binding for all anchors in the page
$( "a" ).on( "click", function( event ) {
 
  // Prevent the usual navigation behavior
  event.preventDefault();
 
  // Alter the url according to the anchor's href attribute, and
  // store the data-foo attribute information with the url
  $.mobile.navigate( this.attr( "href" ), { foo: this.attr( "data-foo" ) });
 
  // Hypothetical content alteration based on the url. E.g, make
  // an ajax request for JSON data and render a template into the page.
  alterContent( this.attr( "href" ) );
});

相關用法

注：本文由純淨天空篩選整理自jquerymobile.com大神的英文原創作品 jQuery.mobile.navigate()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。