標籤：head har range demo style mod 筆記 stroke .com
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,none6.頁首添加按鈕在header頁面中添加按鈕，添加a串連只在頁首右邊添加一個按鈕：class=“ui-btn-right”可以在按鈕中添加表徵圖 data-icon7.添加返回按鈕添加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事件
jQuery Mobile筆記
