Client Attribute"
m |
Jumperchen (talk | contribs) |
||
| Line 33: | Line 33: | ||
The other use of the client-attribute namespace is to specify attributes that are available only to certain browsers, such as accessibility and [http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web Section 508]. | The other use of the client-attribute namespace is to specify attributes that are available only to certain browsers, such as accessibility and [http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web Section 508]. | ||
| + | |||
| + | |||
| + | == Data-Attribute Handler == | ||
| + | Developer can define their own data-handler for the client attribute to have an extra functionality. | ||
| + | For example, (jQuery's mask) | ||
| + | |||
| + | '''Zul File:''' | ||
| + | <source lang="xml"> | ||
| + | <textbox xmlns:ca="client/attribute" ca:data-mask="00:00:00" onChange='Clients.log(self.value)'/> | ||
| + | </source> | ||
| + | |||
| + | '''zk.xml:''' | ||
| + | <source lang="xml"> | ||
| + | <client-config> | ||
| + | <data-handler> | ||
| + | <name>mask</name><!-- the attribute name, i.e. data-mask --> | ||
| + | <depends>http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js</depends> | ||
| + | <script> | ||
| + | function (wgt, dataValue) { | ||
| + | jq(wgt.$n()).mask(dataValue); | ||
| + | |||
| + | // unformat after onChange event. | ||
| + | wgt.listen({onChange: function (event) { | ||
| + | event.data.value = jq(this.$n()).cleanVal(); | ||
| + | }}); | ||
| + | } | ||
| + | </script> | ||
| + | </data-handler> | ||
| + | </client-config> | ||
| + | </source> | ||
| + | |||
| + | === Syntax Definition === | ||
| + | * '''<data-handler>''': a group of a data-attribute handler <ref name="required">Required</ref> <ref name="multiple">One or Many</ref> | ||
| + | ** '''<name>''': the attribute name. (i.e. data-name) <ref name="required"/> | ||
| + | ** '''<depends>''': the url for extra JS files <ref name="multiple"/><ref name="optional">Optional</ref> | ||
| + | ** '''<script>''' the script content <ref name="required"/> | ||
| + | *** '''<script src="foo.js">''' the src attribute for the script, it can be a url of a JS script from context-path or a url from class-path. For example, <pre><script-uri>~./myscript</script-uri></pre> | ||
| + | |||
<blockquote> | <blockquote> | ||
| Line 49: | Line 87: | ||
| July 2010 | | July 2010 | ||
| The client-attribute namespace was introduced. | | The client-attribute namespace was introduced. | ||
| + | |- | ||
| + | | 8.0.0 | ||
| + | | May 2015 | ||
| + | | [http://tracker.zkoss.org/browse/ZK-2730 Support client data attributes handler] | ||
|} | |} | ||
{{ZUMLReferencePageFooter}} | {{ZUMLReferencePageFooter}} | ||
Revision as of 09:50, 4 May 2015
Name: client attribute Namespace: http://www.zkoss.org/2005/zk/client/attribute Namespace shortcut: client/attribute Java: LanguageDefinition.CLIENT_ATTRIBUTE_NAMESPACE
It is the reserved namespace for specifying client-side DOM attributes. Unlike the client namespace, which assigns something to widgets, the client/attribute namespace assigns additional DOM attributes to the DOM tree directly at the client.
Notice that if the widget's DOM output (Widget.redraw(Array)) also has the same DOM attribute, both of them will be generated and it is technically not legal. Thus, you should prevent the DOM attributes that widget might output.
For example, suppose you want to listen to the onload event, you can do as follows[1].
<iframe src="http://www.google.com" width="100%" height="300px"
xmlns:ca="client/attribute"
ca:onload="do_whater_you_want()"/>
If the attribute contains colon or other special characters, you can use the attribute element as follows.
<div xmlns:ca="client/attribute">
<attribute ca:name="ns:whatever">
whatever_value_you_want
</attribute>
</div>
The other use of the client-attribute namespace is to specify attributes that are available only to certain browsers, such as accessibility and Section 508.
Data-Attribute Handler
Developer can define their own data-handler for the client attribute to have an extra functionality. For example, (jQuery's mask)
Zul File:
<textbox xmlns:ca="client/attribute" ca:data-mask="00:00:00" onChange='Clients.log(self.value)'/>
zk.xml:
<client-config>
<data-handler>
<name>mask</name><!-- the attribute name, i.e. data-mask -->
<depends>http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js</depends>
<script>
function (wgt, dataValue) {
jq(wgt.$n()).mask(dataValue);
// unformat after onChange event.
wgt.listen({onChange: function (event) {
event.data.value = jq(this.$n()).cleanVal();
}});
}
</script>
</data-handler>
</client-config>
Syntax Definition
- <data-handler>: a group of a data-attribute handler [2] [3]
- <name>: the attribute name. (i.e. data-name) [2]
- <depends>: the url for extra JS files [3][4]
- <script> the script content [2]
- <script src="foo.js"> the src attribute for the script, it can be a url of a JS script from context-path or a url from class-path. For example,
<script-uri>~./myscript</script-uri>
- <script src="foo.js"> the src attribute for the script, it can be a url of a JS script from context-path or a url from class-path. For example,
Version History
| Version | Date | Content |
|---|---|---|
| 5.0.3 | July 2010 | The client-attribute namespace was introduced. |
| 8.0.0 | May 2015 | Support client data attributes handler |