jquery mobile 经验小结 (1)
2013-10-29 13:45
417 查看
1 按钮点击反应慢
在移动设备上用户从按下手指到触发click事件,这之间有接近300ms的延时,所以把处理函数绑定在click事件上是不合适的,google.fastbutton.js为此提供了解决方案,使用方法如下:
2 页面滚动
jquerymobile结合iscroll可以使页面在移动设备上流畅的滚动,使用方法如下:
iScroll 的诞生是因为手机 Webkit 浏览器(iPhone、iPod、Android 和 Pre)本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾,并对内容进行滚动的方式。
而 iScroll 就是为了解决这个问题。在做webApp的过程中泳道滚动用的absoulted定位,在安卓2.3.*版本上根本无法滚动,iscroll解决了这个问题;
3 替换原生的alert
当我们使用alert提示错误信息时,在移动设备上会显示页面的IP地址,与客户端整体分隔不一致,解决这个问题的办法有两个:
a 使用cordova暴露出来的notification
b 使用jquery.msg.js插件
4 改造jquerymobile的loading效果
在使用过程中,经常发现jqm的loader有两个问题:
1 时隐时现,没法控制;
2 当显示时,其下的按钮仍然能够点击,在网络状况不好的时候容易造成页面混乱。
解决方法:使用以下方法替换jqm的loader
5 一张页面一个JS文件
jquerymobile是通过ajax请求获取新页面的内容,把它插入到当前dom树中显示出来的,因此我们在开发过程中可以将不同的内容写在不同的文件中,例如
page1.html的内容:
page2.html的内容
page2.js的内容
6 公共导航
按照jqm的官方说明,我们需要在每个页面上都添加一样的header或footer才能实现固定导航,如果我们的页面有很多,并且在导航条上有业务处理,这样的做法就很无语了。还好,我们可以通过下面的方法解决这个问题:
第一步:添加自定义标记data-header和data-footer
第二步:在pagecreate事件解析data-header和data-footer
第三步,编写导航条header.html
7 加载外部popup
jqm示例代码中,打开一个popup时,这个popup必须存在于当前dom树中,如果我们多个页面需要用到一样的popup,把popup在每个页面写一份显然是不合适的,所以有了以下方法:
在移动设备上用户从按下手指到触发click事件,这之间有接近300ms的延时,所以把处理函数绑定在click事件上是不合适的,google.fastbutton.js为此提供了解决方案,使用方法如下:
<scripttype="text/javascript"src="../js/jquery.js"></script> <scripttype="text/javascript"src="../js/google.fastbutton.js"></script> <scripttype="text/javascript"src="../js/jquery.google.fastbutton.js"></script> <scripttype="text/javascript"> $(document).ready(function() { $('#btn').fastClick(function(e){ //你的代码 }); }); </script>
2 页面滚动
jquerymobile结合iscroll可以使页面在移动设备上流畅的滚动,使用方法如下:
iScroll 的诞生是因为手机 Webkit 浏览器(iPhone、iPod、Android 和 Pre)本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾,并对内容进行滚动的方式。
而 iScroll 就是为了解决这个问题。在做webApp的过程中泳道滚动用的absoulted定位,在安卓2.3.*版本上根本无法滚动,iscroll解决了这个问题;
<scripttype="text/javascript"src="../js/jquery.js"></script> <scripttype="text/javascript"src="../js/jquery.mobile-1.2.0.js"></script> <scripttype="text/javascript"src="../js/iscroll.js"></script> <divdata-role="page"id="page1"> <divid="scroller"data-role="content"> <!--页面元素--> </div> </div> <scripttype="text/javascript"> varmakeScroll = function(id) { varelem= $('#'+ id); if(elem.data('iscroll')) { //如果已经设置了滚动 return; } elem.css({overflow: 'hidden'}); //把需要滚动的内容包裹在<div data-iscroll='scroller'></div>标签下 //这是iscroll代码的要求 varscroller= elem.find('[data-iscroll="scroller"]').get(0); if(!scroller) { $(elem.get(0)).children().wrapAll("<div data-iscroll='scroller'></div>"); } variscroll= newiScroll(elem.get(0), { hScroll: false,//水平不滚动 vScroll: true,//垂直滚动 hScrollbar: false,//不显示滚动条 vScrollbar: false, fixedScrollbar: true, fadeScrollbar: false, hideScrollbar: true, bounce: true, momentum: true, //useTransform:false, lockDirection: true, checkDOMChanges: true, onBeforeScrollStart: function(e) { //以下代码解决在popup中select无法选中的问题 vartarget= e.target; while(target.nodeType != 1) target= target.parentNode; if(target.tagName != 'SELECT'&& target.tagName != 'option'&& target.tagName != 'INPUT'&& target.tagName != 'TEXTAREA') { e.preventDefault(); e.stopPropagation(); } } } }); elem.data('iscroll', iscroll); setTimeout(function() { iscroll.refresh(); }, 200); }; $(document).ready(function() { $('#page1').on('pageinit', function(e) { makeScroll('scroller'); }); }); </script>
3 替换原生的alert
当我们使用alert提示错误信息时,在移动设备上会显示页面的IP地址,与客户端整体分隔不一致,解决这个问题的办法有两个:
a 使用cordova暴露出来的notification
<scripttype="text/javascript"> window.alert=function(msg){ navigator.notification.alert(msg); }; </script>
b 使用jquery.msg.js插件
<linkrel="stylesheet"href="../css/jquery.msg.css"/> <scripttype="text/javascript"src="../js/jquery.js"></script> <scripttype="text/javascript"src="../js/jquery.center.min.js"></script> <scripttype="text/javascript"src="../js/jquery.msg.js"></script> <scripttype="text/javascript"> window.alert = function(text) { $.msg({ content: text, z: 9999, bgPath: origin + 'css/images/', autoUnblock: false }); }; </script>
4 改造jquerymobile的loading效果
在使用过程中,经常发现jqm的loader有两个问题:
1 时隐时现,没法控制;
2 当显示时,其下的按钮仍然能够点击,在网络状况不好的时候容易造成页面混乱。
解决方法:使用以下方法替换jqm的loader
<scripttype="text/javascript"> $(document).on("mobileinit", function() { $.mobile.loader.prototype.options.text = '载入中...'; $.mobile.loader.prototype.options.textVisible = true; //替换jquerymobile的Loading效果,自己控制Loading的显示和隐藏,当显示时屏幕不可点击 //loader计数器 varloadingCounter= 0; //保存jqm的loading引用 varoriShowFuc= $.mobile.showPageLoadingMsg; varoriHideFuc= $.mobile.hidePageLoadingMsg; //替换为空函数,这样jqm本身不会再出现loading效果了 $.mobile.showPageLoadingMsg = function() {}; $.mobile.hidePageLoadingMsg = function() {}; window.miasShowLoading = function(text) { loadingCounter++; if(loadingCounter> 0) { if(!$("html").hasClass("ui-loading")) { //增加半透明遮罩层,屏蔽点击事件 var$overlay= $('<div id="miasLoadingMask" class="jquery-msg-content" style="position:absolute; z-index:9999; top:0px; right:0px; left:0px; height:'+ $(document).height() + 'px;"></div>'); $overlay.appendTo($('body')); $overlay.bind('vmousedown', function(e) { e.preventDefault(); }); }); $overlay.bind('vmousemove', function(e) { e.preventDefault(); }); //调用jqm的loader效果 oriShowFuc.call(this, 'a',text); } } }; window.miasHideLoading = function() { loadingCounter--; if(loadingCounter<= 0) { loadingCounter= 0; if($("html").hasClass("ui-loading")) { //移除遮罩层 var$overlay= $('#miasLoadingMask'); if($overlay.length) { $overlay.unbind('vmousedown'); $overlay.unbind('vmousemove'); $overlay.remove(); } oriHideFuc.call(this); } } }; }); </script>
5 一张页面一个JS文件
jquerymobile是通过ajax请求获取新页面的内容,把它插入到当前dom树中显示出来的,因此我们在开发过程中可以将不同的内容写在不同的文件中,例如
page1.html的内容:
<!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>test</title> <linkrel="stylesheet"href="../css/jquery.mobile-1.2.0.min.css"/> <scripttype="text/javascript"src="../js/jquery.js"></script> <scripttype="text/javascript"src="../js/jquery.mobile-1.2.0.js"></script> <scripttype="text/javascript"src="./page2.js"></script> <scripttype="text/javascript"> $(document).ready(function() { //这里将pageinit事件转发到每个页面的自定义函数上 //通过这种方式实现页面的分离 $(document).on("pageinit", function(e) { var$page= $(e.target); varpageId= $page.attr("id"); if(pageId) { if(window[pageId+ "_"+ e.type]) { window[pageId+ "_"+ e.type](); } } }); }); </script> </head> <body> <divid="page1"data-role="page"> <ahref="./page2.html" data-role="button">跳转到page2</a> </div> </body> </html>
page2.html的内容
<!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>test</title> <!--此处不需要引入js和css,jqm会忽略它--> </head> <body> <divid="page2"data-role="page"> <!--something --> </div> </body> </html>
page2.js的内容
function page2_pageinit(){ //在此处进行自定义的页面初始化 }
6 公共导航
按照jqm的官方说明,我们需要在每个页面上都添加一样的header或footer才能实现固定导航,如果我们的页面有很多,并且在导航条上有业务处理,这样的做法就很无语了。还好,我们可以通过下面的方法解决这个问题:
第一步:添加自定义标记data-header和data-footer
<divdata-role="page"id="page1"data-header="./header.html"data-footer="./footer.html">
第二步:在pagecreate事件解析data-header和data-footer
<scripttype="text/javascript"> //同步方式加载html内容 varmiasLoadContent = function(url) { varcontent= ""; $.ajax({ url: url, type: 'GET', dataType: "html", async: false, success: function(html, textStatus, xhr) { content= html; }, error: function(xhr, textStatus, errorThrown) { content= ""; } }); returncontent; }; $(document).on("pagecreate", function(e) { var$page= $(e.target); varpageId= $page.attr("id"); varheaderUrl= $page.attr("data-header"); if(headerUrl) { varheaderHtml= window["sessionStorage"].getItem(headerUrl); if(!headerHtml) { headerHtml= miasLoadContent(headerUrl); window["sessionStorage"].setItem(headerUrl, headerHtml); } var$header= $(headerHtml); $header.appendTo($page); } varfooterUrl= $page.attr("data-footer"); if(footerUrl) { varfooterHtml= window["sessionStorage"].getItem(footerUrl); if(!footerHtml) { footerHtml= miasLoadContent(footerUrl); window["sessionStorage"].setItem(footerUrl, footerHtml); } $page.append(footerHtml); } }); </script>
第三步,编写导航条header.html
<divdata-role="header" data-id="header"data-position="fixed"data-tap-toggle="false"> <divclass="ui-btn-left"> <ahref="./page1.html"data-role="button"data-icon="home"data-theme="b">首页</a> </div> <h1>非车报价</h1> <divclass="ui-btn-right"> <ahref="#" class="headerUser"id="loginUser">SH0060</a> </div> </div> footer.html <divdata-role="footer"data-position="fixed"data-id="footer" data-tap-toggle="false"> <imgsrc="../../css/images/logo2.png"> </div>
7 加载外部popup
jqm示例代码中,打开一个popup时,这个popup必须存在于当前dom树中,如果我们多个页面需要用到一样的popup,把popup在每个页面写一份显然是不合适的,所以有了以下方法:
<scripttype="text/javascript"> varfindOrLoadDiv = function(divId, divUrl) { var$div= $(divId); if($div.length == 0) { vardata= miasLoadContent(divUrl); if(data&& data!== '') { $div= $(data); $div.appendTo($.mobile.activePage); $(document).trigger('create'); //重新渲染页面元素 return$div; } else{ console.log('load '+ divUrl+ ' failed'); returnnull; } } else{ return$div; } }; varpopup = findOrLoadDiv('#popup1', './popup1.html'); if(popup) { popup.popup('open'); } </script>
相关文章推荐
- Oracle9i PL/SQL编程的经验小结
- 在JAVA中使用文档对象模型DOM经验小结
- JavaScript学习笔记(十)——学习心得与经验小结
- C++代码书写风格的一点小结(也许会对编程经验在两个月以下的程序员会有一定参考价值)
- 跨平台C++程序开发经验小结
- Phonegap + HTML5 开发经验小结
- Windows网络编程经验小结
- 我的架构经验小结(二)—— 关于三层架构
- JSP学习经验小结分享
- 安装sqlserver2008碰上的问题以及解决方法-----前人经验小结以及
- 我的架构经验小结(一)-- 常用的架构模型
- c指针学习小结(参考别人总结的经验)
- Oracle9i PL/SQL编程的经验小结
- 写分布式程序经验小结
- ecshop经验小结
- Unity3d 经验小结
- 编写JavaScript的经验小结
- 基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
- AppCode 中开发 Mac OS X 应用程序或共享库的经验小结
- mybatis 使用经验小结,batch批量提交大量数据