东莞邮政局网销项目artdialog心得

网销项目使用的弹框是artdialog

artDialog是一个精巧的web对话框组件，压缩后只有十多KB，并且不依赖其他框架。

特点：

能够自适应内容

artDialog的特殊布局结构能够原生的适应内容变化，你不必像以前一样去考虑消息内容大小，她能自己去适应内容。当然她仍然可以接受一个固定高宽的参数，她能够防止内容溢出或截断，同时也不会产生难看的滚动条，甚至能够自动处理文本对齐方式。

优雅灵活的接口

artDialog很用心的设计了她的接口，她拥有丰富的配置参数控制初始化状态，并且每次调用后还会返回一些实用的内部控制接口，你可以先用 变量把它保存起来，需要的时候在其他地方自由控制对话框。

精心设计的UI机制

artDialog采用九宫格的XHTML结构，CSS类钩子比较丰富，可以定制类似 桌面软件般精致的皮肤。她支持多皮肤共存，这些皮肤的背景图片在页面载入时就会被 缓存好，调用时几乎感觉不到延时。

细致的用户体验

她支持Esc 快捷键关闭；如果对话框内容有输入控件她将支持Ctrl+Enter提交；智能给按钮添加焦点；小对话框自动采用黄金比例垂直居中；超过指定面积大小的对话框拖动自动采用替身挪动；自动计算边界防止超出可操作范围……

跨浏览器兼容

兼容：IE6+、Firefox、Chrome、Safari、Opera，浏览器版本越高体验越好。并且IE6下也能支持 现代浏览器的静止定位(fixed)，支持覆盖下拉控件。

与jQuery协作

artDialog所有功能是不需要其他库就可以使用的，但是如果页面引入了jQuery，artDialog会奉献自己成为它的插件，利用它增强自身功能。

用法:它和大多数插件一样，十分方便，官网上面有详细的说明 http://www.planeart.cn/demo/artDialog/_doc/API.html

这是我的用法

function initAdd() {
        var dialog = art.dialog({
	id: 'brand_init_add',
	padding: 0,
	drag: true,
	lock:true,
        resize: false,
	title: '新增产品品牌',
        ok: function () {
          if($("#addBrandForm").valid()){
            subAddForm(dialog);
          }
          return false;
       },
      cancelVal: '关闭',
      cancel: true
     });


   // jQuery ajax   
    $.ajax({
       url: '${ctx}/product/brand/initAdd?parentId=${parentId}',
       success: function (data) {
          dialog.content(data);
        },
       cache: false
    });
  }

可是artdialog有种情况有bug，比如在弹窗的那个页面里面要先执行js语句，如弹窗的页面是一个ueditor编辑器，使用art.dialog 貌似不会加载ueditor 这时候就要使用另外一种方法art.dialog.open方法

我的使用方法：

function initAdd(){
      art.dialog.open(
       "${ctx}/product/info/initAdd?parentId=${parentId}",
       {lock: true, title: "新增产品信息", width:'80%',
       close: function(){
      }//close fn
      });
    return false;
   };

在html中获取iframe里面的属性值：$(window.frames["right"].document).find("#selectedUl");