artDialog对话框组件使用心得，其功能完善，接口友好，提供多套皮肤，支持iframe跨页面扩展

官方API非常详细，地址在底部，以下我只结合自己的使用情况写下笔记，加深记忆，便于日后再次使用。

1、JS引入：
 　单独引入：（通过 art.dialog 使用）

1	< script src = "artDialog/artDialog.js?skin=default" ></ script >

 　作为JQuery组件：（通过 $.dialog 使用）

1	< script src = "artDialog/jquery.artDialog.js?skin=default" ></ script >

 　skin=xxxxx表示采用的皮肤，支持default,aero,chrome,opera,simple,idialog,twitter,blue,black,green，结合官方API预览各皮肤后自行选择即可。
 　若采用iframe来填充弹出层，加载iframeTools插件将可以进行更多交互操作

1	< script src = "artDialog/plugins/iframeTools.js" ></ script >

2、全局默认参数定义：

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

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

3、个人使用实例：
 　（1）json提交指令，artDialog显示等待，接收返回指令完成刷新

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

var waiting=$.dialog({      id: 'Waiting' ,      title: '系统正在处理您的请求　　' ,      lock: true ,      background: '#fff' ,      opacity: 0.5 }); $.getJSON(url, function (data){      if (1*data.Result === 0){          waiting.close();          $.dialog({              title: '失败' ,              icon: 'error' ,              content: data.Message,              lock: true ,              background: '#fff' ,              opacity: 0.5          });      }      else if (1*data.Result === 1){          waiting.close();          var tempMsg=(!data.Message)? '操作成功！' :data.Message;          $.dialog({              title: '成功' ,              icon: 'succeed' ,              content: tempMsg+ ' <b id="BTiming">3</b>秒后自动刷新' ,              lock: true ,              background: '#fff' ,              opacity: 0.5,              init: function (){                  var i = 3;                  var fn = function () {                      !i && location.reload();                      $( '#BTiming' ).text(i);                      i --;                  };                  timer = setInterval(fn, 1000);                  fn();              },              button: [                  {                      name: '立即刷新' ,                      callback: function () {                          location.reload();                          return false ;                      },                      focus: true                  }              ]          });      } });

 　（2）链接进行确定询问

1 2 3 4 5 6 7 8 9

$( "a" ).click( function (){      $ this =$( this );      $.dialog.confirm( '确认要' +$( this ).text()+ '？' , function (){          location.href=$ this .prop( 'href' );      },      function (){      });      return false ; });

 　（3）审核操作，若不通过，填写审核不通过的原因

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

$( "a" ).click( function (){      $ this =$( this );      $.dialog({          title: '审核' ,          content: '请选择审核结果？' ,          icon: 'question' ,          button: [              {                  name: '通过' ,                  focus: true ,                  callback: function (){                      location.href=$ this .prop( 'href' )+ "?audit=1" ;                  }              },              {                  name: '不通过' ,                  callback: function (){                      this .content( '不通过原因： <input type="text" name="auditreason" value=""/>' );                      this .button({                          name: '通过' ,                          focus: false ,                          disabled: true                      });                      this .button({                          name: '不通过' ,                          focus: true ,                          callback: function (){                              location.href=$ this .prop( 'href' )+ "?audit=0&reason=" +$( 'input[name="auditreason"]' ).val();                          }                      });                      return false ;                  }              }          ]      });      return false ; });

官方API： http://www.planeart.cn/demo/artDialog/_doc/API.html