jQuery Mobile教程-事件篇

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

特别申明:本系列教程由小春撰写

本文我们来认识一下jQuery Mobile的几个比较重要的基本事件

1、mobileinit

可以利用它来扩展$.mobile或者修改默认配置

示例:

<script type="text/javascript">
//方式1:绑定mobileinit
$(document).bind('mobileinit',function(e){
	//修改activePageClass
	$.mobile.activePageClass = 'custom-ui-page-active';

	//增加一个自定义属性
	$.mobile.version_inner = 'zhang01';
});

//方式2:绑定mobileinit
$(document).bind('mobileinit',function(e){
	//增加一个自定义属性
	$.extend($.mobile,{
		activePageClass:'custom-ui-page-active',
		version_inner:'zhang01';
	});
});
</script>

//自定义脚本需要在依赖前面
<script src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/jqm/../js/jquery.mobile-1.1.0.js" type="text/javascript"></script>

说明:
1、对mobileinit的绑定事件需要在引入jquery.mobile.js之前
2、扩展的方式有两种哦

2、$.mobile.loadPage(url,[options])

将某个页面加载到当前页面中,并自动对其增强

示例:

//给按钮绑定tap事件
//调用loadPage,载入contact.html
$("#loadContact").live('tap',function(){
	$.mobile.loadPage("contact.html");
});

关于loadPage的默认参数如图:

$.mobile.loadPage.defaults

说明:
1、loadPage只是载入到DOM中,不会显示

3、$.mobile.changePage(toPage,[options])

替换当前页面

参数toPage:文件URL或者内部的ID

示例:

//给按钮绑定tap事件
$("#loadCopyright").live('tap',function(){
	//调用changePage,显示一个已经在DOM的id为copyright的page
	$.mobile.changePage("#copyright");

	//调用changePage,显示一个contact.html
	$.mobile.changePage("contact.html");
});

关于changePage的默认参数如图:

$.mobile.changePage.defaults

说明:
1、changePage的第一个参数可以使

4、$.mobile.showPageLoadingMsg(theme,msgText,textonly)

弹出提示信息

参数theme:主题
参数msgText:提示文案内容
参数textonly:是否只显示文案

示例:

//给按钮绑定tap事件
$("#showPageLoadingMsg").live('tap',function(){
	$.mobile.showPageLoadingMsg('e','自定义提示,主题e',true);
});

5、$.mobile.hidePageLoadingMsg()

关闭提示信息

示例:

//hidePageLoadingMsg
$("#hidePageLoadingMsg").live('tap',function(){
	$.mobile.hidePageLoadingMsg();
});

6、$.mobile.silentScroll(number)

垂直滚动number,不会触发scrollstart和scrollstop

示例:

//给按钮绑定tap事件
//silentScroll
$("#silentScroll").live('tap',function(){
	$.mobile.silentScroll(300);
});

7、滚动事件:

1、给window绑定scrollstart事件:

示例:

$(window).scrollstart(function(e){
	var scrollTop = $(e.target).scrollTop();
	$("#scrollinfo").text("scrollstart:"+scrollTop);
});

2、给window绑定scrollstop事件:

示例:

$(window).scrollstop(function(e){
	var scrollTop = $(e.target).scrollTop();
	$("#scrollinfo").text("scrollstop:"+scrollTop);
});

demo

PS:
1、有问题欢迎在官网留言或者直接联系我:@zhangyaochun_fe
2、可以在官网的问答频道进行提问,我们会尽快回复
3、谢谢您对w3cplusjquery mobile系列教程的关注

关于小春

专注于前端开发,对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习,涉足移动前端许久,爱好分享交流…个人博客focus-fe。欢迎随时关注我:新浪微博

如需转载,烦请注明出处:https://www.w3cplus.com/blog/706.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部