最早接触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函数。

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