jQuery Mobile教程: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

展开阅读全文

没有更多推荐了,返回首页