Jquery mobile div經常使用屬性

時間 2019-11-17

標籤 jquery mobile div 經常使用屬性欄目 JQuery 简体版

原文原文鏈接

組件javascript

頁面css

jQuery Mobile 應用了 HTML5 標準的特性，在結構化的頁面中完整的頁面結構分爲 header、html

content、footer 這三個主要區域。java

在 body 中插入內容塊：jquery

<div data-role="page"> 瀏覽器

<div data-role="header">...</div> 框架

<div data-role="content">...</div> ide

<div data-role="footer">...</div> 函數

</div> 工具

data-role="page」表明這個 div 是一個 Page，在一個屏幕中只會顯示一個 page；

header 是標題，content 是內容塊，footer 是頁腳

data-role 參數表：

參數說明

page 頁面容器，其內部的 mobile 元素將會繼承這個容器上所設置的屬性

header 頁面標題容器，這個容器內部能夠包含文字、返回按鈕、功能按鈕等元素

footer 頁面頁腳容器，這個容器內部也能夠包含文字、返回按鈕、功能按鈕等元素

content 頁面內容容器，這是一個很寬容的容器，內部能夠包含標準的 html 元素和jQueryMobile 元素

controlgroup 將幾個元素設置成一組，通常是幾個相同的元素類型

fieldcontain 區域包裹容器，用增長邊距和分割線的方式將容器內的元素和容器外的元素明顯分隔

navbar 功能導航容器，通俗的講就是工具條

listview 列表展現容器，相似手機中聯繫人列表的展現方式

list-divider 列表展現容器的表頭，用來展現一組列表的標題，內部不可包含連接

button 按鈕，將連接和普通按鈕的樣式設置成爲 jQueryMobile 的風格

none 阻止框架對元素進行渲染，使元素以 html 原生的狀態顯示，主要用於 form 元素。

完整的頁面模版：

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Page Title</h1>

</div>

<p>Page content goes here.</p>

</div>

<h4>Page Footer</h4>

</div>

</div>

</body>

</html>

以上是一個完整的頁面結構模版代碼，在使用過程當中能夠根據須要來組合。

頁面動畫：

data-transition 屬性能夠定義頁面切換是的動畫效果。

例如：<a href="index.html" data-transition="pop">I'll pop</a>

data-transition 參數表：

參數說明

slide 從右側向左滑入頁面

slideup 從底部向上滑入

slidedown 從上向下滑入

pop 從中心漸顯展開

fade 漸顯

flip 翻轉

備註：若是想要在目標頁面中顯示後退按鈕，能夠在連接中加入 data-direction="reverse"屬性，這個屬性和原來的 data-back="true"相同，不知道在正式版本中將會保留哪一個屬性。

模態對話框

模態對話框是一種帶有圓角標題欄和關閉按鈕的僞浮動層，用於獨佔事件的應用。任何結構化的頁面均可以用 data-rel="dialog"連接的方式實現模態對話框應用。

例如：<a href="foo.html" data-rel="dialog">Open dialog</a>

這個頁面切換效果一樣可使用標準頁面的 data-transition 參數效果。建議使用"pop"、"slideup" 和"flip"參數以達到更好的效果。

這個模態對話框會默認生成關閉按鈕，用於回到父級頁面。在腳本能力較弱的設備上也能夠添加一個帶有 data-rel="back"的連接來實現關閉按鈕。

針對支持腳本的設備能夠直接使用 href=」#」或者 data-rel="back"來實現關閉。還可使用內置的」close」方法來關閉模態對話框，例如：$('.ui-dialog').dialog('close')。

因爲模態對話框是動態顯示的臨時頁面，因此這個頁面不會被保存在哈希表內，這就意味着咱們講沒法後退到這個頁面，例如你在 A 頁面中點擊一個連接打開 B 對話框,操做完成並關閉對話框,而後跳轉到 C 頁面,這時候你點擊瀏覽器的後退按鈕，這時候將回到 A 頁面，而不是 B 頁面。

工具條

工具條主要用於」header」,」footer」等區域，用來支撐和實現頁面中業務功能的應用。jQuery Mobile 提供了一個相對完整的解決方案。

工具條分爲:標題（header bar）,頁腳（footer bar）和導航（nav bar）這三中應用。

其中標題和頁腳在頁面中有一些不一樣的應用方式，默認工具條是以嵌入（inline）的方式定位的，這種定位方式能夠實現最大限度的兼容性，包括在對腳本和 css 兼容性不佳的設備都有很好的優化。

另外一種是浮動（fixed）定位的方式，也能夠成爲「靜態「定位，這種定位方式可讓工具條始終保持在屏幕的頂部或者底部。並能夠接受點擊事件來顯示/隱藏工具條，已達到最大化利用屏幕空間的目的。

實現方式：在標題和頁腳區域加入 data-position="fixed"屬性。

標題容器

標題容器是頁面頁眉區域的顯示控件，主要用來顯示標題和主要操做的區域。

結構代碼：

<h1>Page Title</h1>

</div>

爲了方便頁面的交互在頁面切換後會在標題容器的左側自動生成一個後退按鈕，這樣能夠簡化咱們的開發複雜程度，可是有些時候咱們會由於應用的需求而不須要這個後退按鈕，能夠

在標題容器上添加 data-backbtn="false"屬性用來阻止後退按鈕的自動建立。

標題容器的左側和右側分別能夠放置一個按鈕，在阻止自動生成的後退按鈕後，咱們就能夠在後退按鈕的位置來自定義按鈕了。

例如：

<a href="index.html" data-icon="delete">Cancel</a>

<h1>Edit Contact</h1>

</div>若是須要自定義默認的後退按鈕中的文本，能夠用data-back-btn-text="previous"屬性來實現，或者經過擴展的方式實現：$.mobile.page.prototype.options.backBtnText = "previous"。

若是你沒有使用標準的結構來建立標題區域，那麼框架將不會自動生成默認的按鈕。

頁腳容器

頁腳容器的結構和標題容器的結構基本相同，只要把 data-role 屬性的參數設置爲」footer」。

例如：

<h4>Footer content</h4>

</div>

與標題容器相比頁腳容器有更多的靈活度，它不會想標題容器同樣只容許放置兩個按鈕，而且也不會默認的把按鈕放置在左右的頂端，頁腳的按鈕默認是從左到右依次排列的，而且何以放置更多的按鈕。

在頁腳容器上只要添加一個 class="ui-bar"就能夠將頁腳變成一個工具條，你能夠不用設置任何的佈局樣式就能夠在其中添加整齊的按鈕。

例如：

<a href="index.html" data-role="button" data-icon="delete">Remove</a>

</div>

若是咱們須要一組連接效果，咱們能夠這樣寫：

<a href="index.html" data-icon="delete">Remove</a>

</div>

技巧：經過使用 data-id 屬性可讓多個頁面使用相同的頁腳。

導航

導航容器是一個能夠每行容納最多 5 個按鈕的按鈕組控件，用一個擁有 data-role="navbar"

屬性的 div 來容納這些按鈕。

例子：

<ul>

</ul>

</div>

</div>

在默認的按鈕上添加 class="ui-btn-active"

若是按鈕的數量超過 5 個，導航容器將會自動以合適的數量分配成多行顯示。

按鈕

你能夠將頁面中的任何一個連接經過 data-role="button"來聲明成爲按鈕的顯示風格。爲了風格統一，框架會在頁面加載時自動將 form 類的按鈕格式化爲 jQuery Mobile 風格的按鈕，不須要添加 data-role 屬性。

框架中包含了一組經常使用的圖標能夠用於按鈕，用 data-icon 屬性中的參數來定義顯示不一樣的圖標效果。

例如：<a href="index.html" data-role="button" data-icon="delete">Delete</a>

data-icon 原生參數列表

除了能夠默認顯示左側的圖標以外，還能夠用 data-iconpos 屬性來定義圖標與文字的位置關係。

data-iconpos 參數列表：

參數效果

right 圖標在文字的右側

top 圖標在文字上面

bottom 圖標在文字下面

data-iconpos="notext"屬性可讓按鈕隱藏文字。

內聯樣式

在框架中默認狀況下按鈕是橫向獨佔根據屏幕寬度橫向自適應的，可是咱們在應用的應用中常常須要在一行中顯示多個按鈕，這時候咱們就須要知道一個新的叫作內聯模式的屬性了

data-inline="true"。

例如：

<a href="index.html" data-role="button">Cancel</a>

</div>

按鈕組

jQuery Mobile 框架能夠將幾個按鈕以組的方式顯示，data-role="controlgroup"用以展現按鈕

間的緊湊關係。例如：

<a href="index.html" data-role="button">Maybe</a>

</div>

若是須要按鈕橫向排列能夠增長 data-type="horizontal"屬性。

表單應用

jQuery Mobile 框架爲原生的 html 表單元素封裝了新的表現形式，對觸屏設備的操做進行了優化。在框架的頁面中會自動將 form 元素渲染成 jQuery Mobile 風格的元素。

form 元素的使用和默認的 html 方式使用相同，能夠一樣使用 Post 和 get 方式提交數據，可是須要注意的是元素的 ID 命名問題，在常規的規範中同一個頁面中是不容許出現相同的 ID命名的，在 jQuery Mobile 中因爲其容許在同一個 DOM 中存在多個頁面，因此建議 form 元素的 ID 命名在整個項目中是惟一的，防止因爲 ID 問題引起的錯誤。

默認狀況下框架會自動渲染在標準頁面中的 form 元素的風格，一旦成功渲染後，這個控件元素將可使用 jQuery 中的函數進行操做。在某些狀況下，咱們須要使用 html 原生的 form 元素，爲了阻止 mobile 框架對該元素的自

動渲染，在框架中咱們在 data-role 屬性中引入了一個控制參數」none」。使用這個屬性參數就會讓該元素以 html 原生的狀態顯示。

例如：

</select>

列表應用

信息列表是開發應用中使用頻率相對比較高的控件，用於數據顯示、導航, 數據列表等。爲了適應不一樣的信息內容，列表的表現形式也多種多樣。

列表的代碼結構是以有序和無序列表來實現的，只要在 ul 或 ol 上聲明 data-role="listview"就可讓框架以列表的方式渲染了，例如：

<li><a href="acura.html">Acura</a></li>

</ul>

若是須要在列表裏添加數據，則須要在數據加載後執行 refresh()方法對列表進行數據更新。

例如：$('ul').listview('refresh');

以上是運用 jQuery Mobile 進行界面構建的基礎規則，後續將完善 Ajax 和動態建立頁面的技術資料。