jquery mobile 入門1
一. jQuery Mobile 簡介
1. 需要引入的文件
要使用 jQuery Mobile，首先需要在開發的界面中包含如下3個內容：
CSS文件jquery.mobile-1.4.5.min.css
jQuery類庫文件 jquery.min.js
jQuery Mobile文件 jquery.mobile-1.4.5.min.js
2. 頁面結構
一個jQuery Mobile頁面時你需要創建三塊基本內容（頭，正文，尾）
data-role="page" 是顯示在瀏覽器中的頁面
data-role="header" 創建頁面上方的工具欄（常用於標題和搜索按鈕）
data-role="content" 定義頁面的內容，比如文本、圖像、表單和按鈕，等等
data-role="footer" 創建頁面底部的工具欄
在jQuery Mobile中，可以在單一 HTML 文件中創建多個頁面。通過唯一的id來分隔每張頁面
3.常用組件1
jQuery Mobile中的一個“page”結構一般使用一個DIV來組織。
二 . 組件1
1）按鈕
在jQuery Mobile中，按鈕可通過三種方式創建：
使用 < button > 元素
使用 < input > 元素
使用帶有 data-role="button" 的 < a >元素
默認情況下，按鈕佔滿整個屏幕寬度。如果你想要一個僅是與內容一樣寬的按鈕，或者如果您想要並排顯示兩個或多個按鈕，請添加 data-inline="true"，如果想組合按鈕，可以使用 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 一起使用來規定是否水平或垂直組合按鈕。
2）摺疊塊
可摺疊塊允許您隱藏或顯示內容 - 對於存儲部分信息很有用。如需創建一個可摺疊的內容塊，需要爲容器添加 data-role="collapsible" 屬性。在容器（div）內，添加一個標題元素（H1-H6），後跟您想要進行擴展的 HTML 標記，默認情況下，內容是被摺疊起來的。如需在頁面加載時展開內容，請使用 data-collapsed="false"：
- <div data-role="collapsible" data-collapsed="false">
- <h1>點擊我 - 我可以摺疊!</h1>
- <p>我是可摺疊的內容。</p>
- </div>
注：可摺疊塊允許嵌套
3） 面板
jQuery Mobile中的面板會在屏幕的左側向右側劃出。可以通過指定id的div元素添加 data-role="panel" 屬性來創建面板。
- <div data-role="panel" id="myPanel">
- <h2>面板標題..</h2>
- <p>文本內容..</p>
- </div>
panel標記必須置於頭部、內容、底部組成的頁面之前或之後。
要訪問面板，需要創建一個指向面板的鏈接，點擊該鏈接即可打開面板：
- <a href="#myPanel" class="ui-btn ui-btn-inline">打開面板</a>
默認情況下，面板會顯示在屏幕的左側。如果想讓面板出現在屏幕的右側，可以指定 data-position="right" 屬性。
可以通過使用 data-display 屬性來控制面板的展示方式:
- divdata-role="panel"id="overlayPanel"data-display="overlay"><!--覆蓋顯示-->
- <divdata-role="panel"id="revealPanel"data-display="reveal"> <!--滑動顯示-->
- <divdata-role="panel"id="pushPanel"data-display="push"> <!--推動顯示-->
可以使用按鈕來關閉面板：僅需要在面板的div中添加 data-rel="close" 屬性。
- <div data-role="panel" id="myPanel">
- <h2>面板頭部..</h2>
- <p>面板中的一些文本內容..</p>
- <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">關閉面板</a>
- </div>
4）toolbar
工具欄元素通常位於頭部和尾部內， 讓導航易於訪問。
頭部欄一般包含頁面標題或一兩個按鈕（通常是首頁、選項或搜索），我們通過class屬性來控制。例如要在標題左側展示一個主頁按鈕，若是在右側則class='ui-btn-icon-right'。如下代碼：
- <div data-role="header">
- <a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">主頁</a>
- <h1>歡迎訪問我的主頁</h1>
- </div>
尾部欄比頭部欄更靈活，在整個頁面中它們更具功能性和可變性。因此可以包含儘可能多的按鈕,還可以將尾部中的按鈕進行水平或垂直組合。如下代碼：
- <div data-role="footer" style="text-align:center;">
- <div data-role="controlgroup" data-type="horizontal">
- <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">後退</a>
- <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">主頁</a>
- <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">前進</a>
- </div>
- </div>
頭部和尾部可以通過三種方式進行定位，通過屬性data-position來控制：
Inline - 默認。頭部欄和尾部欄與頁面內容內聯。
Fixed - 頭部欄和尾部欄固定在頁面的頂部和底部。
Fullscreen - 與 Fixed 定位模式基本相同，頭部欄和尾部欄固定在頁面的頂部和底部。
- <div data-role="header" data-position="fixed"></div>
- <div data-role="footer" data-position="fixed"></div>
5）navbar
導航欄是由一組水平排列的鏈接組成，通常包含在頭部或尾部內。默認情況下，導航欄中的鏈接將自動變成按鈕，使用 data-role="navbar" 屬性來定義導航欄，可以使用 data-icon 屬性爲導航按鈕添加圖標:
- <div data-role="header">
- <div data-role="navbar">
- <ul>
- <li><a href="#anylink" data-icon="home">首頁</a></li>
- <li><a href="#anylink" data-icon="arrow-r">頁面二</a></li>
- <li><a href="#anylink" data-icon="search">搜索</a></li>
- </ul>
- </div>
- </div>
data-icon 屬性有很多，如home、search、alert、audio、refresh等等。
當導航欄中的某個鏈接被點擊，它將獲得被選中（按下）的外觀，在不點擊鏈接時獲得這種外觀，使用class="ui-btn-active"：
- <a href="#anylink" class="ui-btn-active">首頁</a>
6）彈窗
彈窗是一個非常流行的對話框，彈窗可以覆蓋在頁面上展示。彈窗可用於顯示一段文本，圖片，地圖或其他內容。創建一個彈窗，需要使用 < a > 和 < div > 元素。在 < a > 元素上添加 data-rel="popup" 屬性， < div > 元素添加 data-role="popup" 屬性。 接着我們爲 < div > 指定 id， 然後設置 < a > 的 href 值爲 < div > 指定的 id。 < div > 中的內容爲彈窗顯示的內容，可以用 data-rel="back"屬性與樣式來實現彈窗的關閉。
- <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">顯示彈窗</a>
- <div data-role="popup" id="myPopup" class="ui-content">
- <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">關閉</a>
- <p>右上角關閉按鈕</p>
- <p><b>提示:</b> 你也可以通過點擊彈窗外的區域來關閉彈窗。</p>
- </div>