📄 tabbox.zul
字号:
<?xml version="1.0" encoding="UTF-8"?><!--tabbox.zul{{IS_NOTE Purpose: Description: History: Thu Nov 13 15:57: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>Tabboxes</h4>
<p>Tabbox can be used to display information on seperate panels and show only one panel a time.</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[
<hbox>
<tabbox width="250px">
<tabs>
<tab label="Tab 1" closable="true"/>
<tab label="Tab 2" closable="true"/>
<tab label="Tab 3" closable="true"/>
<tab label="Tab 4" closable="true"/>
<tab label="Tab 5" closable="true"/>
</tabs>
<tabpanels>
<tabpanel>This is panel 1</tabpanel>
<tabpanel>This is panel 2
The second panel</tabpanel>
<tabpanel>This is panel 3</tabpanel>
<tabpanel>This is panel 4</tabpanel>
<tabpanel>This is panel 5</tabpanel>
</tabpanels>
</tabbox>
<vbox>
<tabbox id="tb" width="400px" mold="accordion">
<tabs>
<tab label="Tab 1"/>
<tab label="Tab 2"/>
</tabs>
<tabpanels>
<tabpanel>
<tabbox id="tb2" orient="vertical">
<tabs width="20px">
<tab label="A"/>
<tab label="B"/>
<tab label="C"/>
<tab label="D"/>
<tab label="E"/>
</tabs>
<tabpanels>
<tabpanel>This is panel A</tabpanel>
<tabpanel>This is panel B</tabpanel>
<tabpanel>This is panel C</tabpanel>
<tabpanel>This is panel D</tabpanel>
<tabpanel>This is panel E</tabpanel>
</tabpanels>
</tabbox>
<checkbox label="Horizonal orient" onCheck='tb2.orient=self.checked?"horizontal":"vertical"'/>
</tabpanel>
<tabpanel>
This is panel 2
The second panel
</tabpanel>
</tabpanels>
</tabbox>
<checkbox label="Use light mold" onCheck='tb.mold=self.checked?"accordion-lite":"accordion"'/>
</vbox>
</hbox>
]]></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 + -