当前位置：首页 > article >正文

artDialog的使用笔记

article 2025/9/6 10:11:07

两个页面的交互：
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);
};