Sclass"
m |
|||
| Line 1: | Line 1: | ||
{{ZKStyleGuidePageHeader}} | {{ZKStyleGuidePageHeader}} | ||
| − | + | As described in [[ZK Style Guide/ZK Class Concept|the previous section]], Styling Class (aka., sclass) is a way to add CSS styling to a particular component. By default, nothing is assigned to sclass (i.e., empty). Once it is assigned with a non-empty value (<javadoc method="setSclass(java.lang.String)">org.zkoss.zk.ui.HtmlBasedComponent</javadoc>), it will be added to the root element as additional CSS class. | |
For example, | For example, | ||
| Line 15: | Line 15: | ||
</zk> | </zk> | ||
</source> | </source> | ||
| − | As you | + | |
| + | As shown above, the first textbox is assigned with a sclass called <tt>mydb</tt>, while the second textbox is not. If you examine the above example with a DOM inspector (such as [http://getfirebug.com/ Firebug]), you will find ZK assigns two CSS classes to the first textbox: <tt>z-textbox</tt> and <tt>mydb</tt>. That is, the textbox will inherit all CSS styles from the default rules (for <tt>z-textbox</tt>), while the custom CSS class (<tt>mydb</tt> in this example) is used to provide additional customization. | ||
{{ZKStyleGuidePageFooter}} | {{ZKStyleGuidePageFooter}} | ||
Revision as of 08:31, 8 April 2011
As described in the previous section, Styling Class (aka., sclass) is a way to add CSS styling to a particular component. By default, nothing is assigned to sclass (i.e., empty). Once it is assigned with a non-empty value (HtmlBasedComponent.setSclass(String)), it will be added to the root element as additional CSS class.
For example,
<zk>
<style dynamic="true">
.mydb {
border: 1px solid blue;
}
</style>
<textbox sclass="mydb" value="having Sclass"/>
<textbox value="Without Sclass"/>
</zk>
As shown above, the first textbox is assigned with a sclass called mydb, while the second textbox is not. If you examine the above example with a DOM inspector (such as Firebug), you will find ZK assigns two CSS classes to the first textbox: z-textbox and mydb. That is, the textbox will inherit all CSS styles from the default rules (for z-textbox), while the custom CSS class (mydb in this example) is used to provide additional customization.