📄 borderlayout.zul
字号:
<?xml version="1.0" encoding="UTF-8"?><!--borderlayout.zul{{IS_NOTE Purpose: Description: History: Thu Nov 13 14:49:27 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>Complex Borderlayout</h4> <p>A complex example for use of borderlayout. </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[<borderlayout height="650px" style="background:#c5e6ef;">
<north size="80px" border="0" style="background:#c5e6ef;">
<div>
<div style="float:right">
<textbox sclass="demo-search-inp"/><separator orient="vertical"/><button label="Search Site"/>
</div>
<image style="padding:0 10px;" src="/img/ZK-Logo2.gif"/>
<label style="position:relative; top:-30px;padding-left: 50px; font-size:24px;color:#008BB6;font-weight:bold;"
value="Project ZK"/>
</div>
</north>
<!-- Sidebar -->
<west width="150px" border="0" flex="true" splittable="true" margins="0,5,0,0" style="background:#c5e6ef;">
<div>
<panel width="100%" border="normal" title="Navigation">
<panelchildren style="padding:5px;">
<vbox>
<toolbarbutton label="Home"/>
<toolbarbutton label="Sitemap"/>
<toolbarbutton label="Statement of Direction"/>
<toolbarbutton label="ZK Team"/>
<toolbarbutton label="Releases"/>
<toolbarbutton label="Calender"/>
</vbox>
</panelchildren>
</panel>
<panel width="100%" border="normal" style="margin-top:20px;" title="Project Goals">
<panelchildren>
<html>
<ul>
<li>Simple and Rich</li>
<li>Power and Flexible</li>
<li>Direct RIA</li>
</ul>
</html>
</panelchildren>
</panel>
</div>
</west>
<east width="150px" title="Quick Links" flex="true" margins="0,5,5,0" collapsible="true">
<html>
<ul>
<li>Tutorial</li>
<li>Docs</li>
<li>ZK vs GWT</li>
<li>ZK vs Ajax JSF</li>
<li>Forum</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</html>
</east>
<!-- Content -->
<center flex="true">
<tablelayout columns="2">
<tablechildren colspan="2">
<panel>
<panelchildren>
<label value="HOME" style="font-size:20px;"/>
</panelchildren>
</panel>
</tablechildren>
<tablechildren width="50%">
<panel title="Reference" border="normal">
<panelchildren>
<grid fixedLayout="true" style="border:0;">
<rows>
<row><div><toolbarbutton label="Functional Designs"/>(<toolbarbutton label="Releases"/>, <toolbarbutton label="Designs"/>, Product Overview)</div></row>
<row><div><toolbarbutton label="Technical Docs"/></div></row>
<row><div><image src="/img/Centigrade-Widget-Icons/Calendar-16x16.png"/><separator orient="vertical"/><toolbarbutton label="Project Calendar"/></div></row>
<row><div><image src="/img/Centigrade-Widget-Icons/BookBlue-16x16.png"/><separator orient="vertical"/><toolbarbutton label="Developer's Refenence"/></div></row>
<row><div><image src="/img/Centigrade-Widget-Icons/BookGreen-16x16.png"/><separator orient="vertical"/><toolbarbutton label="Developer's Guide"/></div></row>
<row><div><image src="/img/Centigrade-Widget-Icons/BookBrown-16x16.png"/><separator orient="vertical"/><toolbarbutton label="Component Guide"/></div></row>
<row><div><image src="/img/Centigrade-Widget-Icons/Booklet-16x16.png"/><separator orient="vertical"/><toolbarbutton label="Style Guide"/></div></row>
<row><div><image src="/img/Centigrade-Widget-Icons/Envelope-16x16.png"/><separator orient="vertical"/><toolbarbutton label="Mailing Lists"/></div></row>
</rows>
</grid>
</panelchildren>
</panel>
</tablechildren>
<tablechildren width="50%">
<panel title="Customer Overview" border="normal"
style="margin-bottom:10px">
<panelchildren>
<grid fixedLayout="true" style="border:0px" height="100%">
<columns>
<column label="category" />
<column label="value" />
</columns>
<rows>
<row>
<label id="c0" value="Europe" />
<decimalbox id="v0" value="41.2"
constraint="no empty" onChange="update(0)" />
</row>
<row>
<label id="c1" value="Africa" />
<decimalbox id="v1" value="5.2"
constraint="no empty" onChange="update(1)" />
</row>
<row>
<label id="c2" value="America" />
<decimalbox id="v2" value="36.4"
constraint="no empty" onChange="update(2)" />
</row>
<row>
<label id="c3" value="Australia" />
<decimalbox id="v3" value="18.2"
constraint="no empty" onChange="update(3)" />
</row>
<row>
<label id="c4" value="Asia" />
<decimalbox id="v4" value="28.2"
constraint="no empty" onChange="update(4)" />
</row>
</rows>
</grid>
</panelchildren>
</panel>
</tablechildren>
<tablechildren width="50%" colspan="2">
<panel border="normal">
<panelchildren>
<checkbox label="3D Chart" checked="true"
onCheck="mychart.setThreeD(self.isChecked())" />
<chart id="mychart" title="Pie Chart Demo" width="450px"
type="pie" threeD="true" fgAlpha="128">
<attribute name="onClick">
String areaid = event.getArea(); if (areaid
!= null) { Area area =
self.getFellow(areaid);
alert(""+area.getAttribute("entity")+":"+area.getTooltiptext());
}
</attribute>
<zscript>
void update(int rowIndex) { Label lb =
(Label) self.getFellow("c"+rowIndex);
Decimalbox db = (Decimalbox)
self.getFellow("v"+rowIndex);
model.setValue(lb.value, new
Double(db.getValue().doubleValue())); }
PieModel model = new SimplePieModel();
for(int j=0; j < 5; ++j) { update(j); }
mychart.setModel(model);
</zscript>
</chart>
</panelchildren>
</panel>
</tablechildren>
</tablelayout>
</center>
<south size="40px" border="0" style="background:#c5e6ef;">
<toolbar mold="panel" align="center">
<toolbarbutton label="Sign in"/>
<toolbarbutton label="Home"/>
<toolbarbutton label="Sitemap"/>
<toolbarbutton label="Terms"/>
<toolbarbutton label="Report Abuse"/>
<toolbarbutton label="Print"/>
<separator orient="vertical" bar="true"/>
Powered by
<toolbarbutton label="ZK Borderlayout"/>
</toolbar>
</south>
</borderlayout> ]]></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 + -