HTML5-jQueryMobile 按鈕Icon組件

 

代碼以下：

    <a href="#home" data-role="button" data-icon="home">主頁 home</a>
    <a href="#home" data-role="button" data-icon="arrow-l"> 左箭頭 arrow-l</a>
    <a href="#home" data-role="button" data-icon="arrow-r"> 右箭頭 arrow-r</a>
    <a href="#home" data-role="button" data-icon="arrow-u"> 上箭頭 arrow-u</a>
    <a href="#home" data-role="button" data-icon="arrow-d"> 下箭頭 arrow-d</a>
    <a href="#home" data-role="button" data-icon="delete"> 刪除 delete</a>
    <a href="#home" data-role="button" data-icon="plus"> 加號+ plus</a>
    <a href="#home" data-role="button" data-icon="minus"> 減號- minus</a>
    <a href="#home" data-role="button" data-icon="check"> 對號 check</a>
    <a href="#home" data-role="button" data-icon="gear"> 鋸齒 gear</a>
    <a href="#home" data-role="button" data-icon="refresh"> 刷新 refresh</a>
    <a href="#home" data-role="button" data-icon="forward"> 前進 forward</a>
    <a href="#home" data-role="button" data-icon="back"> 返回 back</a>
    <a href="#home" data-role="button" data-icon="grid"> 網格 grid</a>
    <a href="#home" data-role="button" data-icon="star"> 星星 star</a>
    <a href="#home" data-role="button" data-icon="alert"> 提示 alert</a>
    <a href="#home" data-role="button" data-icon="info"> 信息 info</a>
    <a href="#home" data-role="button" data-icon="search"> 查找 search</a>

　圖標位置：data-iconpos:四種值 left  right  top  bottom

   圖標按鈕：data-iconpos:notext    只有圖標沒有文字

   具備內聯：data-inline="true"

　分組按鈕：data-role="controlgroup"

　水平排列：data-type="horizontal"

 

 

PS:在我這個階段對應如何用jQuery Mobile和腫麼用合適尚未了解，只是看到以爲很好玩，很省事，練着玩~