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