artDialog 简单使用！

简介

artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。

功能： 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤……

优点

1. 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
2. 自适应内容: 无需预设高宽, 对话框自适应消息内容的大小 (包括按钮)，并且支持消息框大小拖动调节
3. 智能消息对齐: 如果设置了对话框宽度，文本会自动居中或者居左对齐
4. 容错: 如果定义的宽度高度小于内容大小不会出现错位,
5. 智能定位: 使用自定义坐标的时候智能修正位置，确保其在可视范围 (适用于弹出菜单)
6. 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
7. 轻巧: js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下)
8. 制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。
9. IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果
10. IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)

接口

配置参数

• content: {消息内容,支持HTML}
• title: {标题.默认:'提示'}
• lock: {是否锁定屏幕. 默认:false}
• width: {宽度,支持em等单位. 默认:'auto'}
• height: {高度,支持em等单位. 默认:'auto'}
• url: {iframe地址,存在content参数时候,此参数无效}
• x: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}
• y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中，而是使用的黄金比例)}
• fixed: {是否启用静止定位. 默认:false}
• time: {多少秒自动关闭}
• style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
• yesText: {确定按钮文本. 默认:'确定'}
• noText: {取消按钮文本. 默认:'取消'}
• yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}
• id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为'my2'，则内容容器id为'my2Content'}

• artDialog(
          {	
              content:'欢迎你来到对话框世界！',
              lock:true,
              style:'succeed noClose'
          },
          function(){
              alert('你点了确定');
          },
          function(){
              alert('你点了取消');
          }
  );

• artDialog({content:'大多情况下只需要一个content参数就能解决问题'}).

• http://www.mb5u.com/jscode/html/ajax/426_artDialog2_0_4/

21222

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158

/* 演示脚本 */     (function(){                 //判断IE6     var isIE6 = !+'\v1' && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);           //document.getElementById简化函数     var $ = function (id){         return 'string' == typeof id ? document.getElementById(id) : id;     };           //页面就绪，允许你绑定一个在DOM文档载入完成后执行的函数     var domReady = !+'\v1' ? function(f){(function(){             try{                 document.documentElement.doScroll('left');             } catch (error){                 setTimeout(arguments.callee, 0);                 return;             };             f();         })();     } : function(f){         document.addEventListener('DOMContentLoaded', f, false);     };           //在页面就绪后绑定事件     domReady(function(){         //artDialog({content:'欢迎使用 "artDialog" 对话框组件！'});                                   //--------------------------ardDialog演示脚本开始------------------------------//         $('btn1').onclick = function(){             artDialog({title:'图片查看', content:'<img width="817" height="479" src="http://www.hunanyishi.cn/images/main.jpg" />', fixed:true});             return false;         };                   $('btn2').onclick = function(){             artDialog({title:'google', url:'http://code.google.com/p/artdialog/', width:640, height:320});//url参数其实就是iframe             return false;         };                   $('btn3').onclick = function(){             artDialog({title:'功夫兔', content:'<object width="420" height="363"><param name="movie" value="http://www.tudou.com/v/bXwe7XgTxuA"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/bXwe7XgTxuA" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="363"></embed></object>', fixed:true});             return false;         };                   $('btn4').onclick = function(){             artDialog({content:'你人品稳定么？', fixed:true, yesText:'我很稳定', style:'confirm'}, function(){alert('你是好人');}, function(){alert('你是坏人');});//style参数可以填写多个，用空格隔开。具体有什么请看皮肤css文件             return false;         };                   $('btn5').onclick = function(){             artDialog({content:'你是坏人', style:'alert', lock:true}, function(){});//lock参数就是锁屏，它会中断用户操作，用于显示非常重要的消息。慎用             return false;         };                   $('btn6').onclick = function(e){             //获取对象的坐标，让对话框在按钮附近弹出             var e = e || window.event,             _x,             _y;             if(e.pageX || e.pageY){                 _x = e.pageX;                 _y = e.pageY;             } else {                 _x = e.clientX + document.body.clientLeft;                 _y = e.clientY + Math.max(document.body.scrollTop, document.documentElement.scrollTop);             };                           var _this = this;             artDialog({id:'menu_4834783',content:'<input style="width:200px;" id="M_dfd" type="text" value="hello world!" />',x:_x, y:_y, style:'noTitle noBorder'}, function(){ _this.innerHTML = $('M_dfd').value; });//使用id参数，可以防止点击弹出多个对话框             return false;         };                   $('btn7').onclick = function(){             artDialog({content:'您收到 <strong>2</strong> 条消息', x:'right', y:'bottom', time:'100', fixed:true});//x和y坐标可以使用关键字，当然也可以使用数字             return false;         };         //--------------------------ardDialog演示脚本结束------------------------------//                           //皮肤切换(不支持IE6，因为png皮肤的缘故)         if (!isIE6) {             function mySkin(s){                 $('artDialogSkin').href = s;             };             $('skin_0').click();             $('skin_0').onclick = function(){                 mySkin('skin/aero/aero.css');             };             $('skin_1').onclick = function(){                 mySkin('skin/chrome/chrome.css');             };             $('skin_2').onclick = function(){                 mySkin('skin/facebook/facebook.css');             };             $('skin_3').onclick = function(){                 mySkin('skin/mini/mini.css');             };             $('skin_4').onclick = function(){                 mySkin('skin/aero/aero.css');                 $('skin_0').click();                 artDialog({content:'自己动手，丰衣足食', lock:true});             };             $('showBg').onclick = function(){                 if (!$('test_3544')) {                     document.getElementsByTagName('body')[0].className = 'showBg';                     artDialog({id:'test_3544', content:'<div id="topMenu" style="background:#000; width:200px; height:2em;line-height:2em;text-align:center; filter:alpha(opacity=70); opacity:0.7;">[<a href="#" style="color:#FFF" onclick="showWin();return false">打开新对话框</a>]  [<a id="bgCloseBtn" href="#" style="color:#FFF" onclick="bgShow();return false">关闭</a>]</div>', x:'left', y:'top', style:'noSkin', fixed:true});                 } else {                     bgShow();                 };                 return false;             };         };                   //运行代码[不支持Chrome]         $('runCodeBtn').onclick = function(){             var fn = $('runCode').value;             $('runCodeDiv').innerHTML = '<iframe style="display:none" id="runCodeIframe"></iframe>';             var fw = $('runCodeIframe').contentWindow;             var f = fw.document;             f.contentEditable = true;             //f.open();             f.writeln('<!DOCTYPE><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">try{window.parent.'+fn+'}catch(e){alert(e.description);};</script><body></body></html>');             //f.close();             return false;         };                             var mailName = 'admin' + '@' + 'plane' + 'art' + '.cn';         $('myMail').innerHTML = mailName;     });   })();   //显示一个新对话框 function showWin(){             artDialog({content:'欢迎使用 "artDialog" 对话框组件！', fixed:true, lock:false,style:'succeed'}, function(){artDialog({title:' ', content:'谢谢观赏', lock:true, time:2})}); };   //显示背景 function bgShow(){     var body = document.getElementsByTagName('body')[0];     if(body.className != 'showBg') {         body.className = 'showBg';         document.getElementById('bgCloseBtn').innerHTML = '关闭背景';     } else {         body.className = '';         document.getElementById('bgCloseBtn').innerHTML = '打开背景';     }; };