Latest web development tutorials

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>

嘗試一下»

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

只顯示圖標

如果你只想顯示圖標,可以使用"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" 類的實例。