当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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


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

返回:Undefined

添加的版本:1.3

说明:更改 url 和跟踪历史记录。适用于有和没有新历史 API 的浏览器。

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

$.mobile.navigate 方法为支持新历史 API 和不支持(哈希更改)的浏览器提供统一的历史操作 API。它通过存储和检索与 URL 关联的任意数据(很像 popStatereplaceState )与导航事件协同工作。当用户返回到由 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()。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。