z35-tabbox-203.zul

ZK是一个Ajax Java Web框架

<!-- edited with XML Spy v4.3 U (http://www.xmlspy.com) by Robert (dada) -->
<?page id="testZul" title=" New ZUL Title" cacheable="false" 
	language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul/zul.xsd">
  Tabbox Accordion Test: make sure all Tabboxes behave as expected, you should check if it's closable, draggable, tooltip text, image shows up correctly.
  Please also check the component within each tab box, make sure they look ok, no deformation or changes after tabbox open/close.
  <window title="Test Tabbox Accordion" border="normal" width="100%">
    <tabbox width="400px" mold="accordion">
      <tabs>
        <tab label="Tab 1" image="/img/folder.gif" closable="true" draggable="true" droppable="true" focus="true" tooltiptext="Test ToolTip" width="100%"/>
        <tab label="Tab 2" image="/img/folder.gif" closable="true" draggable="true" droppable="true" focus="true" tooltiptext="Test ToolTip" width="100%"/>
        <tab label="Tab 3" image="/img/folder.gif" closable="true" draggable="true" droppable="true" focus="true" tooltiptext="Test ToolTip" width="100%"/>
        <tab label="Tab 4" image="/img/folder.gif" closable="true" draggable="true" droppable="true" focus="true" tooltiptext="Test ToolTip" width="100%"/>
        <tab label="Tab 5" image="/img/folder.gif" closable="true" draggable="true" droppable="true" focus="true" tooltiptext="Test ToolTip" width="100%"/>
        <tab label="Tab 6" image="/img/folder.gif" closable="true" draggable="true" droppable="true" focus="true" tooltiptext="Test ToolTip" width="100%"/>
      </tabs>
      <tabpanels>
        <tabpanel>
          <tabbox 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>
        </tabpanel>
        <tabpanel>
This is panel 2
The second panel
		</tabpanel>
        <tabpanel>
          <hbox spacing="0">
            <window border="normal">0</window>
            <vbox spacing="0">
              <hbox spacing="0">
                <window border="normal">1</window>
                <window border="normal">2</window>
                <vbox spacing="0">
                  <window border="normal">3</window>
                  <window border="normal">4</window>
                </vbox>
              </hbox>
              <hbox spacing="0">
                <vbox spacing="0">
                  <window border="normal">5</window>
                  <window border="normal">6</window>
                </vbox>
                <window border="normal">7</window>
                <window border="normal">8</window>
                <window border="normal">9</window>
              </hbox>
            </vbox>
          </hbox>
          <hbox spacing="0" width="100%" height="200px">
            <vbox spacing="0" width="100%" height="100%" heights="100px">
		Column 1-1: The left-top box. To know whether a splitter
		is collapsed, you can listen to the onOpen event.
		<splitter collapse="after"/>
		Column 1-2: You can enforce to open or collapse programming
		by calling setOpen method.
	</vbox>
            <splitter collapse="before"/>
	Column 2: Whether a splitter allows users to open or collapse
	depending on the collapse attribue.
</hbox>
        </tabpanel>
        <tabpanel>
          <vbox>
		Which kind of fruit do you want?
		<groupbox id="gb" mold="3d" width="300px">
              <caption image="/img/inet.png" label="fruits"/>
              <radiogroup onCheck="fruit.value = self.selectedItem.label">
                <radio label="Apple"/>
                <radio label="Orange"/>
                <radio label="Grape"/>
              </radiogroup>
            </groupbox>
            <hbox>You have selected :<label id="fruit"/>
            </hbox>
            <checkbox label="Use 3d groupbox" checked="true" onCheck='gb.mold=self.checked? "3d": "default"'/>
          </vbox>
        </tabpanel>
        <tabpanel>
          <grid>
            <columns sizable="true">
              <column label="Type" sortAscending="&#36;{asc}" sortDescending="&#36;{dsc}"/>
              <column label="Content"/>
            </columns>
            <rows>
              <row>
                <label value="File:"/>
                <textbox width="98%"/>
              </row>
              <row>
                <label value="Type:"/>
                <hbox>
                  <listbox rows="1" mold="select">
                    <listitem label="Java Files,(*.java)"/>
                    <listitem label="All Files,(*.*)"/>
                  </listbox>
                  <button label="Browse..."/>
                </hbox>
              </row>
              <row>
                <label value="Options:"/>
                <textbox rows="3" width="98%"/>
              </row>
            </rows>
          </grid>
        </tabpanel>
        <tabpanel>
          <vbox>
            <radiogroup>
              <radio label="Apple"/>
              <radio label="Orange"/>
              <radio label="Grape"/>
            </radiogroup>
            <separator bar="true"/>
            <checkbox label="Apple"/>
            <checkbox label="Orange"/>
            <checkbox label="Grape"/>
          </vbox>
        </tabpanel>
      </tabpanels>
    </tabbox>
  </window>
</zk>