jQuery mobile类库使用时加载导航历史的方法简介


Posted in Javascript onDecember 04, 2015
jQuery.mobile.navigate( url [, data ] )

改变URL和跟踪历史。作品为浏览器和无历史新的API

  • url:是必须的参数。类型:字符串
  • data:是可选的参数。类型:对象。 

更改哈希片段两次然后日志提供导航事件数据时,浏览器向后移动的历史

// 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" ) );
});
Javascript 相关文章推荐
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
canvas实现钟表效果
Feb 13 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
vue.js+element 默认提示中英文操作
Nov 11 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 #Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 #Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 #Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 #Javascript
详解JavaScript逻辑And运算符
Dec 04 #Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 #Javascript
详解JavaScript逻辑Not运算符
Dec 04 #Javascript
You might like
php实现统计邮件大小的方法
2013/08/06 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
深入理解vue中的$set
2017/06/01 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
js实现表格数据搜索
2020/08/09 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
深入理解Python3中的http.client模块
2017/03/29 Python
python实现简单flappy bird
2018/12/24 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
节约用电倡议书
2015/04/28 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技