jQuery Mobile 按鈕表徵圖

標籤：style   blog   class   code   java   ext   

jQuery Mobile 提供的一套表徵圖可令您的按鈕更具吸引力。

1、為 jQuery Mobile 按鈕添加表徵圖

如需向您的按鈕添加表徵圖，請使用 data-icon 屬性：（您也可以在 <button> 或 <input> 元素中使用 data-icon 屬性。）

 

<div data-role="page" id="pageone">        <div data-role="content">            <a href="#" data-role="button" data-icon="search">搜尋</a>        </div></div> 

 

 

 

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

 jQuery Mobile 按鈕表徵圖的完整資訊，訪問 jQuery Mobile 表徵圖參考手冊

 

 

2、定位元影像標的位置

您也能夠規定表徵圖被放置的位置：上、右、下或左。使用 data-iconpos 屬性來規定位置：（預設地，所有按鈕中的表徵圖靠左放置。）

<div data-role="page" id="pageone">        <div data-role="content">            <p>定位元影像標：</p>            <a href="#link" data-role="button" data-icon="search" data-iconpos="top" data-inline="true">Top</a>            <a href="#link" data-role="button" data-icon="search" data-iconpos="right">Right</a>            <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">Bottom</a>            <a href="#link" data-role="button" data-icon="search" data-iconpos="left" data-inline="true">Left</a>        </div></div> 

 

 

 

3、只顯示表徵圖

如果只需顯示表徵圖，請將 data-iconpos 設定為 "notext"：

<div data-role="page" id="pageone">        <div data-role="content">            <p>只有表徵圖沒有文本的按鈕。</p>            <p><b>注釋：</b>把滑鼠指標移動到表徵圖上會看到提示文本：</p>            <a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜尋</a>        </div></div>