# button、navbar、POPUP ###### tags: `jQuery Mobile` `按鈕` `navbar` ## 按鈕 寫法 * 按鈕有以下四種寫法: ```htmlmixed= <a href="#" data-role="button">Button 1</a> (最常使用!) <a href="#" class="ui-btn">Button 1</a>(新版!) <button class="ui-btn">Button 2</button> <input type="button" value="Button 3" > ``` * class按鈕排列:**inline** (會隨文字長短變動按鈕大小) ```htmlmixed= <a href="#" class="ui-btn ui-btn-inline">Button 1</a> <a href="#" class="ui-btn ui-btn-inline">Button 2</a> <a href="#" class="ui-btn ui-btn-inline">Button 3</a> ``` >顯示如下: ![](https://i.imgur.com/ITMTYsj.png) * class按鈕排列:**grid** (固定大小的按鈕) * grid-a分二格；grid-b分三格；grdi-c分四格；grdi-d分五格 * ui-block-a表示第一個按鈕；ui-block-b表示第二個按鈕 ```htmlmixed= <div class="ui-grid-b"> <div class="ui-block-a"><a href="#"class="ui-btn">Button 1</a></div> <div class="ui-block-b"><a href="#"class="ui-btn">Button 2</a></div> <div class="ui-block-c"><a href="#"class="ui-btn">Button 3</a></div> </div> ``` ==練習:繞圈圈的按鈕== ```htmlmixed= <body> <!-- 繞圈圈的按鈕 --> <h2>繞圈圈的按鈕</h2> <div class="ui-grid-c"> <div class="ui-block-a"><a href="#" data-role="button" data-theme="b">1</a></div> <div class="ui-block-b"><a href="#" data-role="button" data-theme="b">2</a></div> <div class="ui-block-c"><a href="#" data-role="button" data-theme="b">3</a></div> <div class="ui-block-d"><a href="#" data-role="button" data-theme="b">4</a></div> <div class="ui-block-a"><a href="#" data-role="button" data-theme="b">12</a></div><div class="ui-block-b"></div> <div class="ui-block-c"></div> <div class="ui-block-d"><a href="#" data-role="button" data-theme="b">5</a></div> <div class="ui-block-a"><a href="#" data-role="button" data-theme="b">11</a></div> <div class="ui-block-b"></div> <div class="ui-block-c"></div> <div class="ui-block-d"><a href="#" data-role="button" data-theme="b">6</a></div> <div class="ui-block-a"><a href="#" data-role="button" data-theme="b">10</a></div> <div class="ui-block-b"><a href="#" data-role="button" data-theme="b">9</a></div> <div class="ui-block-c"><a href="#" data-role="button" data-theme="b">8</a></div> <div class="ui-block-d"><a href="#" data-role="button" data-theme="b">7</a></div> </div> </body> ``` >顯示如下: >![](https://i.imgur.com/LABcV8M.png) --- ## 群組按鈕 controlgroup * 垂直(預設) &lt;div data-role="controlgroup"&gt; * 水平 &lt;div data-role="controlgroup" data-type="horizontal"&gt; ==練習:建立一組垂直排列和一組水平排列按鈕列== ```htmlmixed= <body> <!-- 垂直群組按鈕 --> <div data-role="controlgroup"> <a href="#" data-role="button" data-theme="b">垂直群組按鈕</a> <a href="#" data-role="button" data-theme="b">button</a> <a href="#" data-role="button" data-theme="b">button</a> </div> <!-- 水平群組按鈕 --> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-theme="b">水平</a> <a href="#" data-role="button" data-theme="b">群組</a> <a href="#" data-role="button" data-theme="b">按鈕</a> </div> </body> ``` 顯示如下: >![](https://i.imgur.com/zPjo6Xz.png) --- ## disabled(停用)售完按鈕 ```htmlmixed= <!-- disabled Button --> <a href="#" data-role="button" class="ui-state-disabled">購買(已售完)</a> <a href="#" class="ui-btn ui-state-disabled">購買(已售完)</a> ``` 顯示如下: >![](https://i.imgur.com/q0B2vTS.png) --- ## Mini Button ```htmlmixed= <!-- mini button --> <a href="#" class="ui-btn ui-mini">mini button</a> <a href="#" class="ui-btn ui-mini">小按鈕</a> ``` 顯示如下: >![](https://i.imgur.com/xGy2xsj.png) --- * #### header如果有兩個按鈕，預設第一個左邊，第二個右邊 要單獨一個按鈕放右邊語法(跟Button放在一起): ```htmlmixed= <div data-role="button" class="ui-btn-right"></div> ``` ![](https://i.imgur.com/3qOUTuo.png) --- #### Header頁首文字改圖片 直接在header 加入img語法 ```htmlmixed= <div data-role="header" data-theme="b"> <img src="image/logo.png" alt="logo"> </div> ``` 顯示如下: ![](https://i.imgur.com/756poZC.png) --- #### footer加入按鈕 (按鈕大小會隨文字長短變化) * ==語法: &lt;div data-role="button" class="ui-bar"&gt;== ```htmlmixed= <div data-role="footer" data-position="fixed" data-theme="b"> <div data-role="button" class="ui-bar"> <a href="#">buttom</a> <a href="#">buttom</a> <a href="#">buttom</a> <a href="#">buttom</a> </div> ``` ![](https://i.imgur.com/B9QLpQc.png) --- ## 導覽列 navbar * 很常用，固定寬高度 * ==語法: &lt;div data-role="navbar"&gt;== * 一行最多5個按鈕，超過會換行 ```htmlmixed= <div data-role="footer" data-position="fixed" data-theme="b"> <div data-role="navbar"> <ul> <li><a href="#">選項一</a></li> <li><a href="#">選項二</a></li> <li><a href="#">選項三</a></li> </ul> </div> </div> ``` * ==可使用 data-grid=" " 分隔排版(控制一行多少按鈕)== * a=2格，b=3格，c=4格，d=5格 ```htmlmixed= <div data-role="navbar" data-grid="d"> <ul> <li><a href="#">選項一</a></li> <li><a href="#">選項二</a></li> <li><a href="#">選項三</a></li> <li><a href="#">選項4</a></li> <li><a href="#">選項5</a></li> </ul> </div> ``` 顯示如下: ![](https://i.imgur.com/wLIdDmP.png) --- #### 控制icon在導覽列按鈕的位置 * ==語法:&lt;div data-iconpos=" "&gt;== ```htmlmixed= <div data-role="navbar" data-grid="b" data-iconpos="left"> <ul> <li><a href="#" data-icon="bird">天空城</a></li> <li><a href="#" data-icon="earlybird" class="ui-btn-active">地下城</a></li> <li><a href="#" data-icon="hamster">首都</a></li> </ul> </div> ``` 範例在icon在左側，顯示如下: ![](https://i.imgur.com/G4QgpQg.png) --- ### ui-btn-active提醒USER現在在哪一頁的按鈕(按鈕高亮) * ==語法:class="ui-btn-active"== ```htmlmixed= <div data-role="navbar"> <a href="#" data-icon="earlybird" class="ui-btn-active">地下城</a> </div> ``` 顯示如下: ![](https://i.imgur.com/Qpk5aCx.png) --- ### 更改成自訂按鈕圖案 * ==CSS語法:.ui-icon-自訂名稱:after{ background-image: url("圖檔位置"); 再用HTML 的a href呼叫== ```htmlmixed= <style> .ui-icon-bird{ background-image: url("image/bird.png"); } .ui-icon-earlybird:after{ background-image: url("image/earlybirds-brands.svg"); } .ui-icon-hamster:after{ background-image: url(image/hamster.png); } </style> <body> <div data-role="page" id="home"> <div data-role="header" data-theme="b"> <h1><img src="image/logo.png" alt="" width="50%"></h1> <a href="#home" data-icon="home">首頁</a> <!-- navbar --> <div data-role="navbar" data-grid="b" data-iconpos="left"> <ul> <li><a href="#" data-icon="bird">天空城</a></li> <li><a href="#" data-icon="earlybird" class="ui-btn-active">地下城</a></li> <li><a href="#" data-icon="hamster">首都</a></li> </ul> </div> </div> <!-- end home --> </body> ``` ![](https://i.imgur.com/G4QgpQg.png) --- ### 小視窗 dialog * 看不到方框後面的內容 * ==語法:&lt;a href="#" data-rel="dialog"&gt; &lt;/a&gt;== ```htmlmixed= <a href="#person" data-icon="star" data-rel="dialog">人物屬性</a> ``` 顯示如下: ![](https://i.imgur.com/sl6VKJh.png) ### Popup 對話方塊(必須放在同一個page裡面) * ==POPUP效果== 小技巧:a對應div，用id呼叫 看的到方框後的內容，可以鎖定只用X關閉視窗 ```htmlmixed= <!-- POPUP效果 --> <a href="#pop01" data-role="button" data-theme="b" data-rel="popup" data-position-to="window">POPUP 功能</a> <div data-role="popup" id="pop01" data-dismissible="false"> <a href="#" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-rel="back">close</a> <img src="image/animals-02.jpg" width="100%" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quo error dignissimos ut laborum aperiam quasi, esse, vero quaerat atque enim qui quibusdam ullam nisi. Ullam perferendis, culpa delectus quos.</p> </div> ``` 效果如下: ![](https://i.imgur.com/guklsr1.png)