Theme:
Processing...
Description & Source Code

Toolbar serves as a container for the toolbar buttons. A toolbar button is often used as a light weight replacement for the button component.

toolbar.zul
<zk>
	<style dynamic="true">
		.z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover {
			background-color:transparent;
			border:0 none;
		}
		.vista {
			background:#000000 url(/zkdemo/widgets/menu/toolbar/img/bar.png) repeat-x 0 0;
			color:white;
			padding-top:7px;
		}
		.p-vista .z-panel-children {
			background-color: #008BB6;
			border-bottom: 0 none;
		}
	</style>
	<separator/>
	<panel id="panel" title="ZK Desktop" height="350px" width="433px" border="normal" sclass="p-vista">
		<panelchildren>
			<image src="/widgets/menu/toolbar/img/castle.png" />
		</panelchildren>
		<toolbar id="tb" sclass="vista" height="30px" align="end">
			<toolbarbutton image="/widgets/menu/toolbar/img/java.png" onClick='alert("Java")' />
			<toolbarbutton image="/widgets/menu/toolbar/img/issue.png" onClick='alert("Issue")' />			
			<toolbarbutton image="/widgets/menu/toolbar/img/internet.png" onClick='alert("Internet")' />
			<toolbarbutton image="/widgets/menu/toolbar/img/volume.png" onClick='alert("Volume")' />
			<toolbarbutton label="12:55 PM" onClick='alert("time")' />
		</toolbar>
	</panel>
</zk>
toolbar_ctrl.zul
<radiogroup onCheck='tb.sclass = self.selectedItem.value;'>
	<vlayout>
		<label value="Select a Toolbar Style:"/>
		<radio label="Default" value="default" />
		<radio label="Vista" value="vista" checked="true"/>
	</vlayout>
</radiogroup>