jQuery Mobile基礎

時間 2019-11-29

原文原文鏈接

一、安裝css

在<head></head>標籤裏邊寫入如下內容

jQuery Mobile CDN：

1 <head>
2     <meta charset="utf-8">
3     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
4     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
5     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
6 </head>

下載的jQuery Mobile【下載地址：http://jquerymobile.com/download/ 】html

1 <head>
2     <link rel=stylesheet href=jquery.mobile-1.3.2.css>
3     <script src=jquery.js></script>
4     <script src=jquery.mobile-1.3.2.js></script>
5 </head>

二、頁面jquery

由於在<div></div>標籤中已經區分了頁面，因此能夠在一個單獨的html文件中建立多個頁面了，經過惟一的id來分割每張頁面，並用href屬性來連接彼此。

1 data-role="page" 是顯示在瀏覽器中的頁面
2 data-role="header" 建立頁面上方的工具欄（經常使用於標題和搜索按鈕）
3 data-role="content" 定義頁面的內容，好比文本、圖像、表單和按鈕，等等
4 data-role="footer" 建立頁面底部的工具欄

三、過渡

過渡效果能夠設置頁面之間切換的效果，新版本的瀏覽器可能支持3D轉換效果

使用方式以下：

即在<a></a>標籤裏面添加一個data-transition屬性便可

<a href="#anylink" data-transition="slide">滑動到頁面二</a>

【以上的詳細效果能夠參考： http://www.w3school.com.cn/jquerymobile/jquerymobile_transitions.asp】

注：以上全部的效果同時支持反向動做，須要的添加 data-direction="reverse" 屬性便可

四、按鈕

建立按鈕的方法有如下幾種：

按鈕的分類：

導航按鈕

默認顯示的按鈕，佔據屏幕的整個寬度

行內按鈕

添加屬性data-inline="true"便可

組合按鈕

添加屬性data-role="controlgroup" 與屬性 data-type="horizontal|vertical"便可

後退按鈕

添加屬性data-rel="back"

提示：jQuery Mobile 中的按鈕會自動得到樣式，這加強了他們在移動設備上的交互性和可用性。咱們推薦您使用 data-role="button" 的 <a> 元素來建立頁面之間的連接，而 <input> 或 <button> 元素用於表單提交。

默認狀況下，按鈕會佔據屏幕的所有寬度。若是您須要按鈕適應其內容，或者若是您須要兩個或多個按鈕並排顯示，請添加 data-inline="true"：

其餘屬性：

【更多屬性見：http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp】

五、圖標

如需向您的按鈕添加圖標，請使用 data-icon 屬性：

下面咱們已列出 jQuery Mobile 提供的全部可用圖標：

圖標位置：

經過data-iconpos屬性能夠設置圖標的位置，圖標的默認位置是圖標靠左顯示的：

data-iconpos="top|right|bottom|left"

只顯示圖標

若是隻需顯示圖標，設置屬性"data-iconpos=notext"便可

六、工具欄

標題欄

頁眉一般會包含頁眉標題/LOGO 或一到兩個按鈕（一般是首頁、選項或搜索按鈕）
若是隻設置一個按鈕的話，按鈕是不會顯示在標題的右側，要想顯示在標題的的右側，之須要設置class="ui-btn-right"屬性便可

頁腳欄

頁腳與頁眉的樣式不一樣（它會減去一些內邊距和空白，而且按鈕不會居中）。若是要修正該問題，請設置屬性class="ui-btn"便可
也能夠在頁腳中選擇是水平仍是垂直的組合按鈕

定位頁眉和頁腳

放置頁眉和頁腳的方式有三種：

Inline - 默認。頁眉和頁腳與頁面內容位於行內。
Fixed - 頁面和頁腳會留在頁面頂部和底部。
Fullscreen - 與 fixed 相似;頁面和頁腳會留在頁面頂部和底部，but also over the page content. It is also slightly see-through

請使用 data-position 屬性來定位頁眉和頁腳：

七、導航欄

導航默認的連接會自動轉換爲按鈕

1 <div data-role="header"> 
2   <div data-role="navbar">
3     <ul>
4       <li><a href="#anylink">首頁</a></li>
5       <li><a href="#anylink">頁面二</a></li>
6       <li><a href="#anylink">搜索</a></li>
7     </ul>
8   </div>
9 </div>

八、可摺疊

可摺疊的內容塊

你若是想建立可摺疊的內容塊，你須要向某個容器中設置data-role="collapsible" 屬性。在容器（div）中，添加一個標題元素（h1-h6），其後是您須要擴展的任意 HTML 標記：

1 <div data-role="collapsible">
2   <h1>點擊我 - 我能夠摺疊！</h1>
3   <p>我是可摺疊的內容。</p>
4 </div>

默認地，該內容是關閉的。如需在頁面加載時擴展內容，請使用 data-collapsed="false"：

嵌套的可摺疊塊

摺疊內容塊可根據本身的須要任意嵌套

可摺疊集合

可摺疊集合（Collapsible sets）指的是被組合在一塊兒的可摺疊塊（常被稱爲手風琴）。當新塊被打開時，全部其餘塊會關閉。
建立若干內容塊，而後經過 data-role="collapsible-set" 用新容器包裝這個可摺疊塊：

 1 <div data-role="collapsible-set">
 2   <div data-role="collapsible">
 3     <h1>點擊我 - 我能夠摺疊！</h1>
 4     <p>我是被展開的內容。</p>
 5   </div>
 6   <div data-role="collapsible">
 7     <h1>點擊我 - 我能夠摺疊！</h1>
 8     <p>我是被展開的內容。</p>
 9   </div>
10 </div>

1. jQuery Mobile 基礎
2. jquery mobile基礎
3. Android+Jquery Mobile學習系列(2)-HTML5/Jquery Mobile基礎
4. jQuery Mobile 入門基礎教程
5. html5文章 -- 使用 jQuery Mobile 與 HTML5 開發 Web App —— jQuery Mobile 基礎
6. jQuery Mobile基本UI組件
7. jquery mobile
8. jQuery Mobile
9. JQuery Mobile
10. jQuery mobile
更多相關文章...
• Kotlin 基礎語法 - Kotlin 教程
• Scala 基礎語法 - Scala教程
• Kotlin學習（二）基本類型
• ☆基於Java Instrument的Agent實現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。