首頁 > web前端 > js教程 > 淺析jQuery行動開發中內嵌按鈕和分組按鈕的編寫_jquery

淺析jQuery行動開發中內嵌按鈕和分組按鈕的編寫_jquery

WBOY
發布: 2016-05-16 15:27:29
原創
1495 人瀏覽過

內嵌按鈕 data-inline=true
預設情況下,在體內含量的所有按鈕都稱為塊級元素,所以他們填補了螢幕的寬度。

但是,如果你想讓按鈕外觀緊湊,寬度只符合裡面的文字和icon,那就給按鈕加上data-inline="true"的屬性。

2015124160046088.jpg (818×88)

如果你有多個按鈕,你應該肩並肩地坐在同一行,將data-inline="true"的屬性為每個按鈕。這將風格的按鈕將其內容的寬度和浮動按鈕讓他們坐在同一條直線上。

<a href="index.html" data-role="button" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>
登入後複製

2015124160112596.jpg (822×91)

新增 data-mini="true" 對內嵌按鈕建立一個更緊湊的版本:

2015124160130770.jpg (824×60)

<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</a>
登入後複製

2015124160156830.jpg (823×86)

分組按鈕 data-role=controlgroup
有時候,你想把一組按鈕放進一個單獨的容器內,使他們看起來想一個獨立的導航部件。你可以把一組按鈕包裹在一個容器內,然後給該容器添加data-role="controlgroup" 屬性,Jquery Mobile會創建一個垂直的按鈕組,刪除掉按鈕間的margin和陰影,然後只在第一個按鈕和最後一個按鈕產生圓角,使他們看起來像是一組按鈕。

<div data-role="controlgroup">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>
登入後複製

2015124160223090.jpg (821×146)

水平排列 data-type="horizo​​ntal"

預設情況下,群組按鈕表現為垂直列表,如果給容器添加data-type="horizo​​ntal" 的屬性,則可以轉換為水平按鈕的列表,按鈕會橫向一個挨著一個地水平排列,並設置只有足夠大以適應內容的寬度。 ((所以要注意橫排狀況下按鈕不要太多,按鈕的字也不要太多)

<div data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>
登入後複製

2015124160427751.jpg (829×71)

迷你版 data-mini="true"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>
登入後複製

2015124160450552.jpg (815×64)

僅圖示 data-iconpos="notext"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>
登入後複製

2015124160513451.jpg (822×55)

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板