jQuery mobile类库使用时加载导航历史的方法简介
jQuery.mobile.navigate(url[,data])
改变URL和跟踪历史。作品为浏览器和无历史新的API
- url：是必须的参数。类型：字符串
- data：是可选的参数。类型：对象。
更改哈希片段两次然后日志提供导航事件数据时，浏览器向后移动的历史
//Startingathttp://example.com/
//AltertheURL:http://example.com/=>http://example.com/#foo
$.mobile.navigate("#foo",{info:"infoaboutthe#foohash"});
//AltertheURL:http://example.com/#foo=>http://example.com/#bar
$.mobile.navigate("#bar");
//Bindtothenavigateevent
$(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)
});
//AltertheURL:http://example.com/#bar=>http://example.com/#foo
window.history.back();
//Fromthe`navigate`bindingonthewindow,consoleoutput:
//=>"infoaboutthe#foohash"
//=>"back"
//=>"http://example.com/#bar
//=>"#bar"
劫持一个链接点击使用导航方法，然后加载内容
//Startingathttp://example.com/
//Defineaclickbindingforallanchorsinthepage
$("a").on("click",function(event){
//Preventtheusualnavigationbehavior
event.preventDefault();
//Altertheurlaccordingtotheanchor'shrefattribute,and
//storethedata-fooattributeinformationwiththeurl
$.mobile.navigate(this.attr("href"),{foo:this.attr("data-foo")});
//Hypotheticalcontentalterationbasedontheurl.E.g,make
//anajaxrequestforJSONdataandrenderatemplateintothepage.
alterContent(this.attr("href"));
});