jquery mobile -role

jquery mobile -role - cc_jony - 博客園

jquery mobile -role

 

data-page 頁面

data-header 頁面的頭部

data-content 頁面的內容

data-footer 頁面的頁腳

data-navbar 定義一個導航條，通常位於header中

data-button 渲染爲一個可視化的按鈕

data-controlgroup  渲染一個組件

data-collapsible-set 一組可摺疊的內容面板

data-filedcontain  用於表單-域的容器

data-listview 由多項內容組成的列表

data-dialog 對話頁面

slider 用於布爾值的可視化滑塊

data-nojs 在兼容jquery mobile的瀏覽器上會被隱藏的元素

1.jquery mobile的首頁不能增長後退按鈕，http://stackoverflow.com/questions/13662696/data-add-back-btn-true-doesnt-work

2.跳轉頁面後js失效多是沒有添加下面的某一項：一：data-rel="external"  二：target="_blank"  三：data-ajax=「fasle」

3.添加logo：在header中，在h1中使用img標籤比較好<h1><img src=""/></h1>

4.導航欄(navbar) 導航欄只是一個容器，一般爲一個div元素，內容爲一個包含各個導航連接的無序列表。導航欄上被選中的元素用ui-btn-active標識（class="ui-btn-active"）。使用固定頁腳的導航欄時，要在選中項上加上兩個類：class="ui-btn-active ui-state-persist".

5.可摺疊內容,：<div data-role="collapsible" data-collapsed="false"><h2></h2><p></p></div>打開摺疊塊的內容； <div data-role="collapsible" data-collapsed="true">是收縮摺疊區的內容。在摺疊容器中沒有定義hX元素，則內容將處於打開狀態且不能收起，若是定義多個hX元素，則第一個會被當作標題，其餘的將被渲染爲內部的內容。

6.可摺疊內容也可嵌套，不過最好不要超過兩級的嵌套。

 <div data-role="collapsible" data-collapsed="true">
                    <h2> 一級嵌套</h2>
                    <div data-role="collapsible">
                        <h3>二級嵌套 </h3>
                    <p>hsajdoajdpajfapjspjadfpasjfpasjfjsaiojfsalshalsjlalsjf ajajsf;sjaf ajsfjafls
                    </p>
                    </div>
                </div>

7.手風琴部件， <div data-role="collapsible-set">放一些可摺疊的標題和內容</div> 當打開其中一個摺疊項時，其它摺疊項將關閉。

8.類ui-grid-a表示兩列，ui-grid-b表示三列，ui-grid-c表示四列，ui-grid-d表示五列。用來佈局網格，採用平鋪排版。

9.按鈕，1：使用button元素，2：使用會被渲染爲按鈕的input元素，包括type="button"，type="submit",type="reset" 以及type="image" ,3:任何帶有data-role="button"的a元素。給id=btn的標籤添加跳轉屬性$("#btn").attr('href', 'http://www.baidu.com/');<a href="" id="btn" data-role="button" data-inline="true"> <img src="../img/1.jpg" alt="Alternate Text" /></a>

<a href="http://www.baidu.com/" onclick="location='http://www.google.cn/';alert(location.href);">去百度</a> 
<a href="#" onclick="location='http://www.google.com.hk/';alert(location.href);">去谷歌</a>

10.內聯按鈕，data-inline="true" 

11.分組按鈕

12.data-role="list-divider"  和  data-role="listview"聯合起來一塊兒用是用一行區分不一樣的列表