jquery.mobile手機網頁簡要

先上最終效果：

最近作了一個用手機瀏覽器訪問的web應用，採用較流行的HTML5，爲了提升開發效率節省時間決定採用現有開源框架，免去了本身作設計與兼容性。

一些比較優秀的框架：10大優秀的移動Web應用程序開發框架推薦

 

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

jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。能工做在現有主流的智能手機和平板電腦上，且構建於 jQuery 以及 jQuery UI類庫之上，用極少的 HTML五、CSS三、JavaScript 和 AJAX 腳本代碼就能完成頁面的佈局渲染。

jQuery Mobile提供大量的實用 Demo實例 從而減小學習成本，容易上手。對於中文版的文檔可在  w3cschool的 jQuery Mobile 教程 中查詢幫助。

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

注意，爲了讓網頁的寬度自動適應手機屏幕的寬度在head標籤內加上如下內容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width=device-width ：表示寬度是設備屏幕的寬度

initial-scale=1.0：表示初始的縮放比例

minimum-scale=1.0：表示最小的縮放比例

maximum-scale=1.0：表示最大的縮放比例

user-scalable=yes：表示用戶是否能夠調整縮放比例

因爲jQuery Mobile屬於前端UI，所以要從後臺動態取數據得用異步來取，一種是能夠結合WCF或webservice，無需本地搭建後臺，還一種是用***Handler.ashx，返回json或XML數據。

對於listview控件，動態綁定後要刷新動做才能顯示，listview.listview("refresh");

各組件刷新方法：

複選框:

$("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");

開關:

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

 對於有些組件可能不能知足個性化要求，如日期控件在手機端的選擇，能夠選擇配套的插件來完成：分享15款爲jQuery Mobile定製的插件

 注意jQuery Mobile對page的定義，一個頁面有多個page標籤下，不一樣標籤間的切換，頁面加載時只加載指定page下的內容包括js，若是須要加載的Js未包括在內如寫在了head標籤內，則不會加載，致使頁面切換後達不到想要的效果。

 

特殊問題解決方法：

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

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

jQuery Mobile在 CSDN的資源 

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