Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
ZK 8 x EL 3.0
4guest172.71.215.28smcii2Mar 13, 2025 10:17:02 AMlinkZK 8 x EL 3.0
3guest172.71.215.27smcii2Mar 13, 2025 10:16:37 AMlinkZK 8 x EL 3.0
2guest172.71.215.28smcii2Mar 13, 2025 10:16:23 AMlinkgrid deselect
1guest172.71.155.44d0eqcvMar 13, 2025 8:30:45 AMlinkAnother new ZK fiddle
22guest172.71.155.4320846g3Mar 13, 2025 8:24:21 AMlinkAnother new ZK fiddle
21guest172.71.155.4420846g3Mar 13, 2025 8:23:21 AMlinkAnother new ZK fiddle
20guest172.71.155.4420846g3Mar 13, 2025 8:22:52 AMlinkAnother new ZK fiddle
19guest172.71.155.4420846g3Mar 13, 2025 8:22:31 AMlinkAnother new ZK fiddle
18guest172.71.155.4420846g3Mar 13, 2025 8:22:18 AMlinkAnother new ZK fiddle
17guest162.158.167.4320846g3Mar 13, 2025 8:00:27 AMlinkwindow
1guest162.158.19.1301krd6n2Feb 5, 2025 12:19:32 PMlinkresources
index.zulzul<?script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"?>
<zk xmlns:c="client">
<?link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css"?>
<?link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"?>
<?script src="https://github.com/niklasvh/html2canvas/releases/download/v1.4.1/html2canvas.min.js"?>
<?script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"?>
<style>
.ui-effects-transfer {
border: 2px dotted black;
background:
/* On "top" */
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
#ccc 10px,
#ccc 20px
),
/* on "bottom" */
linear-gradient(
to bottom,
#eee,
#999
);
box-shadow: 0px 0px 8px #000000;
}
</style>
<script><![CDATA[
/**/
zk.afterLoad('zk', function() {
zk.eff.Actions.fooIn = function (n, opts) {
//your own effect to make the node visible, such as
//zk(n).slideIn(this, opts);
console.log("anim");
console.log(n);
console.log(opts);
n.style.display = "block";
animateElementById(n.id, 'animate__bounceIn', opts["duration"]);
};
zk.eff.Actions.fooOut = function (n, opts) {
//your own effect to make the node visible, such as
//zk(n).slideIn(this, opts);
console.log("anim");
console.log(n);
console.log(opts);
//n.style.display = "block";
animateElementById(n.id, 'animate__bounceOut', opts["duration"]);
};
zk.eff.Actions.animatecss = function (n, opts) {
//your own effect to make the node visible, such as
//zk(n).slideIn(this, opts);
console.log("animcss");
console.log(n);
console.log(opts);
animateElementById(n.id, opts["animation"], opts["duration"], opts["visible"]);
};
});//zk.afterLoad
]]></script>
<script type="text/javascript">
<![CDATA[
function animateElementById(elementId, animationName, animationDuration, elementVisible)
{
var documentElement = document.getElementById(elementId);
var animatedString = "animate__animated";
function handleAnimationEnd()
{
documentElement.classList.remove(animatedString, animationName);
documentElement.removeEventListener('animationend', handleAnimationEnd);
if (elementVisible != null)
{
if (!elementVisible)
{
documentElement.style.display = "none";
}
}
}
if (elementVisible != null)
{
if (elementVisible)
{
documentElement.style.display = "block";
}
}
documentElement.style.setProperty('--animate-duration', animationDuration);
documentElement.classList.add(animatedString, animationName);
documentElement.addEventListener('animationend', handleAnimationEnd);
}
function transferElementById(fromElementId, toElementId)
{
var fSelector = "#" + fromElementId;
var tSelector = "#" + toElementId;
$(fSelector).transfer(
{
to: $(tSelector),
duration: 1000
});
}
function minimizeElementById(fromElementId, toElementId, callback)
{
var fSelector = "#" + fromElementId;
var tSelector = "#" + toElementId;
$(fSelector).transfer(
{
to: $(tSelector),
duration: 1000
});
callback.setMinimized(true);
}
function restoreElementById(fromElementId, toElementId, callback)
{
callback.setMinimized(false);
var fSelector = "#" + fromElementId;
var tSelector = "#" + toElementId;
var documentElement = document.getElementById(toElementId);
documentElement.style.visibility = "hidden";
$(fSelector).transfer(
{
to: $(tSelector),
duration: 1000
},
function()
{
documentElement.style.visibility = "visible";
});
}
function htmlToCanvas(fromElementId)
{
var fSelector = "#" + fromElementId;
var eElement = document.getElementById(fromElementId);
/*
html2canvas($(fSelector), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
*/
html2canvas(eElement).then(function(canvas) {
document.body.appendChild(canvas);
});
}
function htmlToCanvas1(fromElementId)
{
var node = document.getElementById(fromElementId);
htmlToImage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
function htmlToCanvas2(fromElementId)
{
var start = new Date().getTime();
htmlToCanvas(fromElementId);
var end = new Date().getTime();
var time = end - start;
console.log("time " + time);
var start1 = new Date().getTime();
htmlToCanvas1(fromElementId);
var end1 = new Date().getTime();
var time1 = end1 - start1;
console.log("time1 " + time1);
}
]]>
</script>
<button id="btn" label="open" onClick="win.setVisible(true);" />
<button id="btn1" label="close" onClick="win.setVisible(false);" />
<button id="btn2" label="animate 1" c:onClick="animateElementById(this.$f('win').uuid, 'animate__jello', '2s', null);" />
<button id="btn3" label="animate 2" c:onClick="animateElementById(this.$f('win').uuid, 'animate__rubberBand', '2s', null);" />
<button id="btn4" label="animate 3" c:onClick="animateElementById(this.$f('win').uuid, 'animate__swing', '2s', null);" />
<button id="btn5" label="animate 4" c:onClick="animateElementById(this.$f('win').uuid, 'animate__tada', '2s', null);" />
<button id="btn6" label="animate 5" c:onClick="jq('$win').hide().slideDown(1000);" />
<button id="btn7" label="animate 6" c:onClick="jq('$win').show().slideUp(1000);" />
<button id="btn8" label="animate 7" c:onClick="jq('$win').hide().fadeIn(1000);" />
<button id="btn9" label="animate 8" c:onClick="jq('$win').show().fadeOut(1000);" />
<button id="btn10" label="animate 9" c:onClick="jq('$win').slideToggle(1000);" />
<button id="btn11" label="minimize" c:onClick="minimizeElementById(this.$f('win').uuid, this.$f('btn11').uuid, this.$f('win'));" />
<button id="btn12" label="restore" c:onClick="restoreElementById(this.$f('btn12').uuid, this.$f('win').uuid, this.$f('win'));" />
<button id="htmlcanvas" label="htmlcanvas" c:onClick="htmlToCanvas(this.$f('win').uuid);" />
<button id="htmlcanvas1" label="htmlcanvas1" c:onClick="htmlToCanvas1(this.$f('win').uuid);" />
<button id="htmlcanvas2" label="htmlcanvas2" c:onClick="htmlToCanvas2(this.$f('win').uuid);" />
<div>test</div>
<window id="win" visible="false" minimizable="true" maximizable="true" closable="true" border="normal" title="hello"
action="show: animatecss({animation: 'animate__bounceIn', duration: '2s', visible: true}); hide: animatecss({animation: 'animate__bounceOut', duration: '2s', visible: false})" height="300px" width="300px">
<div>Welcome to ZK Fiddle, run it right now!</div>
</window>
</zk>
window.css.dspcss<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
<%-- original --%>
.z-window-modal-shadow,
.z-window-overlapped-shadow,
.z-window-popup-shadow,
.z-window-embedded-shadow,
.z-window-highlighted-shadow {
border-radius: 5px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-moz-border-radius: 5px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.z-window-modal-shadow,
.z-window-highlighted-shadow {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}
.z-window-modal-resize-faker,
.z-window-overlapped-resize-faker,
.z-window-popup-resize-faker,
.z-window-embedded-resize-faker,
.z-window-highlighted-resize-faker,
.z-window-resize-faker {
position: absolute;
border: 1px dashed #1854C2;
overflow: hidden;
z-index: 60000;
left: 0;
top: 0;
background-color: #D7E6F7;
filter: alpha(opacity=50); <%-- IE --%>
opacity: .5;
}
.z-window-modal-move-ghost,
.z-window-overlapped-move-ghost,
.z-window-popup-move-ghost,
.z-window-highlighted-move-ghost,
.z-window-move-ghost {
position: absolute;
background: #D7E6F7;
overflow: hidden;
filter: alpha(opacity=65) !important; <%-- IE --%>
opacity: .65 !important;
cursor: move !important;
}
.z-window-modal-move-ghost dl,
.z-window-overlapped-move-ghost dl,
.z-window-popup-move-ghost dl,
.z-window-highlighted-move-ghost dl,
.z-window-move-ghost dl {
border: 1px solid #9F9F9F;
margin: 0; padding: 0;
overflow: hidden;
display: block;
background: #D7E6F7;
line-height: 0;
font-size: 0;
}
.z-window-embedded,
.z-window-modal,
.z-window-overlapped,
.z-window-popup,
.z-window-highlighted {
margin: 0;
padding: 0;
overflow: hidden;
zoom: 1;
}
.z-window-modal-tl-noborder,
.z-window-highlighted-tl-noborder,
.z-window-overlapped-tl-noborder,
.z-window-popup-tl-noborder,
.z-window-modal-bl-noborder,
.z-window-highlighted-bl-noborder,
.z-window-overlapped-bl-noborder,
.z-window-popup-bl-noborder {
display: none;
}
<%-- Top Left Corner --%>
.z-window-embedded-tl,
.z-window-modal-tl,
.z-window-highlighted-tl,
.z-window-overlapped-tl,
.z-window-popup-tl {
background: transparent no-repeat 0 top;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-corner.png')});
margin-right: 5px;
height: 5px;
font-size: 0;
line-height: 0;
zoom: 1;
}
.z-window-embedded-tl {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-corner.png')});
}
.z-window-popup-tl {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-pop-corner.png')});
}
<%-- Top Right Corner --%>
.z-window-embedded-tr,
.z-window-modal-tr,
.z-window-highlighted-tr,
.z-window-overlapped-tr,
.z-window-popup-tr {
background: transparent no-repeat right -10px;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-corner.png')});
position: relative;
height: 5px;
margin-right: -5px;
font-size: 0;
line-height:0;
zoom: 1;
}
.z-window-embedded-tr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-corner.png')});
}
.z-window-popup-tr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-pop-corner.png')});
}
<%-- Header Left --%>
.z-window-embedded-hl,
.z-window-modal-hl,
.z-window-highlighted-hl,
.z-window-overlapped-hl,
.z-window-popup-hl {
background: transparent no-repeat 0 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hl.png')});
padding-left: 6px;
zoom: 1;
}
<%-- Header Right --%>
.z-window-embedded-hr,
.z-window-modal-hr,
.z-window-highlighted-hr,
.z-window-overlapped-hr,
.z-window-popup-hr {
background: transparent no-repeat right 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hr.png')});
padding-right: 6px;
zoom: 1;
}
.z-window-embedded-hr, .z-window-embedded-hr-noborder {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-hr.png')});
}
<%-- Header Middle --%>
.z-window-embedded-hm,
.z-window-modal-hm,
.z-window-highlighted-hm,
.z-window-overlapped-hm,
.z-window-popup-hm {
background: transparent repeat-x 0 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hm.png')});
overflow: hidden;
zoom: 1;
}
<%-- Header --%>
.z-window-modal-header,
.z-window-popup-header,
.z-window-highlighted-header,
.z-window-overlapped-header,
.z-window-embedded-header {
overflow: hidden; zoom: 1; padding-bottom: 4px;
font-family: ${fontFamilyT};
font-size: ${fontSizeM}; font-weight: normal;
cursor: default;
}
.z-window-embedded-header a,
.z-window-embedded-header a:visited,
.z-window-embedded-header a:hover {
color: #222222;
}
.z-window-modal-header-move,
.z-window-highlighted-header-move,
.z-window-overlapped-header-move,
.z-window-popup-header-move {
cursor: move;
}
<%-- Body Content--%>
.z-window-embedded-cnt {
overflow: hidden;
zoom: 1;
}
.z-window-overlapped-cnt, .z-window-popup-cnt {
margin: 0;
padding: 4px;
background: white;
overflow: hidden;
zoom: 1;
}
.z-window-modal-cnt,
.z-window-highlighted-cnt,
.z-window-modal-cnt-noborder,
.z-window-highlighted-cnt-noborder,
.z-window-overlapped-cnt-noborder {
margin: 0;
padding: 2px;
background: white;
overflow: hidden;
zoom: 1;
}
.z-window-modal-cnt-noborder,
.z-window-highlighted-cnt-noborder,
.z-window-embedded-cnt-noborder,
.z-window-overlapped-cnt-noborder,
.z-window-popup-cnt-noborder {
border: 0;
overflow: hidden;
zoom: 1;
}
.z-window-popup-cnt-noborder {
margin: 0;
padding: 1px;
background: white;
}
<%-- Center Left --%>
.z-window-modal-cl,
.z-window-highlighted-cl,
.z-window-overlapped-cl {
background: transparent repeat-y 0 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-clr.png')});
padding-left: 6px;
zoom: 1;
}
<%-- Center Right --%>
.z-window-modal-cr,
.z-window-highlighted-cr,
.z-window-overlapped-cr {
background: transparent repeat-y right 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-clr.png')});
padding-right: 6px;
zoom: 1;
}
<%-- Center Middle --%>
<c:if test="${zk.ie < 8}">
.z-window-embedded-cm {
zoom: 1; <%-- fixed for B50-3315594.zul --%>
}
</c:if>
.z-window-modal-cm,
.z-window-highlighted-cm,
.z-window-overlapped-cm {
padding: 0;
margin: 0;
border: 1px solid #C5C5C5;
background: white;
}
<%-- Bottom Left --%>
.z-window-modal-bl,
.z-window-highlighted-bl,
.z-window-overlapped-bl {
background: transparent no-repeat 0 -5px;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-corner.png')});
height: 5px;
margin-right: 5px;
zoom: 1;
}
<%-- Bottom Right --%>
.z-window-modal-br,
.z-window-highlighted-br,
.z-window-overlapped-br {
background: transparent no-repeat right bottom;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-corner.png')});
height: 5px;
margin-right: -5px;
font-size: 0;
line-height:0;
zoom: 1;
}
.z-messagebox-window .z-window-modal-cnt,
.z-messagebox-window .z-window-highlighted-cnt {
padding: 17px;
padding-bottom: 15px;
}
.z-messagebox .z-label {
font-family: ${fontFamilyC};
font-size: ${fontSizeM};
color: #363636;
}
.z-messagebox-btn {
min-width: 48pt;
width: 100%;
}
.z-msgbox {
display: -moz-inline-box;
display: inline-block;
background-repeat: no-repeat;
vertical-align: top;
cursor: pointer;
border: 0;
width: 32px;
height: 32px;
}
.z-msgbox-question {
background-image: url(${c:encodeThemeURL('~./zul/img/msgbox/question-btn.png')});
}
.z-msgbox-exclamation {
background-image: url(${c:encodeThemeURL('~./zul/img/msgbox/warning-btn.png')});
}
.z-msgbox-information {
background-image: url(${c:encodeThemeURL('~./zul/img/msgbox/info-btn.png')});
}
.z-msgbox-error {
background-image: url(${c:encodeThemeURL('~./zul/img/msgbox/stop-btn.png')});
}
<%-- end of original --%>
<%-- Top, Bottom --%>
.z-window-overlapped-tl, .z-window-overlapped-tr,
.z-window-popup-tl, .z-window-popup-tr,
.z-window-overlapped-bl, .z-window-overlapped-br {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-corner.png')});
height: 6px;
}
.z-window-embedded-tl, .z-window-embedded-tr,
.z-window-embedded-bl, .z-window-embedded-br {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-corner.png')});
}
.z-window-modal-tl, .z-window-highlighted-tl,
.z-window-overlapped-tl, .z-window-popup-tl {
margin-right: 6px;
}
.z-window-modal-tr, .z-window-highlighted-tr,
.z-window-overlapped-tr, .z-window-popup-tr {
background-position: right -12px;
margin-right: -6px;
}
.z-window-modal-bl,
.z-window-highlighted-bl,
.z-window-overlapped-bl {
background-position: 0 -6px;
margin-right: 6px;
height: 6px;
}
.z-window-modal-br,
.z-window-highlighted-br,
.z-window-overlapped-br {
margin-right: -6px;
height: 6px;
position: relative; <%-- IE 6 --%>
}
<%-- Header --%>
.z-window-overlapped-hl,
.z-window-popup-hl {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hl.png')});
}
.z-window-embedded-hl{
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-hl.png')});
}
.z-window-overlapped-hr,
.z-window-popup-hr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hr.png')});
}
.z-window-embedded-hr{
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-hr.png')});
}
.z-window-overlapped-hm,
.z-window-popup-hm {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hm.png')});
}
.z-window-embedded-hm{
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-hm.png')});
}
.z-window-overlapped-cl,
.z-window-overlapped-cr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-clr.png')});
}
.z-window-embedded-cl,
.z-window-embedded-cr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-clr.png')});
}
.z-window-embedded-hm,
.z-window-overlapped-hm,
.z-window-popup-hm {
padding-left: 1px;
}
.z-window-embedded-cm,
.z-window-overlapped-cm {
border: solid #CCC 1px;
}
.z-window-popup-cnt {
border: solid #ACACAC 1px;
padding: 6px;
}
.z-window-embedded-header,
.z-window-modal-header,
.z-window-popup-header,
.z-window-highlighted-header,
.z-window-overlapped-header {
color: #363636;
padding-top: 3px;
padding-bottom: 6px;
}
<%-- Embedded Mold Frame --%>
.z-window-embedded-cnt {
margin: 0;
padding: 4px;
background: white;
overflow: hidden;
zoom: 1;
border: 0;
}
.z-window-embedded-cl {
background: transparent repeat-y 0 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-clr.png')});
padding-left: 6px;
zoom: 1;
}
.z-window-embedded-cr {
background: transparent repeat-y right 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-clr.png')});
padding-right: 6px;
zoom: 1;
}
.z-window-embedded-cm {
padding: 0;
margin: 0;
}
.z-window-embedded-bl {
background: transparent no-repeat 0 -5px;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-corner.png')});
height: 5px;
margin-right: 5px;
zoom: 1;
}
.z-window-embedded-br {
background: transparent no-repeat right bottom;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-corner.png')});
position: relative;
height: 5px;
margin-right: -5px;
font-size: 0;
line-height:0;
zoom: 1;
}
<c:if test="${zk.ie == 6}">
.z-window-embedded-br {
bottom: 0;
right: -5px;
}
</c:if>
<%-- Buttons --%>
.z-window-embedded-icon,
.z-window-popup-icon,
.z-window-modal-icon,
.z-window-overlapped-icon,
.z-window-highlighted-icon {
background: transparent no-repeat 0 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-icon.png')});
height: 17px;
width: 28px;
overflow: hidden;
float: right;
cursor: pointer;
margin-left: 2px;
}
<%-- Button Background Position --%>
.z-window-embedded-min,
.z-window-modal-min,
.z-window-overlapped-min,
.z-window-popup-min,
.z-window-highlighted-min {
background-position: 0 0;
}
.z-window-embedded-min-over,
.z-window-modal-min-over,
.z-window-overlapped-min-over,
.z-window-popup-min-over,
.z-window-highlighted-min-over {
background-position: -28px 0;
}
.z-window-embedded-max,
.z-window-modal-max,
.z-window-overlapped-max,
.z-window-popup-max,
.z-window-highlighted-max {
background-position: 0 -17px;
}
.z-window-embedded-max-over,
.z-window-modal-max-over,
.z-window-overlapped-max-over,
.z-window-popup-max-over,
.z-window-highlighted-max-over {
background-position: -28px -17px;
}
.z-window-embedded-maxd,
.z-window-modal-maxd,
.z-window-overlapped-maxd,
.z-window-popup-maxd,
.z-window-highlighted-maxd {
background-position: 0 -34px;
}
.z-window-embedded-maxd-over,
.z-window-modal-maxd-over,
.z-window-overlapped-maxd-over,
.z-window-popup-maxd-over,
.z-window-highlighted-maxd-over {
background-position: -28px -34px;
}
.z-window-embedded-close,
.z-window-modal-close,
.z-window-overlapped-close,
.z-window-popup-close,
.z-window-highlighted-close {
background-position: 0 -51px;
}
.z-window-embedded-close-over,
.z-window-modal-close-over,
.z-window-overlapped-close-over,
.z-window-popup-close-over,
.z-window-highlighted-close-over {
background-position: -28px -51px;
}
<%-- IE --%>
<c:if test="${zk.ie > 0}">
.z-messagebox-btn {
width: 50pt;
text-overflow: ellipsis;
}
.z-messagebox-btn table {
width: 100%;
}
</c:if>
<c:if test="${zk.gecko > 0}">
.z-messagebox-btn {
width: 48pt;
}
</c:if>
<c:if test="${zk.opera > 0}">
.z-messagebox-btn {
width: 50pt;
}
</c:if>
<%-- IE 6 GIF --%>
<c:if test="${zk.ie == 6}">
.z-window-modal-tl,
.z-window-modal-tr,
.z-window-modal-bl,
.z-window-modal-br,
.z-window-overlapped-tl,
.z-window-overlapped-tr,
.z-window-overlapped-bl,
.z-window-overlapped-br,
.z-window-highlighted-tl,
.z-window-highlighted-tr,
.z-window-highlighted-bl,
.z-window-highlighted-br {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-corner.gif')});
}
.z-window-embedded-tl,
.z-window-embedded-tr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-corner.gif')});
}
.z-window-popup-tl,
.z-window-popup-tr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-pop-corner.gif')});
}
.z-window-modal-hl,
.z-window-highlighted-hl,
.z-window-overlapped-hl {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hl.gif')});
}
.z-window-modal-hr,
.z-window-highlighted-hr,
.z-window-overlapped-hr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hr.gif')});
}
.z-window-embedded-hl,
.z-window-embedded-hl-noborder {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-hl.gif')});
}
.z-window-embedded-hr,
.z-window-embedded-hr-noborder {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-hr.gif')});
}
.z-window-modal-hm,
.z-window-highlighted-hm,
.z-window-overlapped-hm,
.z-window-popup-hm {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hm.gif')});
}
.z-window-embedded-hm,
.z-window-embedded-hm-noborder {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-hm.gif')});
}
.z-window-popup-hm {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-pop-hm.gif')});
}
.z-window-modal-cl, .z-window-modal-cr,
.z-window-highlighted-cl, .z-window-highlighted-cr,
.z-window-overlapped-cl, .z-window-overlapped-cr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-clr.gif')});
}
.z-window-overlapped-tl, .z-window-overlapped-tr,
.z-window-popup-tl, .z-window-popup-tr,
.z-window-overlapped-bl, .z-window-overlapped-br {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-corner.gif')});
}
.z-window-embedded-tl, .z-window-embedded-tr,
.z-window-embedded-bl, .z-window-embedded-br {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-corner.gif')});
}
.z-window-overlapped-hl,
.z-window-popup-hl {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hl.gif')});
}
.z-window-embedded-hl{
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-hl.gif')});
}
.z-window-overlapped-hr,
.z-window-popup-hr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hr.gif')});
}
.z-window-embedded-hr{
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-hr.gif')});
}
.z-window-overlapped-hm,
.z-window-popup-hm {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-hm.gif')});
}
.z-window-embedded-hm{
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-hm.gif')});
}
.z-window-overlapped-cl,
.z-window-overlapped-cr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-ol-clr.gif')});
}
.z-window-embedded-cl,
.z-window-embedded-cr {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-clr.gif')});
}
.z-window-embedded-bl,
.z-window-embedded-br {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-corner.gif')});
}
.z-window-embedded-icon,
.z-window-modal-icon,
.z-window-highlighted-icon,
.z-window-popup-icon,
.z-window-overlapped-icon {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-icon.gif')});
}
.z-msgbox-question {
background-image: url(${c:encodeThemeURL('~./zul/img/msgbox/question-btn.gif')});
}
.z-msgbox-exclamation {
background-image: url(${c:encodeThemeURL('~./zul/img/msgbox/warning-btn.gif')});
}
.z-msgbox-information {
background-image: url(${c:encodeThemeURL('~./zul/img/msgbox/info-btn.gif')});
}
.z-msgbox-error {
background-image: url(${c:encodeThemeURL('~./zul/img/msgbox/stop-btn.gif')});
}
</c:if>panel.css.dspcss<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
.z-panel-shadow {
border-radius: 4px;
box-shadow:0 0 4px rgba(0, 0, 0, 0.5);
-moz-border-radius: 4px;
-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 4px;
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
}
.z-panel-resize-faker {
position: absolute;
border: 1px dashed #1854C2;
overflow: hidden;
z-index: 60000;
left: 0;
top: 0;
background-color: #D7E6F7;
filter: alpha(opacity=50); <%-- IE --%>
opacity: .5;
}
.z-panel-tl,
.z-panel-tr,
.z-panel-tl-gray,
.z-panel-tr-gray,
.z-panel-bl,
.z-panel-br {
background: transparent no-repeat 0 top;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/panel-corner.png')});
margin-right: 7px;
height: 7px;
font-size: 0;
line-height: 0;
zoom: 1;
}
.z-panel-tl-gray,
.z-panel-tr-gray {
/* ADDED for framable, untitled case */
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/panel-corner-blue.png')});
}
.z-panel-bl {
background-position: 0 -7px;
}
.z-panel-br,
.z-panel-tr,
.z-panel-tr-gray {
background-position: right -14px;
position: relative;
margin-right: -7px;
}
.z-panel-br {
background-position: right bottom;
}
<%-- Header --%>
.z-panel-hm .z-panel-header,
.z-panel-header {
color: #363636;
padding: 3px 0 7px 0;
background: transparent;
border: 0;
font-weight: normal;
font-size: ${fontSizeM};
font-family: ${fontFamilyT};
}
.z-panel-header {
background: transparent repeat-x 0 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/panel-hm.png')});
}
.z-panel-header-move {
cursor: move;
}
<%-- Header Left --%>
.z-panel-hl {
background: transparent no-repeat 0 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/panel-hl.png')});
padding-left: 7px;
border-bottom: 1px solid #C5C5C5;
zoom: 1;
}
<%-- Header Right --%>
.z-panel-hr {
background: transparent no-repeat right 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/panel-hr.png')});
padding-right: 7px;
zoom: 1;
}
<%-- Header Middle --%>
.z-panel-hm {
background: transparent repeat-x 0 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/panel-hm.png')});
overflow: hidden;
zoom: 1;
}
<%-- Center Left --%>
.z-panel-cm {
border: 0;
margin: 0;
background: #F1F9FF;
padding-top: 6px;
<c:if test="${zk.ie < 8}">
zoom: 1; <%-- fixed for B50-3315594.zul --%>
</c:if>
}
<%-- Center Left, Footer Left --%>
.z-panel-cl,
.z-panel-fl {
background: transparent repeat-y 0 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/panel-clr.png')});
padding-left: 4px;
zoom: 1;
}
<%-- Center Right, Footer Right --%>
.z-panel-cr,
.z-panel-fr {
background: transparent repeat-y right 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/panel-clr.png')});
padding-right: 4px;
zoom: 1;
}
<%-- Footer Middle --%>
.z-panel-body .z-panel-top .z-toolbar,
.z-panel-body .z-panel-btm .z-toolbar {
border: 1px solid #B2CAD6;
border-top: 0;
overflow: hidden;
padding: 2px;
}
.z-panel-noborder .z-panelchildren-noborder {
border-width: 0;
}
.z-panel-fl.z-panel-nobtm2 {
display: none;
}
.z-panel-cm.z-panel-noheader {
padding: 0;
}
.z-panel-noheader {
border-bottom: 0;
}
.z-panel-noborder .z-panel-top.z-panel-top-noborder .z-toolbar,
.z-panel-noborder .z-panel-btm.z-panel-btm-noborder .z-toolbar {
border: none;
}
<%-- Footer Middle --%>
.z-panel-fm {
background: #F1F9FF;
overflow: hidden;
}
.z-panel-move-ghost {
position: absolute;
background: #D7E6F7;
overflow: hidden;
filter: alpha(opacity=60) !important; <%-- IE --%>
opacity: .6 !important;
cursor: move !important;
}
.z-panel-move-block {
border: 2px dashed #B2CAD6;
}
.z-panel-move-ghost dl {
border: 1px solid #B2CAD6;
margin: 0;
overflow: hidden;
padding: 0;
display: block;
background: #D7E6F7;
line-height: 0;
font-size: 0;
}
.z-panel,
.z-panel-header {
overflow: hidden;
}
.z-panel-body {
overflow: hidden;
zoom: 1;
}
.z-panelchildren {
overflow: hidden;
background-color: white;
border: 1px solid #C5C5C5;
border-top: 0;
position: relative;
zoom: 1;
}
<%-- This is for fixing border of toolbars at different position --%>
.z-panel-body .z-panel-top .z-toolbar,
.z-panel-body .z-panel-btm .z-toolbar {
border: 1px solid #C5C5C5;
border-top: 0;
overflow: hidden;
padding: 2px;
}
.z-panel-cl .z-panel-top .z-toolbar {
border-top: 1px solid #C5C5C5;
border-bottom: 0;
}
.z-panel-cl .z-panelchildren {
background-color: white;
border: 1px solid #C5C5C5;
}
.z-panelchildren-noheader {
border-top: 1px solid #C5C5C5;
}
.z-panel-top-noborder .z-toolbar {
border: none;
border-bottom: 0;
border-top: 1px solid #C5C5C5;
overflow: hidden;
}
.z-panel-noborder .z-panel-top .z-panel-top-noborder .z-toolbar {
border-bottom: 1px solid #C5C5C5;
border-width: 0 0 1px;
}
.z-panel-noborder .z-panel-btm .z-panel-btm-noborder .z-toolbar {
border-top: 1px solid #C5C5C5;
border-width: 1px 0 0;
}
.z-panel-noborder .z-panel-header .z-panel-header-noborder {
border-width: 0;
border-bottom: 1px solid #C5C5C5;
}
.z-panel-top.z-panel-noheader .z-toolbar {
border-bottom: 0;
border-top: 1px solid #C5C5C5;
overflow: hidden;
}
<%-- Panel Tool --%>
.z-panel-icon {
overflow: hidden;
float: right;
margin-left: 2px;
background: transparent no-repeat 0 0;
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-icon.png')});
width: 28px;
height: 17px;
cursor: pointer;
}
.z-panel-min {
background-position: 0 0;
}
.z-panel-min-over {
background-position: -28px 0;
}
.z-panel-max {
background-position: 0 -17px;
}
.z-panel-max-over {
background-position: -28px -17px;
}
.z-panel-maxd {
background-position: 0 -34px;
}
.z-panel-maxd-over {
background-position: -28px -34px;
}
.z-panel-close {
background-position: 0 -51px;
}
.z-panel-close-over {
background-position: -28px -51px;
}
.z-panel-exp {
background-position: 0 -68px;
}
.z-panel-exp-over {
background-position: -28px -68px;
}
.z-panel-colpsd .z-panel-exp {
background-position: 0 -102px;
}
.z-panel-colpsd {
height:auto !important;
}
.z-panel-colpsd .z-panel-exp-over {
background-position: -28px -102px;
}
<%-- IE --%>
<c:if test="${zk.ie > 0}">
<c:if test="${zk.ie >= 7}">
.z-panel-tm {
overflow: visible;
}
</c:if>
.z-panel-header {
zoom: 1;
}
.z-panel-btm {
position: relative;
}
<c:if test="${zk.ie == 6}">
.z-panel-tl,
.z-panel-tr,
.z-panel-bl,
.z-panel-br {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/panel-corner.gif')});
}
.z-panel-tl-gray,
.z-panel-tr-gray{
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/panel-corner-blue.gif')});
}
.z-panel-icon {
background-image: url(${c:encodeThemeURL('~./zul/img/wnd/wnd-icon.gif')});
}
</c:if>
</c:if>