artdialog html4,js插件之artDialog

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

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

官方的介绍：

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

支持普通与 12 方向气泡状对话框

完善的焦点处理，自动焦点附加与回退

支持 ARIA 标准

面向未来：基于 HTML5 Dialog 的 API

支持标准与模态对话框

丰富且友好的编程接口

能自适应内容尺寸

仅 4kb (gzip)

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

好了，进入正题

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

//jquery，10以上

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函数。

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