ZK/操作指南/外观
列表单元格的默认样式如下
div.listbox-body td {
...
}
因此，要使用类来自定义外观，您需要指定如下内容
div.listbox-body td.mine {
...
}
然后，您可以在 ZUML 页面中指定 sclass。
<listcell sclass="mine"/>
您可以创建新的自定义组件来以您想要的方式显示自身，而不是仅仅修改内置组件的 .dsp 文件。有关说明，请参阅 zkoss.org 网站上的 DevGuide PDF。请注意，演示页面上的“Dojo 鱼眼”示例以及 zkforge 上的代码是创建自定义组件的示例。
以下是绘制自定义微调器 xhtml 的 zk-progress-prompt.js 文件
/*
* Contributed by MaryGrace http://sourceforge.net/users/marygrace/
*/
function Boot_progressbox(id, msg, x, y) {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
x = (myWidth-180) / 2;
y = (myHeight-70) / 2;
var html = '<div id="'+id+'" style="left:'+x+'px;top:'+y+'px;'
+'position:absolute;z-index:79000;background-color:white;'
+'white-space:nowrap;border:4px solid #77a;padding:15px; font-weight:bold;">'
+'<img alt="." src="'+zk.getUpdateURI('/web/zk/img/progress.gif')+'"/> '
+" Attendere prego..."+'</div>';
document.body.insertAdjacentHTML("afterbegin", html);
return $e(id);
}
以下是当 zscript 中抛出异常时使用的 zk-zscript-error-message.js 文件。注意：错误消息是一个笑话，您的用户可能觉得它不好笑，因此您需要编辑它...
zkau.cmd0.alert = function (msg) {
if (!zk._errcnt) zk._errcnt = 1;
var id = "zk_err_" + zk._errcnt++;
var box = document.createElement("DIV");
document.body.appendChild(box);
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
x = (myWidth-180) / 2;
y = (myHeight-70) / 2;
var html = '<div id="'+id+'" style="left:'+x+'px;top:'+y+'px;'
+'position:absolute;z-index:79000;background-color:white;'
+'white-space:nowrap;border:4px solid #77a;padding:15px; font-weight:bold;">'
+'<img alt="." src="'+zk.getUpdateURI('/web/zul/img/error.gif')+'"/> '
+" Hum. The zscript threw and exception. Most likely a coding problem. Sack the developer!<br/>"
+" The exception message was: "
+zk.encodeXML(msg, true)+'</div>';
zk._setOuterHTML(box, html);
box = $e(id); //we have to retrieve back
try {
new Draggable(box, {
handle: box, zindex: box.style.zIndex,
starteffect: zk.voidf, starteffect: zk.voidf, endeffect: zk.voidf});
} catch (e) {
}
};
以下是当 AJAX 连接失败（例如服务器停止运行或用户网络连接断开）时绘制自定义框的 zk-ajax-error-message.js 文件
<nowiki>
zk.error = function (msg) {
if (!zk._errcnt) zk._errcnt = 1;
var id = "zk_err_" + zk._errcnt++;
var box = document.createElement("DIV");
document.body.appendChild(box);
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
x = (myWidth-180) / 2;
y = (myHeight-70) / 2;
var html = '<div id="'+id+'" style="left:'+x+'px;top:'+y+'px;'
+'position:absolute;z-index:79000;background-color:white;'
+'white-space:nowrap;border:4px solid #77a;padding:15px; font-weight:bold;">'
+'<img alt="." src="'+zk.getUpdateURI('/web/zul/img/error.gif')+'"/> '
+" Oops! AJAX Issues! Has the server been switched off?<br/>"
+" The technical error message to report to IT is the following:<br/>"
+zk.encodeXML(msg, true)+'</div>';
zk._setOuterHTML(box, html);
box = $e(id); //we have to retrieve back
try {
new Draggable(box, {
handle: box, zindex: box.style.zIndex,
starteffect: zk.voidf, starteffect: zk.voidf, endeffect: zk.voidf});
} catch (e) {
}
};
function errorImg(){
// this is just to ensure that the error images is loaded but off screen
// as this image will only be shown if you kill the server when it will
// no longer be able to loaded
return "<div style='position:absolute;left:-1000px;right:100px'><img src='"+zk.getUpdateURI("/web/zul/img/error.gif")+"'/></div>";
}
</nowki>
以下是一些 zul，当您单击“长时间处理！”按钮时将显示此微调器，当您单击“抛出异常！”按钮时将显示 zscript 异常消息。注意：只有在停止服务器或断开电脑与网络的连接，然后按任一按钮时，您才会看到 AJAX 异常消息。
/*
* Originally contributed by MaryGrace http://sourceforge.net/users/marygrace/
*/
<zk>
<window>
<zscript>
<![CDATA[
public void go() {
Thread.sleep(5000);
}
public void exception(){
throw new java.lang.RuntimeException("deliberate exception");
}
]]>
</zscript>
<button label="Long Processing!" onClick="go()"/>
<button label="Throws Exception!" onClick="exception()"/>
</window>
<script type="text/javascript" src="/examples/zk-progress-prompt.js" />
<script type="text/javascript" src="/examples/zk-ajax-error-message.js" />
<script type="text/javascript" src="/examples/zk-zscript-error-message.js" />
<script type="text/javascript">
// here we load the image into be page else it wont render for the AJAX error
// message if the server goes down and the browser has not cached the image yet
document.write(errorImg());
</script>
</zk>
例如，
<zk><style>
.z-button .z-button-tl, .z-button .z-button-tr, .z-button .z-button-bl, .z-button .z-button-br,
.z-button .z-button-tm, .z-button .z-button-bm, .z-button .z-button-cl, .z-button .z-button-cr, .z-button .z-button-cm {
background-image:none;
}
</style>
<button tooltiptext="Here is a button" image="http://www.freebuttons.com/freebuttons/Alien/AlienDd5.gif"/>
</zk>
窗口是 ZK 中一个复杂的组件。要更改其样式，有时开发人员必须覆盖默认 CSS 文件中的样式定义才能使其起作用。例如，如果我们要更改窗口的标题样式。以下代码将不起作用，因为 style 属性适用于窗口本身，而不是标题。
<window id="win1" title="1st window" border="normal" width="200px" style="background-color: lightyellow"> Window 1 </window>
更改窗口标题样式的正确方法如下
<window id="win1" title="1st window" border="normal" width="200px" style="background-color: lightyellow">
<style>.title td {background-color:red; color: white;}</style>
Window 1
</window>
style 组件会将 CSS 选择器 <style> .title td {...} </style> 生成到最终的 html 页面中，并由浏览器解释以使用此新样式。
很好，现在我们可以毫无问题地更改窗口的标题样式...等等，如果我在同一个页面上有不止一个窗口，所有窗口的标题都会更改为新样式，因为它是定义为 CSS “类”选择器。如果我只想更改一个窗口的标题，而保持其他窗口不变，该怎么办？您必须定义 CSS “id” 选择器。问题是，众所周知，最终生成的 html 标签 id 是由 ZK 引擎自动生成的 uuid。我们事先不知道 uuid 值，并且在生成后它是不可变的。如何定义 CSS “id” 选择器？别担心，使用 EL 表达式来为您完成这项工作。以下代码将只更改 win1 的样式，而 win2 将保持不变
<zk>
<window id="win1" title="1st window" border="normal" width="200px" style="background-color:lightyellow">
<style>
#${win1.uuid} td {background-color:red; color: white;}
</style>
Window 1
</window>
<window id="win2" title="2nd window" border="normal" width="200px" style="background-color: lightyellow">
Window 2
</window>
</zk>
请注意，这在 IE6 中不起作用。请尝试使用 #${win1.uuid} #\${win1.uuid} 替换，这在 IE6 和 FF1 中有效
您可以使用 winzip 或 jar.exe 将 web 应用程序的 WEB-INF/lib 文件夹中的 zul jar 文件解压缩到 WEB-INF/classes 文件夹中。然后从 lib 中删除 jar 文件，以便您的 servlet 容器从文件系统中拾取所有类文件、图像和 dsp 文件。搜索 dsp 文件和图像，您会找到 zk 用作 gif 图像的一组 dsp 文件，这些文件的名字与 xul 元素匹配，例如 /web/zul/html/tabbox.dsp。如果您打开此文件，您会看到它是将 ZK 组件转换为浏览器 html 的模板，它输出 html 表格标记。您可以编辑这些文件中的 html 标记，然后重启服务器或重新加载应用程序以查看效果。
3.0RC
- 以下是一个标题 CSS。
div.tree-head th, div.listbox-head th, div.grid-head th, div.listbox-paging th, div.grid-paging th {
overflow: hidden; border: 1px solid;
border-color: #DAE7F6 #7F9DB9 #7F9DB9 #DAE7F6;
white-space: nowrap; padding: 2px;
font-size: small; font-weight: normal;
}
div.tree-body td, div.listbox-body td, div.listbox-paging td {
cursor: pointer; padding: 0 2px;
font-size: small; font-weight: normal;
}
3.0
- 以下是一个标题 CSS。
div.head-cell-inner {
font-size: small; font-weight: normal;
}
div.cell-inner {
font-size: small; font-weight: normal;
}
通过样式修改树图标
tree-root-open The icon used to represent the open state for tree items at the root level. tree-root-close The icon used to represent the close state for tree items at the root level. tree-tee-open The icon used to represent the open state for tree items that have next siblings. tree-tee-close The icon used to represent the close state for tree items at have next siblings. tree-last-open The icon used to represent the open state for tree items that don't have next siblings. tree-last-close The icon used to represent the close state for tree items at don't have next siblings. tree-tee The icon used to represent the T-shape icon. tree-vbar The icon used to represent the |-shape (vertical bar) icon. tree-last The icon used to represent the L-shape icon -- no next sibling. tree-spacer The icon used to represent the blank icon.
以下是一个对应的图像：https://archive.is/20130707075935/img512.imageshack.us/img512/8242/treeicondesut8.png
以下是一些 css 类
span.tree-root-open, span.tree-tee-open, span.tree-last-open {
width: 18px; min-height: 18px; height: 100%;
background-image: url(${c:encodeURL('~./zul/img/tree/open.png')});
background-repeat: no-repeat;
display:-moz-inline-box; vertical-align:top;
display:inline-block;
}
span.tree-root-close, span.tree-tee-close, span.tree-last-close {
width: 18px; min-height: 18px; height: 100%;
background-image: url(${c:encodeURL('~./zul/img/tree/close.png')});
background-repeat: no-repeat;
display:-moz-inline-box; vertical-align:top;
display:inline-block;
}
span.tree-tee, span.tree-vbar, span.tree-last, span.tree-spacer {
width: 18px; min-height: 18px; height: 100%;
display:-moz-inline-box; vertical-align:top;
display:inline-block;
}
- 左边
td.lwt-MOLDE_NAME
td.mwt-MOLDE_NAME
td.rwt-MOLDE_NAME
EX
td.lwt-embedded{...};
td.mwt-embedded{...};
td.rwt-embedded{...};