1. 程式人生 > >ZK(7.0.1)將zul頁面引入作為元件標籤的簡單示例

ZK(7.0.1)將zul頁面引入作為元件標籤的簡單示例

1. 作為元件標籤的zul頁面:

panel1.zul

<?page title="Panel1" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Panel1" border="normal" width="570px">
	Panel 1
</window>
</zk>

panel2.zul

<?page title="Panel2" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Panel2" border="normal" width="570px">
	Panel 2
</window>
</zk>
panel3.zul
<?page title="Panel3" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Panel3" border="normal" width="570px">
	Panel 3
</window>
</zk>

2. 主頁面: 
<?page title="Auto Generated index.zul"?>

<!-- 將zul頁面引入作為元件標籤 -->
<?component name="panel1" macroURI="panel1.zul" ?>
<?component name="panel2" macroURI="panel2.zul" ?>
<?component name="panel3" macroURI="panel3.zul" ?>

<zk>
<window title="Hello World!!" border="normal" width="600px">
	<tabbox id="tabbox">
		<tabs>
			<tab>Panel-1</tab>
			<tab>Panel-2</tab>
			<tab>Panel-3</tab>
		</tabs>
		<tabpanels>
			<tabpanel>
				<div vflex="1">
					<!-- 引入新的標籤 -->
					<panel1 id="panel1"/>
				</div>
			</tabpanel>
			<tabpanel>
				<div vflex="1">
					<panel2 id="panel2"/>
				</div>
			</tabpanel>
			<tabpanel>
				<div vflex="1">
					<panel3 id="panel3"/>
				</div>
			</tabpanel>
		</tabpanels>
	</tabbox>
</window>
</zk>