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 函数参数限制说明
Nov 19 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
js创建对象的方式总结
Jan 10 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 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数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
python paramiko模块学习分享
2017/08/23 Python
python基于http下载视频或音频
2018/06/20 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python同时迭代多个序列的方法
2020/07/28 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
幼儿园教师工作感言
2014/02/15 职场文书
销售主管竞聘书
2014/03/31 职场文书
文明班级建设方案
2014/05/15 职场文书
安全承诺书格式
2014/05/21 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
导游词之舟山普陀山
2019/11/06 职场文书