Dialog

调用方式

dialog支持三种不同的调用方式，一般使用$.dialog(options)即可，不同的方式配置options后都会直接toggle弹窗。

//最简单的方式，组件会根据默认模板输出dom结构
$.dialog(options);

//通过传入模板字符串的方式
$('<div><%=title%><</div>').dialog(options);

//通过传入css选择器的方式
$("#id").dialog(options);

配置说明

name type default description
title string '' 浮层标题，用来填充模板
content string '' 浮层内容，用来填充模板
button array ['确认'] 浮层底部按钮的文字数组，建议不超过两个，与callback的index相互对应
select int 0 需要高亮的按钮索引（与button相互对应），高亮的按钮会添加类名select
allowScroll bool false 弹窗弹出后是否允许页面滚动
callback funtion function(){} 点击底部按钮后的回调函数，可以通过函数的第一个参数来获取点击的按钮索引（与button对应）
animation string 'pop' 弹窗弹出的动画类名，会自动为弹窗外层加上该类名
end function function(){} 弹窗弹出后或者消失后的回调，可以通过函数第一个参数来获取状态（'show'为弹出后，'hide'为消失后）

模板规则

  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>