📄 style.zul
字号:
<?xml version="1.0" encoding="UTF-8"?><?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?><!--style.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>Custom Style</h4> <p>CSS(Cascading Style Sheet), class attribute, and style attribute are supported.<br /> Developers use style components as follows to specify which style sheet to be loaded. Like HTML, it affects all components in the same desktop.<br /> For more information, see our <a href="http://www.zkoss.org/doc/styleguide/ch01s01.html">Style Guide#ZK Class Concept</a> </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>
<groupbox mold="3d" width="150px">
<caption label="Use Style Tag" />
<style>
.btndiv .z-button-cr, .btndiv .z-button-cl,
.btndiv .z-button-bl, .btndiv .z-button-bm,
.btndiv .z-button-br, .btndiv .z-button-tl,
.btndiv .z-button-tm, .btndiv .z-button-tr {
background-image:none;
}
.btndiv .z-button-cm {
background : transparent url('') no-repeat 0 0 ;
}
.myBlack .z-button-cm {
background-image : url(${c:encodeURL('/img/button.png')});
}
.myBlue .z-button-cm {
background-image : url(${c:encodeURL('/img/b-button.png')});
}
.myRed .z-button-cm {
background-image : url(${c:encodeURL('/img/r-button.png')});
}
.z-button-focus .z-button-cm {
background-position: 0 -62px
}
.z-button-over .z-button-cm {
background-position: 0 -30px
}
.z-button-clk .z-button-cm {
background-position: 0 -93px
}
</style>
<div class="btndiv">
<button id="btn" label="My Button" height="38px" sclass="myBlack" width="106px" />
</div>
</groupbox>
<groupbox mold="3d" width="150px">
<caption label="Use style attribute" />
<hbox>
<radiogroup
onCheck='msg.style = "color:white;background:" + self.selectedItem.label;
btn.sclass = "my" + self.SelectedItem.label;'>
<vbox>
<radio label="Black" checked="true" />
<radio label="Blue" />
<radio label="Red" />
</vbox>
</radiogroup>
<label id="msg" value="Hello, ZK"
style="color:white;background:black" />
</hbox>
</groupbox>
</hbox>
</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 + -