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>
<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":
移除圓圈
默認情況下,所有的圖標都有一個灰色的圓圈。 如果你不需要它,可以在元素中使用"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>
<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>
<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" 類的實例。