<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>artDialog</title> </head> <body> <button> 弹出框 </button> <button> 加载中 </button> <script src="https://www.jb51.net/js/jQuery1.11.3/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/artDialog6/dialog-min.js" type="text/javascript" charset="utf-8"></script> <link type="text/css" href="https://www.jb51.net/js/artDialog6/ui-dialog.css" /> <script type="text/javascript"> function btn_dialog() { var d = dialog({ title: '消息', content: '风吹起的青色衣衫，夕阳里的温暖容颜，你比以前更加美丽，像盛开的花<br>——许巍《难忘的一天》', okValue: '确 定', ok: function() { var that = this; setTimeout(function() { that.title('提交中..'); }, 2000); return false; }, cancelValue: '取消', cancel: function() { alert('你点了取消按钮') } }); d.show(); } function btn_loading(){ dialog({ modal:true }).show(); } </script> </body> </html>
运行结果：
属性：
// 对齐方式 //align: 'bottom left', // 是否固定定位 //fixed: false, // 对话框叠加高度值(重要：此值不能超过浏览器最大限制) //zIndex: 1024, // 设置遮罩背景颜色 backdropBackground: '#000', // 设置遮罩透明度 backdropOpacity: 0.7, // 消息内容 content: '<span>Loading..</span>', // 标题 title: '', // 对话框状态栏区域 HTML 代码 statusbar: '', // 自定义按钮 button: null, // 确定按钮回调函数 ok: null, // 取消按钮回调函数 cancel: null, // 确定按钮文本 okValue: 'ok', // 取消按钮文本 cancelValue: 'cancel', cancelDisplay: true, // 内容宽度 width: '', // 内容高度 height: '', // 内容与边界填充距离 padding: '', // 对话框自定义 className skin: '', // 是否支持快捷关闭（点击遮罩层自动关闭） quickClose: false, // css 文件路径，留空则不会使用 js 自动加载样式 // 注意：css 只允许加载一个 cssUri: '../css/ui-dialog.css',
事件：
/** * 显示对话框 * @name artDialog.prototype.show * @param {HTMLElement Object, Event Object} 指定位置（可选） */ /** * 显示对话框（模态） * @name artDialog.prototype.showModal * @param {HTMLElement Object, Event Object} 指定位置（可选） */ /** * 关闭对话框 * @name artDialog.prototype.close * @param {String, Number} 返回值，可被 onclose 事件收取（可选） */ /** * 销毁对话框 * @name artDialog.prototype.remove */ /** * 重置对话框位置 * @name artDialog.prototype.reset */ /** * 让对话框聚焦（同时置顶） * @name artDialog.prototype.focus */ /** * 让对话框失焦（同时置顶） * @name artDialog.prototype.blur */ /** * 添加事件 * @param {String} 事件类型 * @param {Function} 监听函数 * @name artDialog.prototype.addEventListener */ /** * 删除事件 * @param {String} 事件类型 * @param {Function} 监听函数 * @name artDialog.prototype.removeEventListener */ /** * 对话框显示事件，在 show()、showModal() 执行 * @name artDialog.prototype.onshow * @event */ /** * 关闭事件，在 close() 执行 * @name artDialog.prototype.onclose * @event */ /** * 销毁前事件，在 remove() 前执行 * @name artDialog.prototype.onbeforeremove * @event */ /** * 销毁事件，在 remove() 执行 * @name artDialog.prototype.onremove * @event */ /** * 重置事件，在 reset() 执行 * @name artDialog.prototype.onreset * @event */ /** * 焦点事件，在 foucs() 执行 * @name artDialog.prototype.onfocus * @event */ /** * 失焦事件，在 blur() 执行 * @name artDialog.prototype.onblur * @event */
该插件使用比较简单，可以看示例与源代码。
五、模板引擎
在AJAX示例中javascript中有大量的html字符串，html中有一些像onclick样的javascript，这样javascript中有html，html中有javascript，代码的偶合度很高，不便于修改与维护，使用模板引擎可以解决问题。
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。前后端都有模板引擎，比如T4、FreeMarker、Velocity，这里主要讲前端模板引擎：
上图是常见的一些前端模板引擎，速度相对快的是artTemplate，与artDialog是同一个作者，当然一个好的模板引擎不仅是速度还有很多方面都关键。
源码与帮助： https://github.com/aui/artTemplate
5.1、Hello World
示例代码：