js插件之artDialog 幻幻Fate 2015年01月18日 0 49,024次浏览 js,artdialog,artDialog.js

最早接触artdialog是v4那时感觉这个插件还蛮简单小巧的。artDialog.alert，artDialog.tip，artDialog.load，artDialog.confirm各种函数简单易懂，这个很容易理解学习，这里不多做介绍（这也算介绍- -？），本篇主要介绍v6版本。

v6版本整个插件的结构发生了改变，当初花了点时间才基本会用，据官网介绍，腾讯和盛大都在使用整个插件用户数超40W。

官方的介绍：

artDialog —— 经典的网页对话框组件，内外皆用心雕琢。

1. 支持普通与 12 方向气泡状对话框
2. 完善的焦点处理，自动焦点附加与回退
3. 支持 ARIA 标准
4. 面向未来：基于 HTML5 Dialog 的 API
5. 支持标准与模态对话框
6. 丰富且友好的编程接口
7. 能自适应内容尺寸
8. 仅 4kb (gzip)

v6版本最近一次更新是在2014年12月6号。

好了，进入正题

1.首先从官网下载artDialog插件，然后引入到项目中

//jquery，10以上
<script src="theme/jquery/1.11.3/jquery.min.js">

2.先来个最简单的对话框
content中可以加入HTML代码

var d = dialog({
    title: '欢迎',
    content: '欢迎访问祝福之风！'
});
d.show();

试试吧

3.模态对话框
模拟对话框弹出时，只能对弹出框内的对象进行操作，其他对象无法操作

d.show();改为d.showModal();

试试吧

4.警告框
以“删除”这个情景为例

var d = dialog({
        title: '警告',
	content: '确认删除？',
	okValue: '确定',
	ok: function () {
	//删除操作
        return false;//阻止dialog关闭
	},
	cancelValue: '取消',
	cancel: function () {}
});
d.showModal();

试试吧

5.气泡，类似于v4中的tip

var d = dialog({
    content: '欢迎访问祝福之风！'
});
d.show();

试试吧

气泡不消失？是的，插件只是负责显示哦，要设置成显示一会就消失的样子，就要手动加上setTimeout

var d = dialog({
    content: '欢迎访问祝福之风！'
});
d.show();
setTimeout(function(){d.close().remove();},1000);//加上remove来销毁实例

试试吧

6.气泡浮层
一个点在于quickClose可以在点击空白处时让对话框关闭，另一个点事对话框在show的时候可以指定参数，该参数是个元素对象

var d = dialog({
    content: '欢迎访问祝福之风!',
    quickClose: true// 点击空白处快速关闭
});
d.show(document.getElementById('quickref-bubble'));

试试吧

12个方向演示，懒得写了，直接指向官网demo

7.给对话框左下脚添加复选框

var d = dialog({
    title: '欢迎',
    content: '欢迎访问祝福之风！',
    ok: function () {},
    statusbar: '不再提醒'
});
d.show();

试试吧

8.加载一个链接
首先要加载链接（页面）要使用dialog-plus.js(或dialog-plus-min.js)，被坑过有木有，害我跟官网对照半天，没见写法上有什么错误，结果是引入的js的问题-0-

var d = dialog({
    title: '欢迎',
    url: '你想要加载的url',
    ok: function () {}
});
d.show();

试试吧

基本功能差不多就是这些，还有就是dialog只有在加载的时候自动调整大小（reset）一次，之后由于在对话框内操作，导致需要调整对话框大小的话，要手动调用reset函数。

谢谢小伙伴们耐心得看完了，有啥问题请在评论中提出。