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

樣式鏈接按鈕

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

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

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

迷你版 data-mini="true"

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

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

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

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

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

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

圖標樣式列表

jQuery Mobile 自帶很多按鈕小圖標，如下圖所示：

左箭頭：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"
前進：data-icon="Forward"
后退：data-icon="Back"
網(wǎng)格：data-icon="Grid"
五角：data-icon="Star"
警告：data-icon="Alert"
信息：data-icon="info"
首頁：data-icon="home"
搜索：data-icon="Search"

圖標定位 data-iconpos

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

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

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

你也可以創(chuàng)建一個圖標按鈕，設置 data-iconpos="notext"。按鈕插件將隱藏的文字在屏幕上，但把它作為給屏幕閱讀器和設備支持工具提示上下文鏈接標題屬性。例如，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)生更緊湊的按鈕

自定義圖標 data-icon="自定義值"

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

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

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

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

最新評論