top
Loading...

jQuery Mobile 按鈕圖標

jQuery Mobile 按鈕圖標

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



添加圖標到 jQuery Mobile 按鈕

我們可以使用 ui-icon 類將圖標添加到按鈕上，併可以使用指定類來設置按鈕位置。

<a href="#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="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">頂部</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">右側</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">左側</a>

嘗試一下 »

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

只顯示圖標

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

實例：

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">搜索</a>

嘗試一下 »

移除圓圈

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

實例

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">使用圓圈 (默認)</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">去掉圓圈</a>

嘗試一下 »

黑色、白色按鈕

默認情況下，所有圖標都是白色的。 如果需要改變圖標顏色為黑色，可以在元素添加 "ui-alt-icon"：

實例

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">白色</a>
<a href="#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" 類的實例。

北斗有巢氏 有巢氏北斗