## Dialog
### 調用方式
dialog支持三種不同的調用方式，一般使用$.dialog(options)即可，不同的方式配置options后都會直接toggle彈窗。
~~~
//最簡單的方式，組件會根據默認模板輸出dom結構
$.dialog(options);
//通過傳入模板字符串的方式
$('<div><%=title%><</div>').dialog(options);
//通過傳入css選擇器的方式
$("#id").dialog(options);
~~~
### 配置說明
<table>
<tbody><tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>''</td>
<td>浮層標題，用來填充模板</td>
</tr>
<tr>
<td>content</td>
<td>string</td>
<td>''</td>
<td>浮層內容，用來填充模板</td>
</tr>
<tr>
<td>button</td>
<td>array</td>
<td>['確認']</td>
<td>浮層底部按鈕的文字數組，建議不超過兩個，與callback的index相互對應</td>
</tr>
<tr>
<td>select</td>
<td>int</td>
<td>0</td>
<td>需要高亮的按鈕索引（與button相互對應），高亮的按鈕會添加類名<code>select</code></td>
</tr>
<tr>
<td>allowScroll</td>
<td>bool</td>
<td>false</td>
<td>彈窗彈出后是否允許頁面滾動</td>
</tr>
<tr>
<td>callback</td>
<td>funtion</td>
<td>function(){}</td>
<td>點擊底部按鈕后的回調函數，可以通過函數的第一個參數來獲取點擊的按鈕索引（與button對應）</td>
</tr>
<tr>
<td>animation</td>
<td>string</td>
<td>'pop'</td>
<td>彈窗彈出的動畫類名，會自動為彈窗外層加上該類名</td>
</tr>
<tr>
<td>end</td>
<td>function</td>
<td>function(){}</td>
<td>彈窗彈出后或者消失后的回調，可以通過函數第一個參數來獲取狀態（'show'為彈出后，'hide'為消失后）</td>
</tr>
</tbody></table>
### 模板規則
1. 模板彈出時自動為頂級加上show類名，隱藏時自動去掉show，所以一般需要通過show類名來控制模板的顯示隱藏。
2. 模板約定底部按鈕的標簽必須設置屬性data-role='button'
3. 模板約定需要觸發關閉的按鈕或元素必須設置屬性data-role='dismiss'
4. 建議使用默認模板
### DEMO演示
~~~
<div class="ui-center">
<div class="ui-btn" id="btn1">模板創建彈窗</div>
<div class="ui-btn" id="btn2">DOM創建彈窗</div>
</div>
<div class="ui-dialog">
<div class="ui-dialog-cnt">
<div class="ui-dialog-bd">
<div>
<h4>標題</h4>
<div>內容</div></div>
</div>
<div class="ui-dialog-ft ui-btn-group">
<button type="button" data-role="button" class="select" id="dialogButton<%=i%>">關閉</button>
</div>
</div>
</div>
<script type="text/javascript">
$("#btn1").tap(function(){
var dia=$.dialog({
title:'溫馨提示',
content:'溫馨提示內容',
button:["確認","取消"]
});
dia.on("dialog:action",function(e){
console.log(e.index)
});
dia.on("dialog:hide",function(e){
console.log("dialog hide")
});
})
$("#btn2").tap(function(){
var dia2=$(".ui-dialog").dialog("show");
dia2.on("dialog:action",function(e){
console.log(e.index)
});
})
</script>
~~~
