# btn-confirm
---
在任何需要點擊彈出警告框的按鈕(或者任何dom元素)上,只需在class 中加上 `btn-confirm`即可。
```html
<a class="btn btn-danger btn-confirm" data-msg="我只是試試">Click Me</a>
```
![confirm1]
支持的屬性列表
屬性 | 意義
---|---
`data-msg`| 提示內容 必填
`data-title` | 提示標題
`data-icon` | 默認為3 ,layer數值
`data-btn-ok` | `data-btn-ok="確定"` 按鈕文字
`data-btn-cancel` | "確定" 按鈕文字
`data-on-ok` | 點擊取消按鈕函數 特殊情況,tag.a 為執行作為a標簽繼續
`data-on-cancel` | `data-on-cancel="fun"` 點擊取消按鈕函數 特殊情況,tag.a 為執行作為a標簽繼續
`data-intop` | 是否在最頂端打開,默認在本窗口打開
- 其中 `data-on-ok` 為點擊確定按鈕后執行的事情。
- 其中 `data-on-cancel` 為點擊取消按鈕后執行的事情。
```html
<script>
function fun_ok() {
console.log(" data-on-ok fun_ok");
}
function fun_cancel() {
console.log(" data-on-cancel fun_cancel");
}
</script>
<a class="btn btn-danger btn-confirm"
data-msg="我只是試試"
data-title="自定義標題"
data-on-ok="fun_ok"
data-on-cancel="fun_cancel"
data-btn-ok="確定嗎?"
data-btn-cancel="取消吧"
>Click Me 1</a>
```
效果為
![confirm2]
點擊`確認`按鈕后,控制臺輸出
```javascript
data-on-ok fun_ok
```
點擊`取消`按鈕后,控制臺輸出
```javascript
data-on-cancel fun_cancel
```
如果(常用)`data-on-ok="tag.a"` 或者 `data-on-cancel="tag.a"`
則點擊(確定/取消)按鈕后將按照A標簽來處理,可以跳轉到某一個頁面,打開dialog,在tab標簽中打開,或者用ajax請求數據
> 以下為點擊`確定`按鈕舉例,`取消`按鈕方法一樣。
1、當點擊按鈕后,直接訪問跳轉至某百度
```html
<a class="btn btn-danger btn-confirm" data-msg="確定要打開嗎?"
data-title="自定義標題" data-on-ok="tag.a" href="http://www.baidu.com">Click Me</a>
```
2、當點擊按鈕后,用彈框的方式打開百度(增加`data-dialog="1"`)
```html
<a class="btn btn-info btn-confirm" data-msg="確定要打開嗎?"
data-on-ok="tag.a" href="http://www.baidu.com"
data-dialog="1" title="百度" data-area="80%,80%">Click Me to dialog </a>
```
![alert3]
3、當點擊按鈕后,在框架頭部tab欄中打開百度(增加`data-addtab="1"`)
```html
<a class="btn btn-danger btn-confirm" data-msg="確定要打開嗎?"
data-on-ok="tag.a" href="http://www.baidu.com" data-addtab="1">Click Me to tab</a>
```
![alert4]
4、當點擊按鈕后,用`ajax`的方式去請求數據
```html
<a class="btn btn-danger btn-confirm" data-msg="確定要操作嗎?"
data-on-ok="tag.a" href="http://path/to/api" data-ajax="1">Click Me to tab</a>
```
5、更多請參考`layer` 或 `tag-a` 相關章節
6、 如果 `btn-confirm` 所在的標簽不是A標簽,只需把 `href` 改為 `data-url` 即可
```
<button class="btn btn-danger btn-confirm"
data-msg="確定要打開嗎?"
data-on-ok="tag.a"
data-url="http://www.baidu.com"
data-addtab="1">Click Me to tab</button>
```
7、 `data-intop=1` 屬性設置后,將會在整個框架頁面彈出提示框(全屏彈出),而不是默認的在右側的頁面內彈出。
```html
<a class="btn btn-danger btn-confirm" data-intop="1" data-msg="我只是試試">Click Me to top window</a>
```
對比如下
在頭部彈出的(全屏彈出)
![confirm3]
在局部彈出的
![confirm1]
[confirm1]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/confirm1.png
[confirm2]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/confirm2.png
[alert3]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/alert3.png
[alert4]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/alert4.png
[alert5]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/alert5.png
[confirm3]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/confirm3.png
- 簡介/安裝
- 快速搭建一個用戶中心
- Js代碼寫在哪里
- 環境變量Args
- 前臺組件
- Dialog方式打開頁面
- Addtab方式打開頁面
- Alert提醒框
- Confirm確認框
- Prompt輸入框
- 表單Form
- 列表Table/list
- 基礎Table
- 控制Table
- 搜索Table
- 城市選擇city-picker
- 文件上傳組件
- 基礎版本
- 簡單版本
- 更多實用組件
- 后臺
- 實現方式綜述
- 命令管理類JsCmd
- 命令
- Alert命令
- Url命令
- Toast命令
- JsEval命令
- Close命令
- Refresh命令
- CloseAndRefresh命令
- 常用命令的簡化
- 文件上傳
- 后臺基礎
- 后臺進階
- 左側導航badge配置