jQuery Mobile 按鈕圖示

jQuery Mobile 提供了一套讓按鈕看起來更稱心如意的圖示。



新增圖示到 jQuery Mobile 按鈕

我們可以使用 ui-icon 類將圖示新增到按鈕上，並可以使用指定類來設定按鈕位置。

<a href="https://www.itread01.com/jquerymobile/#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

注意： 在其他方式的按鈕上，如列表或表單中的按鈕需要使用 data-icon 屬性。在接下來的章節中我們會具體介紹。

下面我們列出一些 jQuery Mobile 提供的可用圖示：

按鈕類 描述 按鈕 例項
ui-icon-arrow-l 左箭頭 嘗試一下
ui-icon-arrow-r 右箭頭 嘗試一下
ui-icon-info 資訊 嘗試一下
ui-icon-delete 刪除 嘗試一下
ui-icon-back 後退 嘗試一下
ui-icon-audio 揚聲器 嘗試一下
ui-icon-lock 掛鎖 嘗試一下
ui-icon-search 搜尋 嘗試一下
ui-icon-alert 警告 嘗試一下
ui-icon-grid 網格 嘗試一下
ui-icon-home 主頁 嘗試一下

如需檢視所有 jQuery Mobile 按鈕圖示的完整參考手冊，請訪問我們的 jQuery Mobile 圖示參考手冊。

定點陣圖標

您也可以規定圖示定位在按鈕的什麼部位：頂部（top）、右側（right）、底部（bottom）、左側（left）。

請使用 ui-btn-icon 屬性來指定位置：

圖示的位置：

<a href=https://www.itread01.com/jquerymobile/"#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">頂部</a>
<a href=https://www.itread01.com/jquerymobile/"#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">右側</a>
<a href=https://www.itread01.com/jquerymobile/"#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a>
<a href=https://www.itread01.com/jquerymobile/"#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">左側</a>

嘗試一下 ?

Note 如果你未指定按鈕圖片的位置，圖示將不顯示。

只顯示圖示

如果你只想顯示圖示，可以使用 "notext":

例項：

<a href=https://www.itread01.com/jquerymobile/"#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">搜尋</a>

嘗試一下 ?

移除圓圈

預設情況下，所有的圖示都有一個灰色的圓圈。如果你不需要它，可以在元素中使用 "ui-nodisc-icon" 類：

例項

<a href="https://www.itread01.com/jquerymobile/#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">使用圓圈 (預設)</a>
<a href="https://www.itread01.com/jquerymobile/#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">去掉圓圈</a>

嘗試一下 ?

黑色、白色按鈕

預設情況下，所有圖示都是白色的。 如果需要改變圖示顏色為黑色，可以在元素新增 "ui-alt-icon"：

例項

<a href="https://www.itread01.com/jquerymobile/#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">白色</a>
<a href="https://www.itread01.com/jquerymobile/#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">黑色</a>

嘗試一下 ?
例項

更多例項

向容器新增 "ui-nodisc-icon" 類
使用 "ui-nodisc-icon" 類的例項。

向容器新增 "ui-alt-icon" 類
使用 "ui-alt-icon" 類的例項。