参数设置

参数 默认值 类型 描述
type undefined String 对话框类型，如，['成功'，‘失败’,‘异常’]，不同类型模版之间差异于图标，模版绑定类型， 如：
title '' String 对话框标题， 模版绑定对话框标题：..
content '' String 对话框内容， 模版绑定对话框内容：..
timeout 0 Number 适用于['发表成功'，‘网络延时’，'加载中']等提示，但是注意加载中异步问题，参考[腾讯提示-异常提示]
zIndex 10001 Number 对话框层高度，mask设置为 true， mask（阴影层自动 -1）
mask false Boolean 阴影层，依赖 $.mask,$.unmask
opacity 0.5 Number 阴影层透明度，[0,1]
background "#000" String 阴影层颜色
button [] Array 
           button:[{
                        caption: "句柄字段",
                        name:"这里是名字",
                        callback: function() {
                          // 按钮点击回调函数
                        }
                    },
                    {
                        caption: "句柄字段",
                        name:"这里是名字",
                        callback: function() {
                          // 按钮点击回调函数
                        }
                    }       
                ]
close undefined Function close按钮执行事件，相当于button 中的callback: function() {}
ok undefined Function ok按钮执行事，相当于button 中的callback: function() {}
cancel undefined Function cancel按钮执行事件，相当于button 中的callback: function() {}
closeVal undefined String close按钮的名称，相当于button 中的name:"这里是名字"
okVal undefined String ok按钮的名称，相当于button 中的name:"这里是名字"
cancelVal undefined String cancel按钮的名称，相当于button 中的name:"这里是名字"
beforeRender function(){} Function 打开对话框 前调函数
afterClose function(){} Function 关闭对话框 回调函数
afterRender function(){} Function 对话框显示后回调函数，用于比较复杂的对话框，如：绑定事件

样式约定

   data-dialog-btn 属性 用于绑定事件， close,ok,cancel 是常用按钮. 以 ' , ' 等 是 模板字符串.

参考示例

腾讯对话框

html模板 

       <div class="qz_dialog_layer"  id="">
        <div id="dialog_main_1" class="qz_dialog_layer_main qz_dialog_btn_bpadding">
            <div class="qz_dialog_custom custom_left" id="dragdrop_1" style="cursor: move;"></div>
            <div class="qz_dialog_custom custom_top" id="dragdrop_2" style="cursor: move;"></div>
            <div id="dialog_head_1" class="qz_dialog_layer_title" style="cursor: move;">
                <h3 id="dialog_title_1"></h3> 
                <!-- 这里绑定  标题 -->
                <button id="dialog_button_1" title="关闭" data-dialog-btn="close"   class="qz_dialog_btn_close">
                    <span class="none">╳</span>
                </button>
            </div>
            <div id="dialog_content_1" class="qz_dialog_layer_cont" style="height:140px;">
                <div class="qz_dialog_layer_confirm_content" style="width:260px;"> <i class="qz_dialog_layer_icon qz_dialog_layer_icon_notice"></i>
                    <h3></h3>
                    <!-- 这里绑定 内容 -->
                    <div class="qz_dialog_layer_confirm_content_p"></div>
                    <div class="qz_dialog_layer_confirm_content_p"> <i class=""><i></i></i> 
                    </div>
                </div>
            </div>
            <div class="qz_dialog_layer_ft">
                <div class="qz_dialog_layer_other"></div>
                <div class="qz_dialog_layer_op">
                    <a href="javascript:;" title="点击这里确认" data-dialog-btn="ok" class="qz_dialog_layer_btn qz_dialog_layer_sub">
                        <span>是</span>
                    </a>
                    <!-- data-dialog-btn="ok"  用于绑定事件-->
                    <a href="javascript:;" title="点击这里否决" data-dialog-btn="cancel" class="qz_dialog_layer_btn qz_dialog_layer_nor">
                        <span>否</span>
                    </a>
                    <!-- data-dialog-btn="cancel"  用于绑定事件-->
                </div>
            </div>
        </div>
    </div>

腾讯提示

模版调用说明

        $.dialog('#dialog_temp2',{ // dialog_temp2 为 'script'模板
            title:title,
            content:content,
            mask:mask,
            close:function(){
                this.destroy();
            },
            ok:function(){
                this.destroy();
            },
            cancel:function(){ 
                this.destroy();
            }
        })
         $('#dialog_temp2').dialog({ // dialog_temp2 为 'script'模板
            title:title,
            content:content,
            mask:mask,
            close:function(){
                this.destroy();
            },
            ok:function(){
                this.destroy();
            },
            cancel:function(){ 
                this.destroy();
            }
        });
        var templss = '
{{xxx}}
{{xxx}}';
        $.dialog(templss,{ // templss 为 模板字符串
            title:title,
            content:content,
            mask:mask,
            close:function(){
                this.destroy();
            },
            ok:function(){
                this.destroy();
            },
            cancel:function(){ 
                this.destroy();
            }
        })

changelog

  1. ~2013/02/20 : add options afterRender::function
  2. ~2013/03/06 : add options type::function
  3. ~2014/03/15 : add drag::function and reconstruct this.
  4. ~2014/03/22 : add options position,direction