文档索引

快速上手

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

引入文件

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

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

调用方式

  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 有两种调用方式,第一种是最简单的直接传入参数方式;第二种拥有更多的可选项,参见 配置参数

[使用jQuery?]

扩展接口

除了上述两种调用方式之外,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 type="text" value="guest" /><br />'
            + '密码:<input id="login-pw" type="text" value="****" />',
        lock: true,
        fixed: true,
        ok: function () {
            var pw = document.getElementById('login-pw');
            pw.select();
        	pw.focus();
        	this.shake();
            return false;
        },
        okValue: '登录',
        cancel: function () {}
    });
    运行

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

来源:站长素材



代码整理:站长图库