先上最終效果：

最近做了一個用手機瀏覽器訪問的web應(yīng)用，采用較流行的HTML5，為了提高開發(fā)效率節(jié)省時間決定采用現(xiàn)有開源框架，免去了自己做設(shè)計與兼容性。

一些比較優(yōu)秀的框架：10大優(yōu)秀的移動Web應(yīng)用程序開發(fā)框架推薦

?

?最終選擇的是 jQuery Mobile ，官方地址：http://jquerymobile.com

jQuery Mobile 是針對觸屏智能手機與平板電腦的網(wǎng)頁開發(fā)框架。能工作在現(xiàn)有主流的智能手機和平板電腦上，且構(gòu)建于 jQuery 以及 jQuery UI類庫之上，用極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼就能完成頁面的布局渲染。

jQuery Mobile提供大量的實用 Demo實例?從而減少學(xué)習(xí)成本，容易上手。對于中文版的文檔可在? w3cschool的 jQuery Mobile 教程?中查詢幫助。

本人用的是 jQuery Mobile 1.3.2 冒似要用jquery-1.8.2.min.js才能正常運行，官網(wǎng) 下載?jQuery Mobile 包，然后按照指引的方法引用css與js，不要忘記引用jquery包。

注意，為了讓網(wǎng)頁的寬度自動適應(yīng)手機屏幕的寬度在head標(biāo)簽內(nèi)加上以下內(nèi)容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />width=device-width ：表示寬度是設(shè)備屏幕的寬度initial-scale=1.0：表示初始的縮放比例minimum-scale=1.0：表示最小的縮放比例maximum-scale=1.0：表示最大的縮放比例user-scalable=yes：表示用戶是否可以調(diào)整縮放比例

由于jQuery Mobile屬于前端UI，因此要從后臺動態(tài)取數(shù)據(jù)得用異步來取，一種是可以結(jié)合WCF或webservice，無需本地搭建后臺，還一種是用***Handler.ashx，返回json或XML數(shù)據(jù)。

對于listview控件，動態(tài)綁定后要刷新動作才能顯示，listview.listview("refresh");

各組件刷新方法：

復(fù)選框:

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

單選框:

$("input[type='radio']").prop("checked",true).checkboxradio("refresh");

下拉菜單:

var myselect = $("#selectfoo");myselect[0].selectedIndex = 3;myselect.selectmenu("refresh");

Sliders:

$("input[type='range']").val(60).slider("refresh");

開關(guān):

?$("#selectbar");myswitch[0].selectedIndex = 1;myswitch.slider("refresh");

?對于有些組件可能不能滿足個性化要求，如日期控件在手機端的選擇，可以選擇配套的插件來完成：分享15款為jQuery Mobile定制的插件

?注意jQuery Mobile對page的定義，一個頁面有多個page標(biāo)簽下，不同標(biāo)簽間的切換，頁面加載時只加載指定page下的內(nèi)容包括js，如果需要加載的Js未包括在內(nèi)如寫在了head標(biāo)簽內(nèi)，則不會加載，導(dǎo)致頁面切換后達不到想要的效果。

?

特殊問題解決方法：

data-tap-toggle="false" header和footer在頁面滾動的時候也不消失

data-position="fixed"之后的效果是：頁面滾動的時候header和footer消失

jQuery Mobile在 CSDN的資源?

JQM常見出錯問題解決辦法匯總

?

?

總結(jié)

以上是生活随笔為你收集整理的jquery.mobile手机网页简要的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。