📄 anima.zul
字号:
<?xml version="1.0" encoding="UTF-8"?><!--anima.zul{{IS_NOTE Purpose: Description: History: Thu Nov 13 16:07:16 TST 2008, Created by Flyworld}}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>Animations</h4> <p>Versatile visual effects powered by the <a href="http://script.aculo.us">script.aculo.us</a> libraries.</p> ]]></html> <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[
<zk>
<style dynamic="true">
.ctl { border: 1px outset #777; background:#cfeaf1; margin: 2px;
margin-right: 10px; padding-left: 2px; padding-right: 2px;
display: block; width:80px; text-align:center; }
</style>
<hbox>
<groupbox mold="3d" width="150px">
<caption label="Appear" />
<label sclass="ctl"
action="onclick: zk.hide(#{t});anima.slideDown(#{t})"
value="SlideDown" />
<label sclass="ctl"
action="onclick: zk.hide(#{t});anima.appear(#{t})" value="Appear" />
<label sclass="ctl"
action="onclick: zk.hide(#{t});anima.appear(#{t},2500)"
value="Slowly" />
</groupbox>
<groupbox mold="3d" width="150px">
<caption label="Disappear" />
<label sclass="ctl"
action="onclick: anima.slideUp(#{t});zk.show(#{t})" value="SlideUp" />
<label sclass="ctl"
action="onclick: anima.fade(#{t});zk.show(#{t})" value="Fade" />
<label sclass="ctl"
action="onclick: anima.puff(#{t});zk.show(#{t})" value="Puff" />
<label sclass="ctl"
action="onclick: anima.dropOut(#{t});zk.show(#{t})" value="Drop Out" />
</groupbox>
<groupbox mold="3d" width="150px">
<caption label="Move" />
<label class="ctl" value="Toggle"
onClick="win.visible = !win.visible" />
<label class="ctl" value="Down"
action="onclick: zk.hide(#{win});anima.moveDown(#{win})" />
<label class="ctl" value="Right"
action="onclick: zk.hide(#{win});anima.moveRight(#{win})" />
<label class="ctl" value="Diagonal"
action="onclick: zk.hide(#{win});anima.moveDiagonal(#{win})" />
</groupbox>
</hbox>
<window id="win" border="normal" width="200px" position="center"
mode="overlapped"
action="onshow:anima.appear(#{self});onhide:anima.fade(#{self})"
visible="false">
<caption image="/img/inet.png" label="Hi there!" />
<checkbox label="Hello, Effects!" />
</window>
<div id="t">
<groupbox>
<caption label="Dynamic Content" />
Content to show and hide dynamically.
<datebox />
</groupbox>
Description
<textbox />
</div>
</zk>
]]></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 + -