Text Styles and Inner Tags

From Documentation


Text Styles and Inner Tags



This section is about how to pass the text styles to the inner HTML tags.

Issue

In general, the styles (Widget.setStyle(String)) are generated directly to the outer DOM element by the use of Widget.domAttrs_(Map).

However, for some DOM structure, the text-related styles must be specified in some of the inner tags that contain the text. Otherwise, it won't have any effect to the text's styles.

For example, assume that 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

Last Update : 2011/08/12


Version Date Content
     



Last Update : 2011/08/12

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.