分类: Web开发
2015-04-01 20:03:33
本文我们来认识一下jQuery Mobile的几个比较重要的基本事件
可以利用它来扩展$.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、扩展的方式有两种哦
将某个页面加载到当前页面中,并自动对其增强
示例:
//给按钮绑定tap事件 //调用loadPage,载入contact.html $("#loadContact").live('tap',function(){ $.mobile.loadPage("contact.html"); });
关于loadPage的默认参数如图:
说明:
1、loadPage只是载入到DOM中,不会显示
替换当前页面
参数toPage:文件URL或者内部的ID
示例:
//给按钮绑定tap事件 $("#loadCopyright").live('tap',function(){ //调用changePage,显示一个已经在DOM的id为copyright的page $.mobile.changePage("#copyright"); //调用changePage,显示一个contact.html $.mobile.changePage("contact.html"); });
关于changePage的默认参数如图:
说明:
1、changePage的第一个参数可以使
弹出提示信息
参数theme:主题
参数msgText:提示文案内容
参数textonly:是否只显示文案
示例:
//给按钮绑定tap事件 $("#showPageLoadingMsg").live('tap',function(){ $.mobile.showPageLoadingMsg('e','自定义提示,主题e',true); });
关闭提示信息
示例:
//hidePageLoadingMsg $("#hidePageLoadingMsg").live('tap',function(){ $.mobile.hidePageLoadingMsg(); });
垂直滚动number,不会触发scrollstart和scrollstop
示例:
//给按钮绑定tap事件 //silentScroll $("#silentScroll").live('tap',function(){ $.mobile.silentScroll(300); });
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); });