Text Styles and Inner Tags"
From Documentation
m |
|||
| Line 1: | Line 1: | ||
{{ZKClient-sideReferencePageHeader}} | {{ZKClient-sideReferencePageHeader}} | ||
| + | |||
| + | This section is about how to pass the text styles to the inner HTML tags. | ||
| + | |||
| + | = Issue = | ||
| + | In general, the styles (<javadoc directory="jsdoc" method="setStyle(_global_.String)">zk.Widget</javadoc>) is generated directly to the outer DOM element by use of <javadoc directory="jsdoc" method="domAttrs_(_global_.Map)">zk.Widget</javadoc>. | ||
| + | |||
| + | However, for some DOM structure, the text-related styles must be specified in some of the inner tags that contains the text. Otherwise, it won't have any effect to the text's styles. | ||
| + | |||
| + | For example, assume the widget's HTML representation is as follows. | ||
| + | |||
| + | <source lang="xml"> | ||
| + | <span><input type="checkbox"/><label>Text</label></span> | ||
| + | </source> | ||
| + | |||
| + | = Solution = | ||
| + | It can be resolved as follows. | ||
| + | |||
| + | First, generates the style for the inner tag (i.e., <label> in the above case) by calling zk.Widget#domTextStyleAttr_ | ||
| + | |||
| + | <source lang="javascript"> | ||
| + | out.push('<label', this.domTextStyleAttr_(), '>',...); | ||
| + | </source> | ||
| + | |||
| + | Second, override <javadoc directory="jsdoc" method="getTextNode_()">zk.Widget</javadoc> to return the DOM element that embeds the text. | ||
| + | |||
| + | <source lang="javascript"> | ||
| + | getTextNode_: function () { | ||
| + | return zDom.firstChild(this.getNode(), "LABEL"); | ||
| + | } | ||
| + | </source> | ||
=Version History= | =Version History= | ||
Revision as of 11:48, 10 December 2010
This section is about how to pass the text styles to the inner HTML tags.
Issue
In general, the styles (Widget.setStyle(String)) is generated directly to the outer DOM element by use of Widget.domAttrs_(Map).
However, for some DOM structure, the text-related styles must be specified in some of the inner tags that contains the text. Otherwise, it won't have any effect to the text's styles.
For example, assume the widget's HTML representation is as follows.
<span><input type="checkbox"/><label>Text</label></span>
Solution
It can be resolved as follows.
First, generates the style for the inner tag (i.e., <label> in the above case) by calling zk.Widget#domTextStyleAttr_
out.push('<label', this.domTextStyleAttr_(), '>',...);
Second, override Widget.getTextNode_() to return the DOM element that embeds the text.
getTextNode_: function () {
return zDom.firstChild(this.getNode(), "LABEL");
}
Version History
| Version | Date | Content |
|---|---|---|