slider.zul
来自「ZK是一个Ajax Java Web框架」· ZUL 代码 · 共 94 行
ZUL
94 行
<?xml version="1.0" encoding="UTF-8"?><!--image.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>Sliders</h4> <p>A control that enables the user to set a value in a certain range</p> <p>Slide and see changes to the image size.</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> <hbox> <vbox> <groupbox mold="3d" width="250px"> <caption label="Default" /> <slider id="slider1" onScroll="zoom(slider1, img1)" /> <image id="img1" src="/img/sun.jpg" width="10px" /> </groupbox> <groupbox mold="3d" width="250px"> <caption label="Scale" /> <slider id="slider3" onScroll="zoom(slider3, img3)" mold="scale" /> <image id="img3" src="/img/sun.jpg" width="10px" /> </groupbox> </vbox> <groupbox mold="3d" width="280px"> <caption label="Sphere slider:" /> <slider id="slider21" onScroll="zoom(slider21, img2);syncs(-1)" mold="sphere" /> <hbox width="250px"> <hbox width="225px"> <image id="img2" src="/img/sun.jpg" width="10px" /> </hbox> <slider id="slider22" onScroll="zoom(slider22, img2);syncs(1)" mold="sphere" orient="vertical" /> </hbox> </groupbox> </hbox> <zscript> void syncs(int slid ){ (slid > 0 ? slider21.setCurpos(slider22.getCurpos()): slider22.setCurpos(slider21.getCurpos())); } void zoom(Slider slider, Image img) { int v = slider.getCurpos(); int w = v*1.5 > 10 ? v*1.5 :10; img.setWidth(w + "px"); } </zscript></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 + =
减小字号Ctrl + -
显示快捷键?