fast-artDialog

—经典、优雅的网页对话框控件

本项目基于 artDialog 二次开发，以便于 webpack 使用

使用文档还是阅读 http://aui.github.io/artDialog/doc/index.html

但是引用方式是基于 webpack

var dialog = require('fast-artdialog')
require('fast-artdialog/index.css')

修改默认参数

通过 dialog.defaults 可修改默认参数不需要修改 src/dialog-config.js 文件

var dialog = require('fast-artdialog')
require('fast-artdialog/index.css')
dialog.defaults.content = 'x'
var d = dialog()
d.show()

默认参数

{
 
    /* -----已注释的配置继承自 popup.js，仍可以再这里重新定义它----- */
 
    // 对齐方式
    //align: 'bottom left',
 
    // 是否固定定位
    //fixed: false,
 
    // 对话框叠加高度值(重要：此值不能超过浏览器最大限制)
    //zIndex: 1024,
 
    // 设置遮罩背景颜色
    backdropBackground: '#000',
 
    // 设置遮罩透明度
    backdropOpacity: 0.7,
 
    // 消息内容
    content: '<span class="ui-dialog-loading">Loading..</span>',
 
    // 标题
    title: '',
 
    // 对话框状态栏区域 HTML 代码
    statusbar: '',
 
    // 自定义按钮
    button: null,
 
    // 确定按钮回调函数
    ok: null,
 
    // 取消按钮回调函数
    cancel: null,
 
    // 确定按钮文本
    okValue: 'ok',
 
    // 取消按钮文本
    cancelValue: 'cancel',
 
    cancelDisplay: true,
 
    // 内容宽度
    width: '',
 
    // 内容高度
    height: '',
 
    // 内容与边界填充距离
    padding: '',
 
    // 对话框自定义 className
    skin: '',
 
    // 是否支持快捷关闭（点击遮罩层自动关闭）
    quickClose: false,
 
    // 模板（使用 table 解决 IE7 宽度自适应的 BUG）
    // js 使用 i="***" 属性识别结构，其余的均可自定义
    innerHTML:
        '<div i="dialog" class="ui-dialog">'
        +       '<div class="ui-dialog-arrow-a"></div>'
        +       '<div class="ui-dialog-arrow-b"></div>'
        +       '<table class="ui-dialog-grid">'
        +           '<tr>'
        +               '<td i="header" class="ui-dialog-header">'
        +                   '<button i="close" class="ui-dialog-close">&#215;</button>'
        +                   '<div i="title" class="ui-dialog-title"></div>'
        +               '</td>'
        +           '</tr>'
        +           '<tr>'
        +               '<td i="body" class="ui-dialog-body">'
        +                   '<div i="content" class="ui-dialog-content"></div>'
        +               '</td>'
        +           '</tr>'
        +           '<tr>'
        +               '<td i="footer" class="ui-dialog-footer">'
        +                   '<div i="statusbar" class="ui-dialog-statusbar"></div>'
        +                   '<div i="button" class="ui-dialog-button"></div>'
        +               '</td>'
        +           '</tr>'
        +       '</table>'
        +'</div>'
 
}