?

1.獲取jQuery mobile 文件，訪問jQuerymobile網站下載

（貌似使用jquery mobile后，jquery會自動在網頁中添加一些class類，第一次知道的我是被嚇呆的！！） 2.需要使用數據屬性，數據屬性是HTML5引入的，以data-開頭 比如data-role可以用于定義頁眉，頁腳，內容，頁面等

• data-role="page" 是在瀏覽器中顯示的頁面。
• data-role="header" 是在頁面頂部創建的工具條 (通常用于標題或者搜索按鈕)
• data-role="main" 定義了頁面的內容，比如文本， 圖片，表單，按鈕等。
• "ui-content" 類用于在頁面添加內邊距和外邊距。
• data-role="footer" 用于創建頁面底部工具條。

3.當jquery mobile中定義多個頁面,:page時，在移動端會默認只出現一個頁面 4.當遇到連接時，如果是同一個頁面的其他內容，或者是同個服務器上的其他內容，會使用ajax加載頁面 而當遇到外部網站，會執行常規的連接操作 如果要禁用jquery mobile 的操作，則用數據屬性：data-ajax=“false” 5.jquery頁面設置 頁面標題:在頁面標簽中用data-title設置，也可以在header標簽中設置 預取內容 在一個站點中，有幾個網頁是經常被用戶加載的，為了提高加載速度，可以讓瀏覽器后臺在主頁面加載時預先讀取。具體設置為在相應連接中添加data-prefetch=“true” 修改頁面的過度方式 -轉載 data-transition:poo(彈出窗口），fade,flip,flow,slide（從右到左滑動），slidedown（從上到下滑動），slidefade,turn,none 6.頁眉添加按鈕 在header頁面中添加按鈕，添加a連接 只在頁眉右邊添加一個按鈕：class=“ui-btn-right” 可以在按鈕中添加圖標 ?data-icon 7.添加返回按鈕 添加data-add-back-btn="true" 設置a連接為空，并設置data-rel=“back” 在頁腳中添加按鈕，他不會在按鈕四周保持空間，需添加“ui-bar類型 8.固定頁眉和頁腳 在頁眉頁腳中添加data-position=“fixed” 全屏的頁眉頁腳：data-fullscreen="true" 9.創建導航欄 在div標簽中添加data-role=“navbar”,然后創建無序列表 在激活的按鈕加上“uibtn-active”的類型標簽 一行最多只能添加五個按鈕，過多按鈕會被拆分 10.多頁面持久頁腳 所有頁面使用的data-id相同 需要添加“ui-btn-active,ui-state-persist” class標簽 11.列表功能 無序列表中ul添加data-role=“listview” 在li中添加a連接后，列表中會添加箭頭icon 內嵌列表：ul中添加data-inset=“true” 列表分隔符：li中添加data-role=“listdriver”或ul中加data-autodrivers=“true” 12.在列表中添加縮略圖或圖標 在li中添加img,或在添加“ui-li-icon”的class類型，圖標要指定位置，不然圖標不顯示： ui-btn-icon-top/bottom/left 拆分行的列表，在ul中添加data-spliticon=“delete” 13.列表的搜索過濾 在ul中添加data-filter=“true” 默認不去分大小寫，通過ajax方式檢索 14.使用tel和mailto自動調用手機的撥號和電子郵件功能? 15.表單的提交功能 在jquery-lmobie中都是通過ajax提交的 表單組件會自動優化 表單提交的div中添加data-role="fieldcontain" 16.選擇菜單 如需隱藏標簽，請使用 class ui-hidden-accessible。這在您把元素的 placeholder 屬性作為標簽時經常用到 我們可以使用 data-clear-btn="true" 屬性來添加清除輸入框內容的按鈕 (一個在輸入框右側的 X 圖標) jQuery Mobile 通過 AJAX 自動處理表單提交，并將試圖集成服務器響應到應用程序的 DOM 中。

• <form> 元素必須有一個 method 和一個 action 屬性
• 每個表單元素必須有一個唯一的 "id" 屬性。id 必須是整個站點所有頁面上唯一的。這是因為 jQuery Mobile 的單頁導航機制使得多個不同頁面在同一時間被呈現
• 每個表單元素必須有一個標簽。設置標簽的?for?屬性來匹配元素的 id

使用效果與使用平臺有關 17.搜索組件與滑塊組件 開關組件 <form method="post" action="demoform.php"> <label for="switch">切換開關：</label> <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False"? checked>（默認選中） </form> 滑塊組件，類型改為range 18.禁用原生表單控件 data-role="none" 迷你組件：data-mini="true" 19.創建模態對話框(以下兩種辦法都可以) a鏈接中添加data-rel="dialog" page中添加data-dialog="true" 20.使用網格進行內容布局 在div標簽中添加class=“ui-grid-a”，（a表示兩列網格，b表示三列網格，以此類推） 在div標簽中再添加class=“ui-block-a”(從a到d) 21.讓html元件響應式的只能適應不同尺寸 在現有網格中添加class=“ui-reponsive” 折疊框：data-role=“collapsible”（初始情況下展開：再添加data-collapsible=“false”） 可將收縮icon挪到右邊：data-iconpos=“right” 可折疊集合： data-role=“collapsible-set” 22.彈出式窗口 首先寫一個區塊：data-role=“popup” 然后寫一個a鏈接作為按鈕（以啟動事件）： <a href="#f" data-role="button" data-rel="popup" data-position-to="window">sss</a> 23.表格(響應式：列回流和列切換) 在table標簽中添加data-role=“table”?class="ui-responsive table-stroke"（分別是響應式和出現表格邊框） （添加響應式后，原先橫版的表格，會在分辨率改變時變為豎版的） 可以根據用戶需要過濾性的顯示數據 添加data-mode="columntoggle" 然后在thead中給列標題添加權重：data-priority="1~10" 對按鈕文本改變：data-column-btn-text=“？？” 24.添加面板 添加data-role=“panel”，而且必須在content外添加 data-position=“left/right”可以設置面板的方向 通過設置data-display屬性來訂正顯示方式：reveal、push、overveal 25.創建按鈕

• 使用 <button> 元素
• 使用 <input> 元素
• 使用帶有 data-role="button" 的 <a> 元素

組合按鈕（水平/豎直）： data-role="controlgroup" 和 data-type="horizontal|vertical" 后退按鈕： <a href="#" data-role="button"?data-rel="back">返回</a> 26.juqery mobile定義了多種主題，也可以自定義 http://www.runoob.com/jquerymobile/jquerymobile-themes.html 27.jquery mobile事件 jQuery on() 方法用于綁定事件到選中的元素上。 <script> $(document).on("pagecreate","#pageone",function(){
???// jQuery 事件...
}); </script> 旋轉事件： window.orientation 屬性針對縱向視圖返回 0，針對橫向視圖返回 90 或 -90。 頁面加載： jquery應用一般都是用$(document).ready來進行初始化，但是jquery mobile這一點卻不怎么好用，因為jquery mobile使用ajax加載頁面， $(document).ready只對第一個頁面有效 因此需要使用pagecreate事件

轉載于:https://www.cnblogs.com/lianzhibin/p/6212963.html

總結

以上是生活随笔為你收集整理的jQuery Mobile学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。