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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。