jquery mobile 经验小结（1）

独立开发者PI

墨衍会员 · AI 创作全网分发码龄15年

关注

转载最新推荐文章于 2026-04-25 03:26:46 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

google.fastbutton.js 立即下载

1 按钮点击反应慢

在移动设备上用户从按下手指到触发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>