EasyUI Forum
October 16, 2025, 08:29:38 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Message Alert Window Question  (Read 21801 times)
tslatt
Jr. Member
**
Posts: 85



View Profile
« on: February 01, 2012, 02:08:02 PM »

I have a div wrapped around the content of my page like this:

Code:
<body id="home">
<div id="<%=skin%>" class="<%=skin%> apply-skin">
... all page content ...
</div>
</body>

The "skin" variable is replaced by the user's chosen skin. I allow them to choose from several color schemes, and use their choice to determine the colors used on all of the easyUI elements.

However, when I use $.messager.alert('... the message ...'); to pop up a message, easyUI appends the message div inside the <body>, but outside of my "skin" div. Therefore, it doesn't have the chosen color applied.

Is there some way that I can make the message window div get created within my "skin" div?

Logged
tslatt
Jr. Member
**
Posts: 85



View Profile
« Reply #1 on: February 02, 2012, 12:56:47 PM »

If anyone's interested, I did find the answer. I had to rewrite parts of jquery.easyui.min.js to implement it. My updates are below, with my changes indicated with the comment "TAS EDITS".

Code:
	$.fn.window = function (_1c6, _1c7) {
if (typeof _1c6 == "string") {
var _1c8 = $.fn.window.methods[_1c6];
if (_1c8) {
return _1c8(this, _1c7);
} else {
return this.panel(_1c6, _1c7);
}
}
_1c6 = _1c6 || {};
return this.each(function () {
var _1c9 = $.data(this, "window");
if (_1c9) {
$.extend(_1c9.options, _1c6);
} else {
_1c9 = $.data(this, "window", {
options: $.extend({}, $.fn.window.defaults, $.fn.window.parseOptions(this), _1c6)
});
if (!_1c9.options.inline) {
/* ///// TAS EDITS ///////////////////////////////////////////////////////// */
if ($(".apply-skin").length) {//if a "skin" div exists
$(this).appendTo("div.apply-skin");
}//end if a "skin" div exists
else {//else the "skin" div doesn't exist
$(this).appendTo("body");
}//end else the "skin" div doesn't exist
/* ///// END TAS EDITS ///////////////////////////////////////////////////// */
}
}
_1ba(this);
_1c3(this);
});
};

function _1ec(_1ed, _1ee, _1ef) {
/* ///// TAS EDITS ///////////////////////////////////////////////////////// */
var win;
if ($(".apply-skin").length) {//if a "skin" div exists
//alert("1");
win = $("<div class=\"messager-body\"></div>").appendTo("div.apply-skin");//place the messager div in it
}//end if a "skin" div exists
else {//else the "skin" div doesn't exist
//alert("2");
win = $("<div class=\"messager-body\"></div>").appendTo("body");//place the messager div in the <body>
}//end else the "skin" div doesn't exist
/* ///// END TAS EDITS ///////////////////////////////////////////////////// */
win.append(_1ee);
if (_1ef) {
var tb = $("<div class=\"messager-button\"></div>").appendTo(win);
for (var _1f0 in _1ef) {
$("<a></a>").attr("href", "javascript:void(0)").text(_1f0).css("margin-left", 10).bind("click", eval(_1ef[_1f0])).appendTo(tb).linkbutton();
}
}
win.window({
title: _1ed,
noheader: (_1ed ? false : true),
width: 300,
height: "auto",
modal: true,
collapsible: false,
minimizable: false,
maximizable: false,
resizable: false,
onClose: function () {
setTimeout(function () {
win.window("destroy");
}, 100);
}
});
win.window("window").addClass("messager-window");
win.children("div.messager-button").children("a:first").focus();
return win;
};
$.messager = {
show: function (_1f1) {
var opts = $.extend({
showType: "slide",
showSpeed: 600,
width: 250,
height: 100,
msg: "",
title: "",
timeout: 4000
}, _1f1 || {});
/* ///// TAS EDITS ///////////////////////////////////////////////////////// */
var win;
if ($(".apply-skin").length) {//if a "skin" div exists
win = $("<div class=\"messager-body\"></div>").html(opts.msg).appendTo("div.apply-skin");//place the messager div in it
}//end if a "skin" div exists
else {//else the "skin" div doesn't exist
$("<div class=\"messager-body\"></div>").html(opts.msg).appendTo("body");//place the messager div in the <body>
}//end else the "skin" div doesn't exist
/* ///// END TAS EDITS ///////////////////////////////////////////////////// */
win.window({
title: opts.title,
width: opts.width,
height: opts.height,
collapsible: false,
minimizable: false,
maximizable: false,
shadow: false,
draggable: false,
resizable: false,
closed: true,
onBeforeOpen: function () {
show(this, opts.showType, opts.showSpeed, opts.timeout);
return false;
},
onBeforeClose: function () {
hide(this, opts.showType, opts.showSpeed);
return false;
}
});
win.window("window").css({
left: "",
top: "",
right: 0,
zIndex: $.fn.window.defaults.zIndex++,
bottom: -document.body.scrollTop - document.documentElement.scrollTop
});
win.window("open");
},
alert: function (_1f2, msg, icon, fn) {
var _1f3 = "<div>" + msg + "</div>";
switch (icon) {
case "error":
_1f3 = "<div class=\"messager-icon messager-error\"></div>" + _1f3;
break;
case "info":
_1f3 = "<div class=\"messager-icon messager-info\"></div>" + _1f3;
break;
case "question":
_1f3 = "<div class=\"messager-icon messager-question\"></div>" + _1f3;
break;
case "warning":
_1f3 = "<div class=\"messager-icon messager-warning\"></div>" + _1f3;
break;
}
_1f3 += "<div style=\"clear:both;\"/>";
var _1f4 = {};
_1f4[$.messager.defaults.ok] = function () {
win.dialog({
closed: true
});
if (fn) {
fn();
return false;
}
};
_1f4[$.messager.defaults.ok] = function () {
win.window("close");
if (fn) {
fn();
return false;
}
};
var win = _1ec(_1f2, _1f3, _1f4);
},
confirm: function (_1f5, msg, fn) {
var _1f6 = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<div style=\"clear:both;\"/>";
var _1f7 = {};
_1f7[$.messager.defaults.ok] = function () {
win.window("close");
if (fn) {
fn(true);
return false;
}
};
_1f7[$.messager.defaults.cancel] = function () {
win.window("close");
if (fn) {
fn(false);
return false;
}
};
var win = _1ec(_1f5, _1f6, _1f7);
},
prompt: function (_1f8, msg, fn) {
var _1f9 = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<br/>" + "<input class=\"messager-input\" type=\"text\"/>" + "<div style=\"clear:both;\"/>";
var _1fa = {};
_1fa[$.messager.defaults.ok] = function () {
win.window("close");
if (fn) {
fn($(".messager-input", win).val());
return false;
}
};
_1fa[$.messager.defaults.cancel] = function () {
win.window("close");
if (fn) {
fn();
return false;
}
};
var win = _1ec(_1f8, _1f9, _1fa);
win.children("input.messager-input").focus();
},
progress: function (_1fb) {
var opts = $.extend({
title: "",
msg: "",
text: undefined,
interval: 300
}, _1fb || {});
var _1fc = {
bar: function () {
/* ///// TAS EDITS ///////////////////////////////////////////////////////// */
if ($(".apply-skin").length) {//if a "skin" div exists
return $("body>div.apply-skin>div.messager-window").find("div.messager-p-bar");
}//end if a "skin" div exists
else {//else the "skin" div doesn't exist
return $("body>div.messager-window").find("div.messager-p-bar");
}//end else the "skin" div doesn't exist
/* ///// END TAS EDITS ///////////////////////////////////////////////////// */
},
close: function () {
var win = $("body>div.messager-window>div.messager-body");
if (win.length) {
if (win[0].timer) {
clearInterval(win[0].timer);
}
win.window("close");
}
}
};
if (typeof _1fb == "string") {
var _1fd = _1fc[_1fb];
return _1fd();
}
var _1fe = "<div class=\"messager-progress\"><div class=\"messager-p-msg\"></div><div class=\"messager-p-bar\"></div></div>";
var win = _1ec(opts.title, _1fe, null);
win.find("div.messager-p-msg").html(opts.msg);
var bar = win.find("div.messager-p-bar");
bar.progressbar({
text: opts.text
});
win.window({
closable: false
});
if (opts.interval) {
win[0].timer = setInterval(function () {
var v = bar.progressbar("getValue");
v += 10;
if (v > 100) {
v = 0;
}
bar.progressbar("setValue", v);
}, opts.interval);
}
}
};
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #2 on: February 06, 2012, 08:22:41 PM »

Maybe we can use the 'onOpen' event to move the window to what container we want:
Code:
$.fn.window.defaults.onOpen = function(){
$(this).window('window').appendTo('div.apply-skin');
};
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!