 Show Posts
|
|
Pages: [1] 2 3 ... 6
|
|
1
|
General Category / EasyUI for jQuery / Panel Tools are Sometimes Added, Sometimes Not
|
on: February 06, 2012, 03:23:00 PM
|
I'm using the panel's "tools" property to add a "reload" button to each panel to refresh that panel's ajax content. My panels are placed in a staging area div and then moved into a portal when the portal is initialized. If there is only one panel in the portal that has a "reload" button, so far it seems to work ok. However, I have an example that has three panels and each has a reload button. Each time the portal loads, only two out of three of the panels have the "reload" button -- and not always the same two! Here's how I create my three panels and their tools: <div id="w001" class="easyui-panel pdiv" title="Test Tables" collapsible="true" closable="true" maximizable="true" closed="true" collapsed="true" href="test-tables.asp" tools="#w001tools"></div>
<div id="w001tools"><a href="#" class="icon-refresh" onclick="javascript:$('#w001').panel('refresh', 'test-tables.asp');"></a></div>
<div id="w011" class="easyui-panel pdiv" title="Test Ajax Form Submission" collapsible="true" closable="true" maximizable="true" closed="true" collapsed="true" href="test-namepoc.asp" tools="#w011tools"></div>
<div id="w011tools"><a href="#" class="icon-refresh" onclick="javascript:$('#w011').panel('refresh', 'test-namepoc.asp');"></a></div>
<div id="w012" class="easyui-panel pdiv" title="Test Ajax Form Results" collapsible="true" closable="true" maximizable="true" closed="true" collapsed="true" href="test-namerefreshpoc.asp" tools="#w012tools"></div>
<div id="w012tools"><a href="#" class="icon-refresh" onclick="javascript:$('#w012').panel('refresh', 'test-namerefreshpoc.asp');"></a></div>
Having a reload button on a panel is pretty important when you have ajax content, so just that panel can be reloaded when needed without having to reload everything else. |
|
|
|
|
3
|
General Category / EasyUI for jQuery / Re: Message Alert Window Question
|
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". $.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);
}
}
};
|
|
|
|
|
4
|
General Category / EasyUI for jQuery / Message Alert Window Question
|
on: February 01, 2012, 02:08:02 PM
|
I have a div wrapped around the content of my page like this: <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? |
|
|
|
|
7
|
General Category / Bug Report / Re: Panel onMove event does not fire.
|
on: January 27, 2012, 08:04:19 AM
|
|
That worked for getting the onMove to work. Adding that drag enabling bit after setting up the panel events allowed me to do the panel event setup *after* the panels are added to the portal, rather than before. Then, the onMove event would fire.
Thanks!!!!
|
|
|
|
|
8
|
General Category / Bug Report / Re: Panel onMove event does not fire.
|
on: January 26, 2012, 08:09:34 AM
|
I downloaded the updated portal plugin, installed it, and tried again. The onMove function still does not trigger when a panel is moved. I set up the panel events on each panel while they are in the staging area, before I add them to the portal, because for some unknown reason, doing it after they are in the portal makes them undraggable. All of the other events I've tried seem to be working normally, but even with the updated portal js, onMove still doesn't do anything. //set up panel events for all panels in this tab, *before* adding them to the portal (doing it after breaks dragging in the portal)
$('#' + pID + uID).next(".staging").find(".easyui-panel").each(function(index) {//for all panels in the staging area
$(this).panel({//for this panel
onLoad: function() {//do this when a panel's href is loaded (ajax)
//my actions here...
},//end on panel ajax load
onOpen: function() {//do this on panel open
//my actions here...
},//end on panel open
onClose: function() {//do this on panel close
//my actions here...
},//end on panel close
onCollapse: function() {//do this on panel expand
//my actions here...
},//end on panel collapse
onExpand: function() {//do this on panel expand
//my actions here...
},//end on panel expand
onMaximize: function() {//do this on panel maximize
//my actions here...
},//end on panel maximize
onRestore: function() {//do this on panel restore (unmaximized)
//my actions here...
},//end on panel restore (unmaximized)
onMove: function(left, top) {//do this on panel move
alert("moved");
},//end on panel move
onResize: function(width, height) {//do this on panel resize
//my actions here...
}//end on panel resize
});//end for this panel
});//end for all panels
//end add events to all panels
|
|
|
|
|
9
|
General Category / EasyUI for jQuery / Re: how to add maximise icon and functionality to a panel (portal)
|
on: January 24, 2012, 08:26:05 AM
|
|
I posted about the onMove not working in the bug reports forum. What we really need though, in addition to onMove actually working, is an onBeforeMove event. onMove is supposed to fire after the move, so it could not be used to collapse the panels before moving, but could be used to re-expand them after the move.
There might also be some way to use onBeforeDrag and onStopDrag to collapse/expand the panels when moving, but I'm not sure how just yet.
Let me know if you find another solution. I'm still working on the portal functionality, so I haven't added real data to my panels yet. I'm sure once I do, I'll have the same focus issue, as some of my panels will be holding a lot of data.
|
|
|
|
|
10
|
General Category / Bug Report / Panel onMove event does not fire.
|
on: January 24, 2012, 08:19:43 AM
|
See http://www.jeasyui.com/forum/index.php?topic=257.0Bug:The onMove event for a panel does not fire in easyUI 1.2.5. This was tested for panels that are within the portal layout. An alert was added to the panel onMove event, but the alert is never triggered when a panel is moved around within the portal. Feature Request:It would be helpful if there was an onBeforeMove event for panels for use within the portal layout. It has been found that when moving a panel within a portal, if that panel contains a great amount of data, such as a datagrid or a graph, the panel can lose focus when being dragged -- unless it is collapsed first. Having an onBeforeMove event for panels would allow us to collapse a panel before it's moved. Then, the onMove event, once it's working, could be used to re-expand the panel after it is moved. |
|
|
|
|
11
|
General Category / EasyUI for jQuery / Re: how to add maximise icon and functionality to a panel (portal)
|
on: January 19, 2012, 08:19:01 AM
|
|
Setting collapsed to true won't actually collapse the panel. That's only used when first creating the panel. You'll need to do this to collapse an already existing panel:
$(this).panel("collapse");
or
$('#yourpanelid').panel("collapse");
I tried putting this in the onMove event and nothing happened, however. So, I tried putting alert("hi") in the onMove event, and that also didn't do anything. I think there may be a bug there... I don't think the onMove is firing at all!
|
|
|
|
|
12
|
General Category / EasyUI for jQuery / Re: how to add maximise icon and functionality to a panel (portal)
|
on: January 19, 2012, 07:43:37 AM
|
I don't create my panels/widgets dynamically like you do, but here's my method for adding a refresh button. When I add the panel to the page, I also add the 'tools' div and set its action in an onclick instead of within the main jquery script. That way I can specify which panel id to refresh: <div id="w020<%=DCode%>" class="easyui-panel pdiv" title="Test 20" collapsible="true" closable="true" maximizable="true" closed="true" collapsed="true" href="test-ajax-id.asp?id=<%=DCode%>" tools="#w020tools<%=DCode%>"></div>
<div id="w020tools<%=DCode%>"><a href="#" class="icon-refresh" onclick="javascript:$('#w020<%=DCode%>').panel('refresh', 'test-ajax-id.asp?id=<%=DCode%>');"></a></div> I also had a problem where dragging suddenly stopped, after I upgraded to the latest version of easyUI. I don't know if my problem was caused by the same reason as yours. My problem was because I had upgraded the .js file, but forgot to include the latest updates to the css. After modifying the css to the latest version, dragging worked again. |
|
|
|
|
13
|
General Category / EasyUI for jQuery / Re: Text beside tabs?
|
on: January 13, 2012, 12:46:30 PM
|
If you don't plan to have any messages next to the subtabs, give your message div a class, and then hide it for subtabs: var msg = $('<div class="tabmsg"></div>').appendTo($('#tt').find('div.tabs-wrap'));
msg.css({
position:'absolute',
right:0,
top:0,
height:'24px',
lineHeight:'24px',
paddingRight:'3px'
}).text('Message');
#tab-container-admin .tabmsg { display: none; }
|
|
|
|
|
14
|
General Category / Bug Report / Re: Tab onSelect is fired onLoad
|
on: January 13, 2012, 12:32:24 PM
|
Thanks for posting this. I'm having trouble understanding it, though. Could you please explain the two lines that start with "eval"? I'm not sure what those are doing. Thank you so much! $("#tab-container").tabs({
"onSelect": function(title){
if(lastTab != null){
eval(lastTab + "_OnUnload()")
}
eval(util_Simplify(title) + "_OnSelect()");
lastTab = util_Simplify(title);
}
});
|
|
|
|
|
15
|
General Category / EasyUI for jQuery / How to change the column configuration for a portal on the fly?
|
on: January 11, 2012, 11:07:53 AM
|
|
I have a 3-column portal where each column has equal widths. I have a form that allows the user to change the number of columns in the portal (1, 2, or 3) and change the relative widths of the columns (for example, 2 skinny columns and 1 wide column).
This works great IF I allow a submit of the form to reload the page, because the column configuration is set up before the portal is initialized and before the panels are added to the portal. However, I need to be able to submit the form without reloading the whole page.
I put a click function on the submit button instead of doing a page reload on submit. That part works fine. What I am having trouble with is how to apply the column changes to a portal that already exists on the page.
Specifically:
- Is there a way to show/hide columns and change column widths on an existing portal, or does the portal have to be reloaded somehow?
I would really appreciate any help anyone can give me.
|
|
|
|
|
