快捷導(dǎo)航

淺析jQuery移動(dòng)開(kāi)發(fā)中內(nèi)聯(lián)按鈕和分組按鈕的編寫(xiě)

更新時(shí)間：2015年12月04日 16:06:37 投稿：goldensun

這篇文章主要介紹了jQuery移動(dòng)開(kāi)發(fā)中內(nèi)聯(lián)按鈕和分組按鈕的編寫(xiě)方法,基于jQuery mobile這個(gè)jQuery針對(duì)移動(dòng)開(kāi)發(fā)版的庫(kù),需要的朋友可以參考下

內(nèi)聯(lián)按鈕 data-inline=true
默認(rèn)情況下，在體內(nèi)含量的所有按鈕都稱(chēng)為塊級(jí)元素，所以他們填補(bǔ)了屏幕的寬度。

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

2015124160046088.jpg (818×88)

如果你有多個(gè)按鈕，應(yīng)該肩并肩地坐在同一行，將data-inline="true"的屬性為每個(gè)按鈕。這將風(fēng)格的按鈕將其內(nèi)容的寬度和浮動(dòng)按鈕讓他們坐在同一條直線(xiàn)上。

<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" 對(duì)內(nèi)聯(lián)按鈕創(chuàng)建一個(gè)更緊湊的版本:

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
有時(shí)候，你想把一組按鈕放進(jìn)一個(gè)單獨(dú)的容器內(nèi)，使他們看起來(lái)想一個(gè)獨(dú)立的導(dǎo)航部件。你可以把一組按鈕包裹在一個(gè)容器內(nèi)，然后給該容器添加 data-role="controlgroup" 屬性，Jquery Mobile會(huì)創(chuàng)建一個(gè)垂直的按鈕組，刪除掉按鈕間的margin和陰影，然后只在第一個(gè)按鈕和最后一個(gè)按鈕產(chǎn)生圓角，使他們看起來(lái)是一組按鈕。

<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="horizontal"

默認(rèn)情況下，組按鈕表現(xiàn)為垂直列表，如果給容器添加 data-type="horizontal" 的屬性，則可以轉(zhuǎn)換為水平按鈕的列表，按鈕會(huì)橫向一個(gè)挨著一個(gè)地水平排列，并設(shè)置只有足夠大以適應(yīng)內(nèi)容的寬度。（（所以要注意橫排情況下按鈕不要太多，按鈕的字也不要太多）

<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)

僅圖標(biāo) 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)