---
# System prepended metadata

title: button、navbar、POPUP
tags: [jQuery Mobile, 按鈕, navbar]

---

# 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)

