📄 columnlayout.zul
字号:
<?xml version="1.0" encoding="UTF-8"?><!--columnlayout.zul{{IS_NOTE Purpose: Description: History: Thu Nov 13 15:10:41 2008, Created by jumperchen}}IS_NOTECopyright (C) 2008 Potix Corporation. All Rights Reserved.{{IS_RIGHT}}IS_RIGHT--><window id="demo" apply="org.zkoss.zkdemo.userguide.DemoWindowComposer">
<html><![CDATA[
<h4>Columnlayout</h4>
<p>A columnlayout is a layout component which can have multiple columns (columnchildren), and each column may contain multiple panels. <a href="javascript:;" onclick="if (!zk.isVisible($e('infos'))) {anima.slideDown($e('infos'));} else {anima.slideUp($e('infos'));}">More..</a></p>
<p style="display:none;" id="infos">You should assign width (either in percentage or pixel) on every columnchildren to make sure you can get the expected look.</p>
]]></html>
<separator/>
<tabbox width="100%" tabscroll="false">
<tabs>
<tab id="demoView" label="Demo"/>
<tab id="srcView" label="View Source"/>
</tabs>
<tabpanels>
<tabpanel>
<window id="view">
</window>
</tabpanel>
<tabpanel>
<panel>
<panelchildren>
<textbox id="codeView" class="code" rows="20" width="95%">
<attribute name="value"><![CDATA[
<columnlayout>
<columnchildren width="50%">
<panel title="Available projects:">
<panelchildren>
<listbox id="left" multiple="true" height="300px" oddRowSclass="non-odd" fixedLayout="true" checkmark="true">
<listitem selected="true">
<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Forge"/>
</listitem>
<listitem>
<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Mobile"/>
</listitem>
<listitem>
<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK GWT"/>
</listitem>
<listitem>
<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK JSF"/>
</listitem>
<listitem>
<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK JSP"/>
</listitem>
</listbox>
</panelchildren>
</panel>
</columnchildren>
<columnchildren width="100px">
<panel>
<panelchildren style="margin: 70px 34px;">
<image sclass="pointer" src="/img/Centigrade-Widget-Icons/ButtonArrowRightDouble-32x32.png" tooltiptext="Add Project">
<attribute name="onClick">
Set items = left.getSelectedItems();
if (items.isEmpty()) {
alert("Please select at least one project to add!");
} else {
List al = new ArrayList(items);
for (Iterator it = al.iterator(); it.hasNext();) {
Listitem li = (Listitem)it.next();
li.setSelected(false);
right.appendChild(li);
}
}
</attribute>
</image>
<separator height="15px"/>
<image sclass="pointer" src="/img/Centigrade-Widget-Icons/ButtonArrowLeftDouble-32x32.png" tooltiptext="Remove Project">
<attribute name="onClick">
Set items = right.getSelectedItems();
if (items.isEmpty()) {
alert("Please select at least one project to remove!");
} else {
List al = new ArrayList(items);
for (Iterator it = al.iterator(); it.hasNext();) {
Listitem li = (Listitem)it.next();
li.setSelected(false);
left.appendChild(li);
}
}
</attribute>
</image>
</panelchildren>
</panel>
</columnchildren>
<columnchildren width="50%">
<panel title="Configured projects:" height="">
<panelchildren>
<listbox id="right" multiple="true" height="300px" oddRowSclass="non-odd" fixedLayout="true" checkmark="true">
<listitem>
<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK"/>
</listitem>
<listitem>
<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Studio"/>
</listitem>
<listitem>
<listcell src="/img/Centigrade-Widget-Icons/Briefcase-16x16.png" label="ZK Spring"/>
</listitem>
</listbox>
</panelchildren>
</panel>
</columnchildren>
</columnlayout>
]]></attribute>
</textbox>
</panelchildren>
<toolbar mold="panel">
<button id="tryBtn" label="Try me!"/>
<button id="reloadBtn" label="Reload" height="18px"/>
</toolbar>
</panel>
</tabpanel>
</tabpanels>
</tabbox>
</window>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -