artDialog的使用笔记

两个页面的交互：
A页面：点击上传图片，弹出B页面并传递一个ID过去，

$("#UpImg").click(function() {
    if($("#ddlHotelList").val()!="-选择酒店-"){
    $(this).attr('disabled', false);
        // 把hotelId传递给图片上传页面
        art.dialog.data('hotelId', $("#lblHotelID").html()); // 存储数据
        art.dialog.open('/SystemManage/Hotel/ImageUp.aspx', {
            id: 'AAA',
            close: function() {
                var bValue = art.dialog.data('returnHotelId'); // 读取页面返回的数据
                if (bValue !== undefined){
                   alert("我回来了:"+bValue);
                }
            }
        },
        false);
    }

B页面：点击确定按钮，关闭并返回一个参数到主界面。

<title>图片上传</title>
    <script src="http://www.cnblogs.com/js/jquery1.7.0.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/WebJs/artDialog/jquery.artDialog.source.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/WebJs/artDialog/plugins/iframeTools.source.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function(){
        alert("这是从主页过来的酒店ID："+art.dialog.data('hotelId'));// 获取由主页面传递过来的数据
        $("#butOk").click(function(){
           art.dialog.data('returnHotelId', art.dialog.data('hotelId'));// 存储数据
           art.dialog.close();
        });
      })
    </script>

点击“关闭”按钮后返回数据到A页面，可是当用户点击叉叉的时候，就返回不了了。我尝试过如何监听close之类的事件，以让关闭的时候，不论是点击“确定”关闭，还是点击叉叉关闭，都执行相同的程序。可是无果，最后只能用css在页面哪里，把头部的叉叉和标题都隐藏了。.aui_titleBar{ display:none;}

ArtDialog跨iframe显示，在父页面引入artDialog的css和jquery.artDialog.js，在子页面使用art.dialog.open打开一个网页即可实现跨iframe显示。

对jquery.artDialog.source.js的修改，解决：在iframe里面的时候定位失败。（错误场景：iframe自适应高度后页面的height变得很大，而art是垂直居中显示，而不是可视区域的垂直显示，so）

//--------modify cat_qin 2015-4-2
function ResizePositionIframe(){
  if (self.frameElement && self.frameElement.tagName == "IFRAME") {
      $(".aui_state_focus").css("top", $(parent.window).scrollTop() + $(parent.window).height()*0.1);
  }
}

在_init里添加此方法判断一下

_init: function (config) {
        var that = this, DOM,
            icon = config.icon,
            iconBg = icon && (_isIE6 ? {png: 'icons/' + icon + '.png'}
            : {backgroundImage: 'url(\'' + config.path + '/skins/icons/' + icon + '.png\')'});
        
        that.closed = false;
        that.config = config;
        that.DOM = DOM = that.DOM || that._getDOM();
        
        DOM.wrap.addClass(config.skin);
        DOM.close[config.cancel === false ? 'hide' : 'show']();
        DOM.icon[0].style.display = icon ? '' : 'none';
        DOM.iconBg.css(iconBg || {background: 'none'});
        DOM.se.css('cursor', config.resize ? 'se-resize' : 'auto');
        DOM.title.css('cursor', config.drag ? 'move' : 'auto');
        DOM.content.css('padding', config.padding);
        
        that[config.show ? 'show' : 'hide'](true)
        that.button(config.button)
        .title(config.title)
        .content(config.content, true)
        .size(config.width, config.height)
        .time(config.time);
        
        config.follow
        ? that.follow(config.follow)
        : that.position(config.left, config.top);
        
        that.zIndex().focus();
        config.lock && that.lock();
        
        that._addEvent();
        that._ie6PngFix();
        _box = null;
        
        config.init && config.init.call(that, window);

          //top为默认值的时候自动调整
          if(config.top=="38.2%"){
          ResizePositionIframe();
          }

        return that;
    },

在插件里定义一个tips函数，之后即可使用这个简洁的提示了。

/**
* 短暂提示
* @param {String} 提示内容
* @param {Number} 显示时间 (默认1.5秒)
* @param {Number} 图标（默认无图标，不传参无图标）
*/
artDialog.tips = function (content, time, iconName) {
    return artDialog({
        id: 'Tips',
        title: false,
        cancel: false,
        fixed: false,
        lock: true,
        icon: iconName,
        content: content,
        opacity: 0.3
    }).time(time || 1.5);
};

使用方法：art.dialog.tips("你好", 3, "face-smile");