jquery mobile 經驗小結 (1)


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>




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: