jquery mobile--按鈕

標籤：get   inline   tar   垂直   date   ade   blog   com   foo   

建立按鈕

<div data-role="page">    <div data-role="header">        <h1>標題</h1>    </div>    <div data-role="main" class="ui-content">        <a data-role="button">按鈕</a>        <button>按鈕</button>        <input value="按鈕" type="button">    </div>    <div data-role="footer">        <h5>註腳</h5>    </div></div>

 

在jquery mobile中，<button>預設是塊元素（date-role="button"也是）

 

內聯按鈕

<a data-role="button" data-inline="true">按鈕</a><a data-role="button" data-inline="true">按鈕</a>

 

組合按鈕

水平

<div data-role="main" class="ui-content">    <div data-role="controlgroup" data-type="horizontal">    　　<a data-role="button">按鈕</a>    　　<a data-role="button">按鈕</a>    　　<a data-role="button">按鈕</a>
　　</div></div>

 

垂直

<div data-role="main" class="ui-content">    <div data-role="controlgroup" data-type="vertical">    　　<a data-role="button">按鈕</a>    　　<a data-role="button">按鈕</a>    　　<a data-role="button">按鈕</a>
　　</div></div>

 

組合按鈕預設為垂直

 

返回按鈕

data-rel="back"

添加了這個屬性，會忽略href錨(href="#")

data-rel有記憶的特點，無論是從哪個頁面到當前頁面的，只要返回，就會回到上個頁面（如果是對話方塊頁面，點擊叉叉，也是這樣的特性）

 

 

按鈕樣式

參考：jQuery Mobile CSS 類參考手冊

 

TIP：如果用<a>產生按鈕，似乎可以完全用內建class來控制

 

~END

 

jquery mobile--按鈕