artDialog插件的详细使用

我不是女神ヾ 2022-08-07 03:39 434阅读 0赞

###  ###

### 1.直接引用 ###

### 2.作为 RequireJS 或 SeaJS 的模块引入 ###

var dialog = require('./src/dialog');

**注意：**内部依赖全局模块`require('jquery')`，请注意全局模块配置是否正确。seajs加载示例

>  *  如果需要支持 iframe 内容与拖拽，请引用加强版 dialog-plus.js
>  *  jquery 最低要求版本为`1.7+`

## 快速参考 ##

### 普通对话框 ###

var d = dialog({
        title: '欢迎',
        content: '欢迎使用 artDialog 对话框组件！'
    });
    d.show();

### 模态对话框 ###

var d = dialog({
        title: 'message',
        content: '<input autofocus />'
    });
    d.showModal();

### 气泡浮层 ###

var d = dialog({
        content: 'Hello World!',
        quickClose: true// 点击空白处快速关闭
    });
    d.show(document.getElementById('quickref-bubble'));

12 个方向定位演示

### 添加按钮 ###

1.确定与取消按钮：

2.指定更多按钮：

请参考 `button` 方法或参数。

### 控制对话框关闭 ###

var d = dialog({
        content: '对话框将在两秒内关闭'
    });
    d.show();
    setTimeout(function () {
        d.close().remove();
    }, 2000);

### 给对话框左下脚添加复选框 ###

var d = dialog({
        title: '欢迎',
        content: '欢迎使用 artDialog 对话框组件！',
        ok: function () {},
        statusbar: '<label><input type="checkbox">不再提醒</label>'
    });
    d.show();

### 点按钮不关闭对话框 ###

按钮事件返回 false 则不会触发关闭。

### 不显示关闭按钮 ###

var d = dialog({
        title: '欢迎',
        content: '欢迎使用 artDialog 对话框组件！',
        cancel: false,
        ok: function () {}
    });
    d.show();

### 创建 iframe 内容 ###

artDialog 提供了一个增强版用来支持复杂的 iframe 套嵌的页面，可以在顶层页面创建一个可供 iframe 访问的对话框创建方法，例如：

seajs.use(['dialog/src/dialog-plus'], function (dialog) {
        window.dialog = dialog;
    });

然后子页面就可以通过`top.dialog`控制对话框了。

打开示例页面

> 小提示：增强版的选项比标准版多了`url`、`oniframeload`这几个字段。

## 方法 ##

若无特别说明，方法均支持链式调用。

### show(\[anchor\]) ###

显示对话框。

默认居中显示，支持传入元素节点或者事件对象。

*  参数类型为`HTMLElement`：可吸附到元素上，同时对话框将呈现气泡样式。
 *  参数类型为`Event Object`：根据`event.pageX`与`event.pageY`定位。

#### 示例 ####

var d = dialog();
    d.content('hello world');
    d.show(document.getElementById('api-show'));

var d = dialog({
        id: 'api-show-dialog',
        quickClose: true,
        content: '右键菜单'
    });
    $(document).on('contextmenu', function (event) {
        d.show(event);
        return d.destroyed;
    });

### showModal(\[anchor\]) ###

显示一个模态对话框。

其余特性与参数可参见`show([anchor])`方法。

#### 示例 ####

var d = dialog({
        title: 'message',
        content: '<input autofocus />'
    });
    d.showModal();

### close(\[result\]) ###

关闭（隐藏）对话框。

可接收一个返回值，可以参见 returnValue。

**注意**：`close()`方法只隐藏对话框，不会在 DOM 中删除，删除请使用`remove()`方法。

### remove() ###

销毁对话框。

**注意**：不同于`close([result])`方法，`remove()`方法会从 DOM 中移出对话框相关节点，销毁后的对话框无法再次使用。

对话框按钮点击后默认会依次触发 `close()`、`remove()` 方法。如果想手动控制对话框关闭可以如下操作：

var d = dialog();
    // [..]
    d.close().remove();

### content(html) ###

写入对话框内容。

`html`参数支持`String`、`HTMLElement`类型。

#### 示例 ####

传入字符串：

var d = dialog();
    d.content('hello world');
    d.show();

传入元素节点：

var elem = document.getElementById('test');
    dialog({
        content: elem,
        id: 'EF893L'
    }).show();

> v6.0.4 更新：隐藏元素将会自动显示，并且对话框卸载的时候会放回到`body`中

### title(text) ###

写入对话框标题。

#### 示例 ####

var d = dialog();
    d.title('hello world');
    d.show();

### width(value) ###

设置对话框宽度。

### 示例 ###

dialog({
        content: 'hello world'
    })
    .width(320)
    .show();

### height(value) ###

设置对话框高度。

### 示例 ###

dialog({
        content: 'hello world'
    })
    .height(320)
    .show();

### reset() ###

手动刷新对话框位置。

通常动态改变了内容尺寸后需要刷新对话框位置。

### button(args) ###

自定义按钮。

参数请参考 选项`button`；同时支持传入 HTML 字符串填充按钮区域。

### focus() ###

聚焦对话框（置顶）。

### blur() ###

让对话框失去焦点。

### addEventListener(type, callback) ###

添加事件。

支持的事件有：`show`、`close`、`beforeremove`、`remove`、`reset`、`focus`、`blur`

### removeEventListener(type, callback) ###

删除事件。

### dialog.get(id) ###

根据获取打开的对话框实例。

**注意**：这是一个静态方法。

### dialog.getCurrent() ###

获取当前（置顶）对话框实例。

**注意**：这是一个静态方法。

## 配置参数 ##

### content ###

设置消息内容。

#### 类型 ####

String, HTMLElement

#### 示例 ####

传入字符串：

dialog({
        content: 'hello world!'
    }).show();

传入元素节点：

var elem = document.getElementById('test');
    dialog({
        content: elem,
        id: 'EF893L'
    }).show();

### title ###

标题内容。

#### 类型 ####

String

#### 示例 ####

dialog({
        title: 'hello world!'
    }).show();

### statusbar ###

状态栏区域 HTML 代码。

可以实现类似“不再提示”的复选框。**注意**：必须有按钮才会显示。

#### 类型 ####

String

#### 示例 ####

### ok ###

确定按钮。

回调函数`this`指向`dialog`对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭。

#### 类型 ####

Function

#### 示例 ####

dialog({
        ok: function () {
            this
            .title('消息')
            .content('hello world!')
            .width(130);
            return false;
        }
    }).show();

### okValue ###

(默认值: `"ok"`) 确定按钮文本。

#### 类型 ####

String

#### 示例 ####

dialog({
        okValue: '猛击我',
        ok: function () {
            this.content('hello world!');
            return false;
        }
    }).show();

### cancel ###

取消按钮。

取消按钮也等同于标题栏的关闭按钮，若值为`false`则不显示关闭按钮。回调函数`this`指向`dialog`对象，执行完毕默认关闭对话框，若返回`false`则阻止关闭。

#### 类型 ####

Function, Boolean

#### 示例 ####

dialog({
        title: '消息',
        ok: function () {},
        cancel: function () {
            alert('取消');
        }
    }).show();

dialog({
        title: '消息',
        content: '不显示关闭按钮',
        ok: function () {},
        cancel: false
    }).show();

### cancelValue ###

(默认值: `"cancel"`) 取消按钮文本。

#### 类型 ####

String

#### 示例 ####

dialog({
        cancelValue: '取消我',
        cancel: function () {
            alert('关闭');
        }
    }).show();

### cancelDisplay ###

(默认值: `true`) 是否显示取消按钮。

#### 类型 ####

Boolean

#### 示例 ####

dialog({
        title: '提示',
        content: '这是一个禁止关闭的对话框，并且没有取消按钮',
        cancel: function () {
            alert('禁止关闭');
            return false;
        },
        cancelDisplay: false
    }).show();

### button ###

自定义按钮组。

#### 类型 ####

Array

#### 选项 ####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>String</td> 
   <td>按钮显示文本</td> 
  </tr> 
  <tr> 
   <td>callback</td> 
   <td>Function</td> 
   <td>(可选) 回调函数<code>this</code>指向<code>dialog</code>对象，执行完毕默认关闭与销毁对话框（依次执行<code>close()</code>与<code>remove()</code>），若返回<code>false</code>则阻止关闭与销毁</td> 
  </tr> 
  <tr> 
   <td>autofocus</td> 
   <td>Boolean</td> 
   <td>(默认值:<code>false</code>) 是否自动聚焦</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>Boolean</td> 
   <td>(默认值: <code>false</code>) 是否禁用</td> 
  </tr> 
 </tbody> 
</table>

#### 示例 ####

dialog({
        button: [
            {
                value: '同意',
                callback: function () {
                    this
                    .content('你同意了');
                    return false;
                },
                autofocus: true
            },
            {
                value: '不同意',
                callback: function () {
                    alert('你不同意')
                }
            },
            {
                id: 'button-disabled',
                value: '无效按钮',
                disabled: true
            },
            {
                value: '关闭我'
            }
        ]
    }).show();

### width ###

设置对话框 **内容** 宽度。

#### 类型 ####

String, Number

#### 示例 ####

dialog({
        width: 460
    }).show();

dialog({
        width: '20em'
    }).show();

### height ###

设置对话框 **内容** 高度。

#### 类型 ####

String, Number

#### 示例 ####

dialog({
        height: 460
    }).show();

dialog({
        height: '20em'
    }).show();

### skin ###

设置对话框额外的`className`参数。

多个`className`请使用空格隔开。

#### 类型 ####

String

#### 示例 ####

dialog({
        skin: 'min-dialog tips'
    }).show();

### padding ###

(默认值: *继承 css 文件设置*) 设置消息内容与消息容器的填充边距，即 style `padding`属性

#### 类型 ####

String

#### 示例 ####

dialog({
        content: 'hello world',
        padding: 0
    }).show();

### fixed ###

(默认值: `false`) 开启固定定位。

固定定位是 css2.1 `position`的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与部分移动浏览器对其支持不好，内部会转成绝对定位。

#### 类型 ####

Boolean

#### 示例 ####

dialog({
        fixed: true,
        title: '消息',
        content: '请拖动滚动条查看'
    }).show();

### align ###

(默认值: `"bottom left"`) 设置对话框与其他元素的对齐方式。

如果`show(elem)`与`showModal(elem)`传入元素，`align`参数方可生效，支持如下对齐方式：

*  `"top left"`
 *  `"top"`
 *  `"top right"`
 *  `"right top"`
 *  `"right"`
 *  `"right bottom"`
 *  `"bottom right"`
 *  `"bottom"`
 *  `"bottom left"`
 *  `"left bottom"`
 *  `"left"`
 *  `"left top"`

### 类型 ###

String

### 示例 ###

var d = dialog({
        align: 'left',
        content: 'Hello World!',
        quickClose: true
    });
    d.show(document.getElementById('option-align'));

12 个方向定位演示

### autofocus ###

(默认值: `true`) 是否支持自动聚焦。

#### 类型 ####

Boolean

### quickClose ###

(默认值: false) 是否点击空白出快速关闭。

#### 类型 ####

Boolean

### 示例 ###

var d = dialog({
        content: '点击空白处快速关闭',
        quickClose: true
    });
    d.show(document.getElementById('option-quickClose'));

### zIndex ###

(默认值: `1024`) 重置全局`zIndex`初始值，用来改变对话框叠加高度。

比如有时候配合外部浮动层 UI 组件，但是它们可能默认`zIndex`没有对话框高，导致无法浮动到对话框之上，这个时候你就可以给对话框指定一个较小的`zIndex`值。

请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。

#### 类型 ####

Number

#### 示例 ####

dialog({
        zIndex: 87
    }).show();

### onshow ###

对话框打开的事件。

回调函数`this`指向`dialog`对象。

#### 类型 ####

Function

#### 示例 ####

var d = dialog({
        content: 'loading..',
        onshow: function () {
            this.content('dialog ready');
        }
    });
    d.show();

### onclose ###

对话框关闭后执行的事件。

回调函数`this`指向`dialog`对象。

#### 类型 ####

Function

#### 示例 ####

var d = dialog({
        onclose: function () {
            alert('对话框已经关闭');
        },
        ok: function () {}
    });
    d.show();

### onbeforeremove ###

对话框销毁之前事件。

回调函数`this`指向`dialog`对象。

#### 类型 ####

Function

### onremove ###

对话框销毁事件。

回调函数`this`指向`dialog`对象。

#### 类型 ####

Function

#### 示例 ####

### onfocus ###

对话框获取焦点事件。

回调函数`this`指向`dialog`对象。

#### 类型 ####

Function

### onblur ###

对话框失去焦点事件。

回调函数`this`指向`dialog`对象。

#### 类型 ####

Function

### onreset ###

对话框位置重置事件。

回调函数`this`指向`dialog`对象。

#### 类型 ####

Function

### id ###

设定对话框唯一标识。

1.  可防止重复 ID 对话框弹出。
2.  支持使用`dialog.get(id)`获取某个对话框的接口。

#### 类型 ####

String

#### 示例 ####

dialog({
        id: 'id-demo',
        content: '再次点击运行看看'
    }).show();
    dialog.get('id-demo').title('8888888888');

## 属性 ##

### open ###

判断对话框是否被打开。

### returnValue ###

对话框返回值。

#### 示例 ####

### 这里是一些实验性的扩展，或许它们哪天消失也说不定。要注意：它们并没有整合在artDialog主文件里面。 ###

### 1.摇头效果(类似与wordpress登录失败后登录框可爱的左右晃动效果) ###

artDialog.fn.shake = function (){
        var style = this.DOM.wrap[0].style,
            p = [4, 8, 4, 0, -4, -8, -4, 0],
            fx = function () {
                style.marginLeft = p.shift() + 'px';
                if (p.length <= 0) {
                    style.marginLeft = 0;
                    clearInterval(timerId);
                };
            };
        p = p.concat(p.concat(p));
        timerId = setInterval(fx, 13);
        return this;
    };

示例:

2.右下角滑动通知

artDialog.notice = function (options) {
        var opt = options || {},
            api, aConfig, hide, wrap, top,
            duration = 800;
            
        var config = {
            id: 'Notice',
            left: '100%',
            top: '100%',
            fixed: true,
            drag: false,
            resize: false,
            follow: null,
            lock: false,
            init: function(here){
                api = this;
                aConfig = api.config;
                wrap = api.DOM.wrap;
                top = parseInt(wrap[0].style.top);
                hide = top + wrap[0].offsetHeight;
                
                wrap.css('top', hide + 'px')
                    .animate({top: top + 'px'}, duration, function () {
                        opt.init && opt.init.call(api, here);
                    });
            },
            close: function(here){
                wrap.animate({top: hide + 'px'}, duration, function () {
                    opt.close && opt.close.call(this, here);
                    aConfig.close = $.noop;
                    api.close();
                });
                
                return false;
            }
        };	
        
        for (var i in opt) {
            if (config[i] === undefined) config[i] = opt[i];
        };
        
        return artDialog(config);
    };

示例:

art.dialog.notice({
        title: '万象网管',
        width: 220,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
        content: '尊敬的顾客朋友，您IQ卡余额不足10元，请及时充值',
        icon: 'face-sad',
        time: 5
    });

3.简单交互对话框

1.警告

/**
     * 警告
     * @param	{String}	消息内容
     */
    artDialog.alert = function (content, callback) {
        return artDialog({
            id: 'Alert',
            icon: 'warning',
            fixed: true,
            lock: true,
            content: content,
            ok: true,
            close: callback
        });
    };

示例:

art.dialog.alert('人品越来越不那么稳定了，请检查！');

### 2.确认 ###

/**
     * 确认
     * @param	{String}	消息内容
     * @param	{Function}	确定按钮回调函数
     * @param	{Function}	取消按钮回调函数
     */
    artDialog.confirm = function (content, yes, no) {
        return artDialog({
            id: 'Confirm',
            icon: 'question',
            fixed: true,
            lock: true,
            opacity: .1,
            content: content,
            ok: function (here) {
                return yes.call(this, here);
            },
            cancel: function (here) {
                return no && no.call(this, here);
            }
        });
    };

示例:

art.dialog.confirm('你确定要删除这掉消息吗？', function () {
        art.dialog.tips('执行确定操作');
    }, function () {
        art.dialog.tips('执行取消操作');
    });

### 3.提问 ###

/**
     * 提问
     * @param	{String}	提问内容
     * @param	{Function}	回调函数. 接收参数：输入值
     * @param	{String}	默认值
     */
    artDialog.prompt = function (content, yes, value) {
        value = value || '';
        var input;
        
        return artDialog({
            id: 'Prompt',
            icon: 'question',
            fixed: true,
            lock: true,
            opacity: .1,
            content: [
                '<div style="margin-bottom:5px;font-size:12px">',
                    content,
                '</div>',
                '<div>',
                    '<input value="',
                        value,
                    '" style="width:18em;padding:6px 4px" />',
                '</div>'
                ].join(''),
            init: function () {
                input = this.DOM.content.find('input')[0];
                input.select();
                input.focus();
            },
            ok: function (here) {
                return yes && yes.call(this, input.value, here);
            },
            cancel: true
        });
    };

示例:

art.dialog.prompt('请输入图片网址', function (val) {
        art.dialog.tips(val);
    }, 'http://');

### 4.短暂提示 ###

/**
     * 短暂提示
     * @param	{String}	提示内容
     * @param	{Number}	显示时间 (默认1.5秒)
     */
    artDialog.tips = function (content, time) {
        return artDialog({
            id: 'Tips',
            title: false,
            cancel: false,
            fixed: true,
            lock: true
        })
        .content('<div style="padding: 0 1em;">' + content + '</div>')
        .time(time || 1);
    };

示例:

art.dialog.tips('数据正在提交..', 2);
    // [more code..]
    art.dialog.tips('成功！已经保存在服务器');