📄 onopen.zul
字号:
<?xml version="1.0" encoding="UTF-8"?><!--onOpen.zul{{IS_NOTE Purpose: Description: History: Thu Nov 20 14:37:03 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>The onOpen event</h4>
]]></html>
This example shows the child compnent(<toolbarbutton id="target" label="includedHello.zul" popup="details"/>) created upon onOpen event of the groupbox below. The fulfill attribute specifies when to create a child component.
<separator />
<popup id="details" fulfill="target.onClick" width="480px">
<div style="border:1px solid #538BA2; background: #FFF; ">
<html><![CDATA[
<pre style='color:#000000;background:#ffffff;'><span style='color:#7f0055; '><</span><span style='color:#7f0055; '>groupbox</span> id=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>gb</span><span style='color:#2a00ff; '>"</span> mold=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>3d</span><span style='color:#2a00ff; '>"</span> width=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>250px</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>caption</span> label=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>This is a included component</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>vbox</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>hbox</span><span style='color:#7f0055; '>></span>Progress meter:
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>progressmeter</span> id=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>pm</span><span style='color:#2a00ff; '>"</span> value=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>20</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>hbox</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>hbox</span><span style='color:#7f0055; '>></span>Adjust spinner:
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>spinner</span> id=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>sp</span><span style='color:#2a00ff; '>"</span> step=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>5</span><span style='color:#2a00ff; '>"</span> value=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>&#36;</span><span style='color:#2a00ff; '>{pm.value}</span><span style='color:#2a00ff; '>"</span>
constraint=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>min 0 max 100</span><span style='color:#2a00ff; '>"</span>
onChanging=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>pm.setValue(Integer.parseInt(event.value))</span><span style='color:#2a00ff; '>"</span>
onChange=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>pm.value = sp.value</span><span style='color:#2a00ff; '>"</span> cols=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>2</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>hbox</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>vbox</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>groupbox</span><span style='color:#7f0055; '>></span>
</pre>
]]></html>
</div>
</popup>
<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[
<groupbox id="root" mold="3d" open="false" width="300px">
<caption image="/img/Centigrade-Widget-Icons/FirstWindow-24x24.png" label="Please Click Me!"/>
<div fulfill="root.onOpen=/userguide/misc/includedHello.zul"/>
</groupbox>
]]></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 + -