首頁 > 開發者 > 網站開發

Jquery Mobile學習總結

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：dev   alt   搜尋   pps   type   log   css   學習   垂直   

jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。以下例子：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
<div data-role="header">
<h1>歡迎訪問我的首頁</h1>
<div data-role="navbar">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">第二頁</a></li>
<li><a href="#">搜尋</a></li>
</ul>
</div>
</div>

<div data-role="main" class="ui-content">
<p>我的內容..</p>
</div>

<div data-role="footer">
<h1>我的底部</h1>
</div>
</div>


</body>
</html>

 

關於data-role：

Jquery Mobile裡面定義了很多的data-role,下面我把他們一一列舉，總結一下

data-role="page"  是在瀏覽器中顯示的頁面。

data-role="header"是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)

data-role="content" 定義了頁面的內容，比如文本， 圖片，表單，按鈕等。

【元素中也可以自己定義data-role例如data-role="main" class="ui-content"，效果等於data-role="content"】

data-role="footer" 用於建立頁面底部工具條。

註：在這些容器中你可以添加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。

data-role="navbar"//導覽列是由一組水平排列的連結組成，通常包含在頭部或尾部內。預設情況下，導覽列中的連結將自動變成按鈕（不需要 data-role="button"）。

使用 data-role="navbar" 屬性來定義導覽列.

data-role="button" 在 jQuery Mobile 中，按鈕會自動樣式化，讓它們在行動裝置上更具吸引力和可用性。我們推薦您使用帶有 data-role="button" 的 <a> 元素在頁面間進行連結，使用 <input> 或 <button> 元素進行表單提交。3種方法建立按鈕:

1.<input type="button" value="按鈕">

2.<button >按鈕</button>

3.<a href="#" data-role="button">按鈕</a>（或者<a href="#" class="ui-btn"></a>）

data-role="controlgroup"

jQuery Mobile 提供了一個簡單的方法來將按鈕組合在一起。

請把 data-role="controlgroup" 屬性和 data-type="horizontal"(水平放置)，data-type="vertical"（垂直放置按鈕） 一起使用來規定是否水平或垂直組合按鈕：

data-role="fieldcontain" 如需讓標籤和表單元素看起來更適應寬屏，請用帶有 data-role="fieldcontain" 屬性的 <div> 或 <fieldset> 元素包圍 label/form 元素：

 

其他data-*屬性：

 

Jquery Mobile學習總結

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More