|
Processing...
Description & Source Code
The
navigation_tabs.zul
<zk xmlns:x="xhtml"> <style> .nav_toolbar .z-toolbarbutton-content i { font-size: 20px;} .nav_tabs .z-tabpanel { padding: 0; border-bottom: 0 none;} .nav_tabs .z-tabpanels .z-toolbarbutton-content { padding: 4px;} .nav_category { cursor:pointer; } .nav_text { color: #696569; font-size : 24px; font-weight: bold;} </style> <tabbox width="100%" sclass="nav_tabs"> <tabs id="tabs"> <tab label="Our Product" onSelect="updateCategory(self.label)"/> <tab label="Live Demo" onSelect="updateCategory(self.label)"/> <tab label="Online Documentation" onSelect="updateCategory(self.label)"/> </tabs> <toolbar sclass="nav_toolbar"> <toolbarbutton target="_zkdemo" style="color: #3a92c8;" iconSclass="z-icon-twitter-square" href="http://twitter.com/zkoss" /> <toolbarbutton target="_zkdemo" style="color: #3b5998;" iconSclass="z-icon-facebook-square" href="http://www.facebook.com/zk.framework" /> <toolbarbutton target="_zkdemo" style="color: #696569;" iconSclass="z-icon-github-square" href="https://github.com/zkoss/" /> </toolbar> <tabpanels> <tabpanel> <toolbar hflex="true"> <toolbarbutton label="Product 1" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Product 2" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Product 3" onClick="updateSubPage(self.label)" /> </toolbar> </tabpanel> <tabpanel> <toolbar hflex="true"> <toolbarbutton label="Live Demo 1" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Live Demo 2" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Live Demo 3" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Live Demo 4" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Live Demo 5" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Live Demo 6" onClick="updateSubPage(self.label)" /> </toolbar> </tabpanel> <tabpanel> <toolbar hflex="true"> <toolbarbutton label="Documentation 1" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Documentation 2" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Documentation 3" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Documentation 4" onClick="updateSubPage(self.label)" /> <toolbarbutton label="Documentation 5" onClick="updateSubPage(self.label)" /> </toolbar> </tabpanel> </tabpanels> </tabbox> <separator height="30px"></separator> <zscript><![CDATA[ void updateCategory(String category) { current_category.setValue(category); current_subpage.setValue("Index"); } void updateSubPage(String sub) { current_subpage.setValue(sub); } ]]></zscript> <hlayout> <label id="current_category" sclass="nav_text nav_category" onClick='updateSubPage("Index")'>Our Product</label> <label sclass="nav_text">-</label> <label id="current_subpage" sclass="nav_text">Index</label> </hlayout> </zk>
Copyright © 2005-2024 Potix Corporation All rights reserved.
|
Processing... |