jquery.artDialog.source.js学习

1 关键的对象关系
art = jQuery = $
function artDialog() {...}
artDialog.fn = artDialog.prototype =artDialog.fn._init.prototype

jQuery.fn = jQuery.prototype = jQuery.fn.init.prototype
jQuery.extend = jQuery.fn.extend

$.fn.dialog = $.fn.artDialog
window.artDialog = $.dialog = $.artDialog = artDialog

 

2 默认配置
artDialog.defaults = {
        //消息内容
 content: '<divclass="aui_loading"><span>loading..</span></div>',
 title:'\u6d88\u606f',  // 标题.默认'消息'
 button:null,    //自定义按钮
 ok:null,     //确定按钮回调函数
 cancel:null,    //取消按钮回调函数
 init:null,     //对话框初始化后执行的函数
 close:null,    //对话框关闭前执行的函数
 okVal:'\u786E\u5B9A',  // 确定按钮文本.默认'确定'
 cancelVal: '\u53D6\u6D88', //取消按钮文本. 默认'取消'
 width:'auto',    //内容宽度
 height:'auto',    //内容高度
 minWidth:96,    //最小宽度限制
 minHeight:32,    //最小高度限制
 padding: '20px25px',  // 内容与边界填充距离
 skin:'',     //皮肤名(预留接口,尚未实现)
 icon:null,     //消息图标名称
 time:null,     //自动关闭时间
 esc:true,     //是否支持Esc键关闭
 focus:true,    //是否支持对话框按钮自动聚焦
 show:true,     //初始化后是否显示对话框
 follow:null,    //跟随某元素(即让对话框在元素附近弹出)
 path:_path,    //artDialog路径
 lock:false,    //是否锁屏
 background:'#000',   //遮罩颜色
 opacity:.7,    //遮罩透明度
 duration:300,    //遮罩透明度渐变动画速度
 fixed:false,    //是否静止定位
 left:'50%',    //X轴坐标
 top:'38.2%',    //Y轴坐标
 zIndex:1987,    //对话框叠加高度值(重要：此值不能超过浏览器最大限制)
 resize:true,    //是否允许用户调节尺寸
 drag:true     //是否允许用户拖动位置
 
};

 

3 获取某对话框
artDialog.get = function (id) {
 return id === undefined
 ? artDialog.list
 : artDialog.list[id];
};

 

iframeTools.source.js学习
var _top = artDialog.top // 引用顶层window对象；
artDialog.parent = _top; // 兼容v4.1之前版本，未来版本将删除此；
_topDialog = _top.artDialog; // 顶层window对象的artDialog对象；
artDialog.data // 跨框架数据共享接口，保存在顶层框架下面；
artDialog.through = _proxyDialog // 跨框架普通对话框
artDialog.open // 弹出窗口
artDialog.open.api // 引用open方法扩展方法
artDialog.opener // 引用open方法触发来源页面window
artDialog.open.origin = artDialog.opener; //兼容v4.1之前版本，未来版本将删除此
artDialog.close // 关闭对话框

artDialog.alert // 警告对话框
artDialog.confirm // 确认对话框
artDialog.prompt // 输入提示对话框
artDialog.tips // 短暂提示对话框

 

// 获取源窗口

var winOpener = (art.dialog.opener == window)&& window.opener ||art.dialog.opener;

// 关闭窗口

var api = art.dialog.open.api;
api && api.close() ||window.close();
 

JavaScript闭包写法的优势：隐藏实现细节，不污染window对象；

例如：

// 变量a的获取细节被隐藏，这样不会污染window对象；
 var a = function() {
  // do something
  return 1;
 }();
 // 逻辑表达式特殊应用
 a && alert("a=" +a);
 // 创建自己的API并隐藏了实现细节，这样不会污染window对象；
 ;(function(p1, p2) {
  // do something
  // 将自己的对象赋值到window
  window.xxx = xxx;
  alert(p1 + "-" + p2);
 })(1, 2);

 

常见的对话框实现

结合iframetools.source.js提供的默认实现；

建议使用时候同时导入jquery.artDialog.source.js和iframetools.source.js，由于默认实现的alert是一个警告消息框，这里可以自己去覆盖掉；

artDialog.shake = function () {
    var style =this.DOM.wrap[0].style,
       p = [4, 8, 4, 0, -4, -8, -4, 0],
       fx = function () {
           style.marginLeft = p.shift() + 'px';
           if (p.length <= 0) {
               style.marginLeft = 0;
               clearInterval(timerId);
           };
       };
    p =p.concat(p.concat(p));
    timerId =setInterval(fx, 13);
    returnthis;
};

artDialog.notice = function (options) {
    var opt =options || {},
       api, aConfig, hide, wrap, top,
       duration = 800;
       
    var config ={
       id: 'Notice',
       left: '100%',
       top: '100%',
       fixed: true,
       drag: false,
       resize: false,
       follow: null,
       lock: false,
       init: function(here){
           api = this;
           aConfig = api.config;
           wrap = api.DOM.wrap;
           top = parseInt(wrap[0].style.top);
           hide = top + wrap[0].offsetHeight;
           
           wrap.css('top', hide + 'px')
               .animate({top: top + 'px'}, duration, function () {
                   opt.init && opt.init.call(api,here);
               });
       },
       close: function(here){
           wrap.animate({top: hide + 'px'}, duration, function () {
               opt.close && opt.close.call(this,here);
               aConfig.close = $.noop;
               api.close();
           });
           
           return false;
       }
   }; 
   
    for (var iin opt) {
       if (config[i] === undefined) config[i] = opt[i];
    };
   
    returnartDialog.through(config);
};

artDialog.alert = function (content, callback) {
 return artDialog.through({
  id: 'Alert',
  fixed: true,
  content: content,
  ok: true,
  close: callback
 });
};

artDialog.warn = function (content, callback) {
 

return artDialog.through({
  id: 'Warn',
  title: '警告',
  icon: 'warning',
  fixed: true,
  lock: true,
  content: content,
  ok: true,
  close: callback
 });
};

名称	类型	默认值	描述
内容
title	String	'消息'	标题内容
content	String	'loading..'	消息内容。 1、如果传入的是HTMLElement类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置 2、如果没有设定content的值则会有loading的动画
	HTMLElement
按钮
ok	Function	null	确定按钮回调函数。 函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮
	Boolean
cancel	Function	null	取消按钮回调函数。 函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮 对话框标题栏的关闭按钮其实就是取消按钮，只不过视觉不同罢了，点击同样触发cancel事件
	Boolean
okVal	String	'确定'	"确定按钮"文字
cancelVal	String	'取消'	"取消按钮"文字
button	Array	null	自定义按钮。 配置参数成员： name —— 按钮名称 callback —— 按下后执行的函数 focus —— 是否聚焦点 disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态） 示例： 参数如：[{name: '登录', callback: function () {}}, {name: '取消'}] 。注意点击按钮默认会触发按钮关闭动作，需要阻止触发关闭请让回调函数返回false
尺寸
width	Number	'auto'	设置消息内容宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容。 如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整
	String
height	Number	'auto'	设置消息内容高度，可以带单位。不建议设置此，而应该让内容自己撑开高度。 如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整
	String
位置
fixed	Boolean	false	开启静止定位。静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响。（artDialog支持IE6 fixed）
follow	HTMLElement	null	让对话框依附在指定元素附近。 可传入元素ID名称，注意ID名称需要以“#”号作为前缀
	String
left	Number	'50%'	相对于可视区域的X轴的坐标。 可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整
	String
top	Number	'38.2%'	相对于可视区域的Y轴的坐标。 可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整
	String
视觉
lock	Boolean	false	开启锁屏。 中断用户对话框之外的交互，用于显示非常重要的操作/消息，所以不建议频繁使用它，它会让操作变得繁琐
background	String	'#000'	锁屏遮罩颜色
opacity	Number	0.7	锁屏遮罩透明度
icon	String	null	定义消息图标。可定义“skins/icons/”目录下的图标名作为参数名（不包含后缀名）
padding	String	'20px 25px'	内容与边界填充边距(即css padding)
交互
time	Number	null	设置对话框显示时间。以秒为单位
resize	Boolean	true	是否允许用户调节尺寸
drag	Boolean	true	是否允许用户拖动位置
esc	Boolean	true	是否允许用户按Esc键关闭对话框
高级
id	String	null	设定对话框唯一标识。用途： 1、防止重复弹出 2、定义id后可以使用art.dialog.list[youID]获取扩展方法
	Number
zIndex	Number	1987	重置全局zIndex初始值。 用来改变对话框叠加高度。比如有时候配合外部浮动层UI组件，但是它们可能默认zIndex没有artDialog高，导致无法浮动到artDialog之上，这个时候你就可以给对话框指定一个较小的zIndex值。 请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。
init	Function	null	对话框弹出后执行的函数
close	Function	null	对话框关闭前执行的函数。函数如果返回false将阻止对话框关闭。 请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close都将执行。
show	Boolean	true	是否显示对话框

扩展方法

名称	描述
close()	关闭对话框
show()	显示对话框
hide()	隐藏对话框
title(value)	写入标题。无参数则返回标题容器元素
content(value)	向消息容器中写入内容。参数支持字符串、DOM对象，无参数则返回内容容器元素
button(arguments)	插入一个自定义按钮。 配置参数成员： name —— 按钮名称 callback —— 按下后执行的函数 focus —— 是否聚焦点 disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态） 示例： button({ name: '登录', focus: true, callback: function () {} }, { name: '取消' })
follow(element)	让对话框吸附到指定元素附近
position(left, top)	重新定位对话框
size(width, height)	重新设定对话框大小
lock()	锁屏
unlock()	解锁
time(val)	定时关闭（单位秒）