文档索引

快速上手

artDialog api 风格统一，有一定前端开发经验的同学通过阅读文档5分钟即可上手。

引入文件

在页面 head 引入 artDialog 样式与脚本文件:

<link href="./skins/default.css" rel="stylesheet" />
<script src="./artDialog.min.js"></script>

如果使用jquery，引用jquery.artDialog.min.js即可，调用时请把 'art' 前缀替换成 '$'。

调用方式

artDialog 有两种调用方式，第一种是最简单的直接传入参数方式；第二种拥有更多的可选项，参见 配置参数。

  1. art.dialog(content, [ok], [cancel])

    art.dialog('artDialog: I Love You!', function () {alert('Thank you!')});
    运行

  2. art.dialog(options)

    art.dialog({
    title: '欢迎',
    content: '欢迎使用artDialog对话框组件！',
    ok: function () {
        this
        .title('警告')
        .content('请注意artDialog两秒后将关闭！')
        .lock()
        .time(2000);
        return false;
    }
});
    运行

扩展接口

除了上述两种调用方式之外，artDialog 还提供一些接口方便异步操作，比如实现外部程序更新对话框内容、关闭窗口等。这是属于高级操作，详情参见 接口。

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

配置参数

接口

插件

artDialog 可以通过插件支持拖动、抖动效果， alert、confirm、prompt 方法。只需在 artDialog 之后引用如下文件即可：

<script src="./artDialog.plugins.min.js"></script>

演示插件

  • art.alert(content, [callback])

    art.alert('那些年，我们一起追的女孩');
    运行

  • art.confirm(content, ok, [cancel])

    art.confirm('你再也不相信爱情了么？', function () {
    alert(0);
}, function () {
    alert(1);
});
    运行

  • art.prompt(content, ok, [defaultValue])

    art.prompt('你的名字是什么？', function (value) {
    alert(value);
}, '糖饼');
    运行

  • shake()

    art.dialog({
    id: 'shake-demo',
    title: '登录',
    content: '帐号：<input id="login-na" type="text" value="guest" />'
        + '<br />密码：<input id="login-pw" type="text" value="****" />',
    initialize: function () {
        document.getElementById('login-na').focus();
    },
    lock: true,
    fixed: true,
    ok: function () {
        var pw = document.getElementById('login-pw');
        pw.select();
      pw.focus();
      this.shake();
        return false;
    },
    okValue: '登录',
    cancel: function () {}
});
    运行