創(chuàng)建按鈕 data-role=button
給HTML元素添加 data-role="button" 屬性。jQuery Moble就會(huì)給此元素增強(qiáng)為按鈕樣式。 Jquery Mobile框架包含了一組最常用的移動(dòng)應(yīng)用程序所需的圖標(biāo)，為了減少下載的大小，Jquery Mobile包含的是的白色的圖標(biāo)sprite圖片，并自動(dòng)在圖標(biāo)后添加一個(gè)半透明的黑圈以確保在任何背景色下圖片都能夠清晰顯示。

樣式鏈接按鈕

在一個(gè)網(wǎng)頁(yè)的主要內(nèi)容塊，你可以樣式的任何錨鏈接為按鈕添加 data-role="button" 屬性。該框架將加強(qiáng)與標(biāo)記和類(lèi)的鏈接方式鏈接按鈕。例如，這個(gè)標(biāo)記：

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

注：風(fēng)格像按鈕鏈接都相同的視覺(jué)選擇的按鈕下面的真正形成，但也有一些重要的差異?；阪溄拥陌粹o，按鈕是插件，不僅使用基本的button標(biāo)記插件生成按鈕的風(fēng)格，所以窗體按鈕方法（啟用，禁用，刷新）不支持。如果你需要禁用基于鏈接的按鈕（或元素），它可能申請(qǐng)傷殘等級(jí)的UI殘疾人自己用java script實(shí)現(xiàn)相同的效果。

迷你版 data-mini="true"

一個(gè)更緊湊的版本，在工具欄和緊空間是有用的，添加 data-mini="true" 屬性的按鈕來(lái)創(chuàng)建一個(gè)迷你版。

<a href="index.html" data-role="button" data-mini="true">Link button</a>

給按鈕添加圖標(biāo) data-icon
jQuery Mobile框架包括一組選定的圖標(biāo)移動(dòng)應(yīng)用程序通常需要。盡量減少下載大小，jQuery Mobile包含一個(gè)單一的白色圖標(biāo)的精靈，和自動(dòng)添加一個(gè)半透明的黑圈背后的圖標(biāo)來(lái)確保它有任何背景顏色對(duì)比度好。

一個(gè)圖標(biāo)，可以通過(guò)添加一個(gè)對(duì)錨桿指定要顯示的圖標(biāo)數(shù)據(jù)圖標(biāo)屬性添加到一個(gè)按鈕。例如，下面的標(biāo)記：

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

迷你版 添加 data-mini="true" 屬性

圖標(biāo)樣式列表

jQuery Mobile 自帶很多按鈕小圖標(biāo)，如下圖所示：

左箭頭：data-icon="arrow-l"
右箭頭：data-icon="arrow-r"
上箭頭：data-icon="arrow-u"
下箭頭：data-icon="arrow-d"
刪除：data-icon="delete"
添加：data-icon="Plus"
減少：data-icon="minus"
檢查：data-icon="Check"
齒輪：data-icon="gear"
前進(jìn)：data-icon="Forward"
后退：data-icon="Back"
網(wǎng)格：data-icon="Grid"
五角：data-icon="Star"
警告：data-icon="Alert"
信息：data-icon="info"
首頁(yè)：data-icon="home"
搜索：data-icon="Search"

圖標(biāo)定位 data-iconpos

默認(rèn)情況下，所有的圖標(biāo)都放在按鈕的按鈕文本左。此默認(rèn)可以覆蓋使用 data-iconpos 屬性來(lái)設(shè)置圖標(biāo)的右上方（top）、底部（bottom）、右側(cè)（right）、左側(cè)（left）的文本。例如，標(biāo)記：

<font color=#0000ff><a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

隱藏圖片上的文字 data-iconpos="notext"

你也可以創(chuàng)建一個(gè)圖標(biāo)按鈕，設(shè)置 data-iconpos="notext"。按鈕插件將隱藏的文字在屏幕上，但把它作為給屏幕閱讀器和設(shè)備支持工具提示上下文鏈接標(biāo)題屬性。例如，data-iconpos="right"，data-iconpos="notext"：

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

迷你和內(nèi)聯(lián)

迷你和內(nèi)聯(lián)屬性可以被添加到產(chǎn)生更緊湊的按鈕

自定義圖標(biāo) data-icon="自定義值"

使用自定義圖標(biāo)，需要指定 data-icon 值。Jquery Mobile的button插件會(huì)將生成一個(gè)CSS類(lèi)，它的前綴是ui-icon- ，后面的是data-icon值。假如：有一個(gè)按鈕 data-icon 屬性的值為 myapp-email，即 data-icon=“ myapp-email”。那么生產(chǎn)的CSS類(lèi)是：ui-icon-myapp-email。

然后你可以在你的樣式表寫(xiě)一個(gè)CSS規(guī)則來(lái)定義 ui-icon-myapp-email。然后在css中指定這個(gè)類(lèi)的背景圖片地址。為了保持與其他圖標(biāo)的視覺(jué)上的一致性，請(qǐng)創(chuàng)建一個(gè)白色18x18像素的PNG-8圖標(biāo)，并且保存為Alpha透明度。

.ui-icon-myapp-email {
 background-image: url( "app-icon-email.png" );
}

這將創(chuàng)建標(biāo)準(zhǔn)分辨率的圖標(biāo)，但許多設(shè)備都有非常高的分辨率的顯示器，就像iPhone 4的視網(wǎng)膜顯示器。添加一個(gè)高清圖標(biāo)，創(chuàng)建一個(gè)圖標(biāo)，36X36像素（18像素大小完全相同的兩倍），并添加第二個(gè)規(guī)則使用WebKit分鐘裝置像素比例：2。媒體查詢(xún)到目標(biāo)的規(guī)則只有以高分辨率顯示器。指定背景圖片高清圖標(biāo)文件和設(shè)置背景像素大小18x18將安裝36個(gè)像素圖標(biāo)到同一個(gè)18像素的空間。傳媒查詢(xún)塊可以用多個(gè)圖標(biāo)規(guī)則：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
 .ui-icon-myapp-email {
  background-image: url( "app-icon-email-highres.png" );
  background-size: 18px 18px;
 }
 ...more HD icon rules go here...
}