自定义对话框（jDialog）

【配置项】jDialog options点击收起

一、接口功能

jDialog的默认配置项，本组件提供的所有对话框，都可以通过修改这些配置项来实现不同的效果。

二、详细配置项

    /**
     * 对话框的默认配置项目
     * @type {Object}
     */
    var defaultOptions = {
        modal           : true,     //是否模态窗口
        title           : null,     //窗口标题
        content         : null,     //内容
        width           : 300,      //对话框默认宽度：300px
        height          : null,     //自适应
        minWidth        : 200,      //窗口最小宽度
        minHeight       : 60,       //窗口最小高度
        maxWidth        : null,     //窗口最大宽度：默认无限大
        maxHeight       : null,     //窗口最大高度：默认无限大
        padding         : '10px',   //内边距，默认10px，可以配置上右下左四个值
        fixed           : true ,    //是否使用fix属性定位窗口
        left            : null,     //初始显示位置
        top             : null,     //初始显示位置
        closeable       : true,     //是否可关闭
        hideOnClose     : false,    //关闭时是否只隐藏窗口，而不是删除，可通过show方法再次显示
        draggable       : true,     //是否可拖拽
        contentType     : null,     //如果是iframe,请指定url
        zIndex          : 1024,     //默认z-index为1024
        resizable       : false,    //是否可以通过拖拽改变大小
        autoShow        : true,     //是否自动显示
        autoMiddle      : true,     //窗口大小改变时，保持居中
        autoClose       : 0,        //自动关闭，单位毫秒，0表示不自动关闭
        showShadow      : true,     //是否显示阴影
        showTitle       : true,     //是否显示标题
        textAlign       : 'inherit',//内容对其方式，默认：inherit
        buttonAlign     : 'right',  //按钮对齐方式，可选值：left / right / center，默认：right
        dialogClassName : null,     //对话框的自定义class
        maskClassName   : null,     //遮罩层的自定义class
        wobbleEnable    : false,    //模态下，点击空白处，是否允许对话框呈现动画摆动
        closeOnBodyClick: false,    //点击对话框之外的地方自动关闭
        buttons         : [],       //对话框中包含的按钮
        events          : {}        //事件集合，可选项有：show / close / hide / resize / enterKey / escKey
    };

mark：上面的配置项中，除了anchor、buttons以及events之外，其余都是简单数据类型，下面会对这些配置项进行单独说明

三、配置项说明

1、buttons配置项说明

?

1 2 3 4 5 6 7 8 9 10 11 12

// 完整配置项：Array var buttons = [     {       // 按钮1         text : '确定',          // 按钮上要显示的文字（建议字数不要超过4）         type : 'normal',       // 按钮类型，可选：highlight，normal         handler : function(button,dialog){  // 按钮的点击处理事件             // 两个参数说明：button表示当前按钮的jQuery对象             // dialog表示当前对话框对象         }     },     ... // 可以配置多个按钮 ];

2、events配置项说明

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

// 完整配置项：JSON（支持的事件都是可选项） var events = {     /**      * 对话框显示的时候，触发此事件      * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例      */     show : function(evt){       },       /**      * 对话框隐藏的时候，触发此事件      * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例      */     hide : function(evt){       },       /**      * 对话框关闭的时候，触发此事件，此事件不会和hide同时触发      * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例      */     close : function(evt){       },       /**      * window.resize时候，触发此事件      * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例      */     resize : function(evt){       },       /**      * 窗口处于显示状态，且按下Enter键时候，触发此事件      * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例      */     enterKey : function(evt){       },       /**      * 窗口处于显示状态，且按下ESC键时候，触发此事件      * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例      */     escKey : function(evt){       } };

。

jDialog.alert(content [,button][,options])点击收起

一、接口功能

最普通最常用的alert对话框，默认携带一个确认按钮

二、参数说明

/**
 * 普通alert框
 * @param       {String}  content 提示框的内容，可以是任意HTML代码片段
 *
 * @param       {Object}  button  确定按钮，最多只有一个按钮
 * @p-config    {String}  text    按钮文字，默认：确定
 * @p-config    {String}  type    按钮类型，默认：normal，可选：highlight（高亮）
 * @p-config    {String}  handler 按钮点击后的执行动作，默认：关闭当前对话框
 *
 * @param       {Object}  options dialog的其他配置项
 *
 * @return      {Object}  当前dialog对象
 */

mark：具体button以及options的配置方法，可参考 jDialog options 中的详细说明。

三、示例

1、只设置content参数

?

1 2	// 只设置第一个参数：content var dialog = jDialog.alert('欢迎使用jDialog组件，我是alert！');

2、修改默认按钮，可设置第二个参数

?

1 2 3 4 5 6 7 8 9 10 11

// 修改按钮 var dialog = jDialog.alert('欢迎使用jDialog组件，我是alert！',{     type : 'highlight',     text : '谢谢!',     handler : function(button,dialog) {         // TODO ...     } });   // 如上关于第二个参数（button）的配置，其实每一项都是可选的，如果只需要修改按钮的文字，可以只传入： // { text : '谢谢!' }

3、除了按钮外，还可以额外设定dialog的其他参数

?

1 2 3 4 5 6 7

// 通过options参数，控制alert对话框 var dialog = jDialog.alert('欢迎使用jDialog组件，我是alert！',{},{     autoClose : 3000,    // 3s后自动关闭     showShadow: false    // 不显示对话框阴影 });   // 在options参数中，还可以配置其他所有的参数项

jDialog.confirm(content [,acceptButton][,cancelButton][,options])点击收起

一、接口功能

确认对话框，默认带有两个按钮，分别为：确认、取消

二、参数说明

/**
 * 确认对话框
 * @param       {String}  content       提示框的内容，可以是任意HTML代码片段
 *
 * @param       {Object}  acceptButton  确认按钮
 * @p-config    {String}  text          按钮文字，默认：确定
 * @p-config    {String}  type          按钮类型，默认：normal，可选：highlight（高亮）
 * @p-config    {String}  handler       按钮点击后的执行动作，默认：关闭当前对话框
 *
 * @param       {Object}  cancelButton  取消按钮
 * @p-config    {String}  text          按钮文字，默认：取消
 * @p-config    {String}  type          按钮类型，默认：normal，可选：highlight（高亮）
 * @p-config    {String}  handler       按钮点击后的执行动作，默认：关闭当前对话框
 *
 * @param       {Object}  options       dialog的其他配置项
 *
 * @return      {Object}  当前dialog对象
 */

mark：具体button以及options的配置方法，可参考 jDialog options 中的详细说明。

三、示例

1、只设置content参数

?

1 2	// 只设置第一个参数：content var dialog = jDialog.confirm('欢迎使用jDialog组件，我是confirm！');

2、修改或设置按钮的点击事件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 修改按钮 var dialog = jDialog.confirm('欢迎使用jDialog组件，我是confirm！',{     type : 'highlight',     text : '知道了!',     handler : function(button,dialog) {         alert('感谢！');         dialog.close();     } },{     type : 'normal',     text : '以后用!',     handler : function(button,dialog) {         // TODO ...     } });

3、除了按钮外，还可以额外设定dialog的其他参数

?

1 2 3 4 5 6 7 8 9 10 11

// 通过options参数，控制confirm var dialog = jDialog.confirm('欢迎使用jDialog组件，我是confirm！',{     handler : function(button,dialog) {         alert('感谢！');         dialog.close();     } },{},{     title : '温馨提示' });   // 在options参数中，还可以配置其他所有的参数项

jDialog.message(content [,options])点击展开

一、接口功能

一个默认无标题无按钮的对话框

二、参数说明

/**
 * 普通消息框，无title
 * @param       {String}  content 消息的内容，可以是任意HTML代码片段
 *
 * @param       {Object}  options dialog的其他配置项
 *
 * @return      {Object}  当前dialog对象
 */

mark：具体options的配置方法，可参考 jDialog options 中的详细说明。

三、示例

1、只设置content参数

?

1 2	// 只设置第一个参数：content var dialog = jDialog.message('欢迎使用jDialog组件，我是message！');

2、额外设定dialog的其他参数

?

1 2 3 4 5 6 7 8

// 通过options参数，控制message对话框 var dialog = jDialog.message('欢迎使用jDialog组件，我是message！',{     autoClose : 3000,    // 3s后自动关闭     padding : '30px',    // 设置内部padding     modal: false         // 非模态，即不显示遮罩层 });   // 在options参数中，还可以配置其他所有的参数项

jDialog.tip(content [,anchor] [,options])点击展开

一、接口功能

一个带有小三角箭头的tip消息框，无title，非模态

二、参数说明

/**
 * 一个带有小三角箭头的tip消息框，无title，非模态
 *
 * @param       {String}  content 消息的内容，可以是任意HTML代码片段
 *
 * @param       {Object}  anchor 小三角箭头的相关配置
 *
 * @p-config    {jQ-Elm}  target    小箭头需要指向的HTML节点，且用jQuery封装的对象
 * @p-config    {String}  position  tip消息框出现的位置（相对于target），可选：
 *                                  top / top-left / top-right
 *                                  right / right-top / right-bottom
 *                                  bottom / bottom-left / bottom-right
 *                                  left / left-top / left-bottom
 * @p-config    {Object}  offset    消息框与target之间的位置偏移
 * @p-c-item    {Integer} top       dialog与target之间顶部偏移，position中含top时生效
 * @p-c-item    {Integer} right     dialog与target之间右侧偏移，position中含right时生效
 * @p-c-item    {Integer} bottom    dialog与target之间底部偏移，position中含bottom时生效
 * @p-c-item    {Integer} left      dialog与target之间左侧偏移，position中含left时生效
 * @p-config    {Integer} trianglePosFromStart 小三角距离弹窗边缘的距离
 *
 * @param       {Object}  options dialog的其他配置项
 *
 * @return      {Object}  当前dialog对象
 */

mark：具体options的配置方法，可参考 jDialog options 中的详细说明。

三、示例

1、设置content和anchor参数

?

1 2 3 4

// 设置content和anchor参数 var dialog = jDialog.tip('欢迎使用jDialog组件，我是tip！',{     target : $('button') });

2、通过anchor参数改变dialog的方向和位置

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// demo1：dialog出现在target上方10px处，且小三角居中 var dialog = jDialog.tip('欢迎使用jDialog组件，我是tip！',{     target : $('button'),     position : 'top',     offset : {         top : 10     } });   // demo2：dialog出现在target右侧，且上边缘对其、小三角居中 var dialog = jDialog.tip('欢迎使用jDialog组件，我是tip！',{     target : $('button'),     position : 'right-top' });   // demo3：dialog出现在target左侧，且上边缘对其、小三角距离上边缘20px var dialog = jDialog.tip('欢迎使用jDialog组件，我是tip！',{     target : $('button'),     position : 'left-top',     trianglePosFromStart : 20 });

mark：可以通过offset配置项调整tip与target之间的偏移，position总共12中选择

3、额外设定dialog的其他参数

?

1 2 3 4 5 6 7 8

// 通过options参数，控制tip对话框 var dialog = jDialog.tip('欢迎使用jDialog组件，我是tip！',{     target : $('button') },{     autoClose : 1000 });   // 在options参数中，还可以配置其他所有的参数项

jDialog.iframe(url [,options])点击展开

一、接口功能

在对话框中显示一个iframe页面

二、参数说明

/**
 * 在对话框中显示一个iframe页面
 * @param       {String}  url     消息的内容
 *
 * @param       {Object}  options dialog的其他配置项
 *
 * @return      {Object}  当前dialog对象
 */

mark：具体options的配置方法，可参考 jDialog options 中的详细说明。

三、示例

1、只设置url参数

?

1 2	// 只设置第一个参数：url var dialog = jDialog.iframe('http://www.baidu.com');

2、额外设定dialog的其他参数

?

1 2 3 4 5 6 7 8

// 通过options参数，控制iframe对话框 var dialog = jDialog.iframe('http://www.baidu.com',{     title : '百度一下，你就知道',     width : 800,     height : 500 });   // 在options参数中，还可以配置其他所有的参数项

jDialog.dialog(options)点击展开

一、接口功能

自定义对话框，最通用最基础的一个API接口

二、参数说明

/**
 * 自定义对话框，最通用最基础的一个API接口
 * @param       {Object}  options dialog的其他配置项
 * @return      {Object}  当前dialog对象
 */

mark：具体options的配置方法，可参考 jDialog options 中的详细说明。

三、示例

1、通过options参数直接自定义dialog

?

1 2 3 4 5 6 7

// 通过options参数，控制dialog var dialog = jDialog.dialog({     title : '自定义对话框',     content : '大家好，我是jDialog.dialog，接口很友好的，欢迎使用！' });   // 在options参数中，还可以配置其他所有的参数项

2、给对话框配置两个按钮

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 通过options参数，控制dialog var dialog = jDialog.dialog({     title : '自定义对话框',     content : '大家好，我是jDialog.dialog！',     buttons : [         {             type : 'highlight',             handler : function(button,dialog){                 dialog.close();             }         }     ] });   // 在options参数中，还可以配置其他所有的参数项

3、给对话框增加事件监听

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

// 通过options参数，控制dialog var dialog = jDialog.dialog({     title : '自定义对话框',     content : '大家好，我是jDialog.dialog！',     buttons : [         {             type : 'highlight',             handler : function(button,dialog){                 dialog.hide();             }         }     ],     events : {         show : function(evt){             alert('show: ' + evt.data.dialog.content());         },         hide : function(evt){             alert('hide');         },         close : function(evt){             alert('close');         },         resize : function(evt){             alert('resize');         }     } });   // 在options参数中，还可以配置其他所有的参数项

【实例方法】dialog.title(title)点击展开

一、接口功能

设置或获取对话框的标题

二、参数说明

/**
 * 设置 / 获取 窗口标题
 * @param   {String}  title    需要设置的标题；不设置参数时，表示获取窗口标题
 * @return  {Object/String}   设置标题时，返回窗口对象；获取窗口标题时，返回标题
 */

 

三、示例

1、设置窗口标题

?

1 2	// 设置标题，方法返回dialog对象本身 dialog = dialog.title('我是新的标题');

2、获取标题

?

1 2	// 获取标题 var title = dialog.title();

【实例方法】dialog.content(content)点击展开

一、接口功能

设置或获取对话框的内容

二、参数说明

/**
 * 设置 / 获取 窗口内容
 * @param   {String}  html    需要设置的内容；不设置参数时，表示获取窗口内容
 * @return  {Object/String}   设置内容时，返回窗口对象；获取窗口内容时，返回内容
 */

 

三、示例

1、设置窗口内容

?

1 2	// 设置内容，方法返回dialog对象本身 dialog = dialog.content('我是新的内容');

2、获取内容

?

1 2	// 获取内容 var content = dialog.content();

【实例方法】dialog.width(width)点击展开

一、接口功能

设置或获取对话框的宽度

二、参数说明

/**
 * 设置 / 获取 窗口宽度
 * @param   {String}  width    需要设置的宽度；不设置参数时，表示获取窗口宽度
 * @return  {Object/Integer}   设置宽度时，返回窗口对象；获取窗口宽度时，返回宽度
 */

 

三、示例

1、设置窗口宽度

?

1 2	// 设置宽度，方法返回dialog对象本身 dialog = dialog.width(300);

2、获取宽度

?

1 2	// 获取宽度 var width = dialog.width();

【实例方法】dialog.height(height)点击展开

一、接口功能

设置或获取对话框的高度

二、参数说明

/**
 * 设置 / 获取 窗口高度
 * @param   {String}  height    需要设置的高度；不设置参数时，表示获取窗口高度
 * @return  {Object/Integer}    设置高度时，返回窗口对象；获取窗口高度时，返回高度
 */

 

三、示例

1、设置窗口高度

?

1 2	// 设置高度，方法返回dialog对象本身 dialog = dialog.height(300);

2、获取高度

?

1 2	// 获取高度 var height = dialog.height();

【实例方法】dialog.position(position)点击展开

一、接口功能

设置或获取对话框的位置

二、参数说明

/**
 * 设置/获取 对话框的位置
 * @param       {Object}  pos    需要设置的位置；不设置参数时，表示获取窗口位置
 * @p-config    {Integer} left   窗口位置left坐标
 * @p-config    {Integer} top    窗口位置top坐标
 * @return      {Object}         设置位置时，返回窗口对象；获取窗口位置时，返回位置
 */

 

三、示例

1、设置窗口位置

?

1 2 3 4 5

// 设置位置，方法返回dialog对象本身 dialog = dialog.position({     top : 100,     left : 200 });

2、获取位置

?

1 2	// 获取位置 var position = dialog.position();

【实例方法】dialog.middle()点击展开

一、接口功能

设置窗口在当前浏览器窗口中垂直水平居中

二、参数说明

/**
 * 设置窗口在浏览器中垂直水平居中对其
 * @return {Object} 当前窗口对象
 */

 

三、示例

1、设置窗口居中对其

?

1 2	// 设置窗口对其，方法返回dialog对象本身 dialog = dialog.middle();

【实例方法】dialog.buttons(buttons)点击展开

一、接口功能

设置或获取对话框的按钮

二、参数说明

/**
 * 自定义对话框
 * @param  buttons   对话框按钮
 *         [{
 *               type : 'normal',    // normal 或者 highlight
 *               text : '确定',      // 按钮的显示文本
 *               handler : function(button,dialog){ // 按钮点击事件
 *                    // TODO ...
 *               }
 *         }]
 * @return  {Object} 设置按钮时，返回窗口对象；获取窗口按钮时，返回按钮
 */

mark：另外，要获取窗口按钮，也可以通过属性获取：dialog.dom.buttons

三、示例

1、设置窗口按钮

?

1 2 3 4 5 6 7 8 9 10 11 12 13

// 设置按钮，方法返回dialog对象本身 dialog = dialog.buttons([{     type : 'highlight',     text : '好的',     handler : function(buttn,dlg){         // TODO...     } },{     text : '不了',     handler : function(buttn,dlg){         // TODO...     } }]);

2、获取按钮

?

1 2	// 获取按钮 var buttons = dialog.buttons();

【实例方法】dialog.show()点击展开

一、接口功能

显示自定义对话框

二、参数说明

/**
 * 显示对话框
 * @return {Object} 返回当前窗口对象
 */

 

三、示例

1、显示对话框

?

1 2	// 显示对话框，方法返回dialog对象本身 dialog = dialog.show();

【实例方法】dialog.hide()点击展开

一、接口功能

隐藏自定义对话框

二、参数说明

/**
 * 隐藏对话框
 * @return {Object} 返回当前窗口对象
 */

 

三、示例

1、隐藏对话框

?

1 2	// 隐藏对话框，方法返回dialog对象本身 dialog = dialog.hide();

【实例方法】dialog.close()点击展开

一、接口功能

关闭自定义对话框

二、参数说明

/**
 * 关闭对话框
 * @return {Object} 返回当前窗口对象
 */

 

三、示例

1、关闭对话框

?

1 2	// 关闭对话框，方法返回dialog对象本身 dialog = dialog.close();