|
|
Line 29: |
Line 29: |
| whatever_value_you_want | | whatever_value_you_want |
| </attribute> | | </attribute> |
− | </div>
| |
− | </source>
| |
− |
| |
− | '''data-swipeable'''
| |
− |
| |
− | ZK EE tablet only
| |
− | Each layout region in borderlayout can support the closing and opening of the region area by user's swipe on the edge of the region with client/attribute<ref>For more information, please refer to [[ZK Component Reference/Tablet Devices/UI Enhancements/Borderlayout#SwipeEvent_Support|ZK Component Reference Tablet Devices: Borderlayout]].</ref>.
| |
− |
| |
− | <source lang="xml">
| |
− | <div xmlns:ca="client/attribute">
| |
− | <borderlayout xmlns:ca="client/attribute" ca:data-swipeable="true">
| |
− | whatever_value_you_want
| |
− | </borderlayout>
| |
− | </div>
| |
− | </source>
| |
− |
| |
− |
| |
− | Tabbox supports the switching of tabs by user swiping on the edge of the content with client attribute<ref>For more information, please refer to [[ZK Component Reference/Tablet Devices/UI Enhancements/Tabbox#SwipeEvent_Support|ZK Component Reference Tablet Devices: Tabbox]].</ref>.
| |
− | <source lang="xml">
| |
− | <div xmlns:ca="client/attribute">
| |
− | <tabbox xmlns:ca="client/attribute" ca:data-swipeable="true">
| |
− | whatever_value_you_want
| |
− | </tabbox>
| |
− | </div>
| |
− | </source>
| |
− |
| |
− |
| |
− | Within Tree, Grid, and Listbox, Paging can support the navigation to the previous or the next page by user swiping on the edge of the content with client attribute<ref>For more information, please refer to [[ZK Component Reference/Tablet Devices/UI Enhancements/Paging#SwipeEvent_Support|ZK Component Reference Tablet Devices: Paging]].</ref>.
| |
− | <source lang="xml">
| |
− | <div xmlns:ca="client/attribute">
| |
− | <listbox mold="paging" pageSize="5" xmlns:ca="client/attribute" ca:data-swipeable="true"></listbox>
| |
− | </div>
| |
− | </source>
| |
− |
| |
− |
| |
− | Calendar can support the switching of view by user swiping on the content with client attribute<ref>For more information, please refer to [[ZK Component Reference/Tablet Devices/UI Enhancements/Calendar#Friendly_Scrolling_Support|ZK Component Reference Tablet Devices: Calendar]].</ref>.
| |
− | <source lang="xml">
| |
− | <div xmlns:ca="client/attribute">
| |
− | <calendar xmlns:ca="client/attribute" ca:data-swipeable="true" />
| |
− | </div>
| |
− | </source>
| |
− |
| |
− | '''data-scrollable'''
| |
− |
| |
− | if user scroll container widget which applies the data-scrollable attribute, the errorbox inside the container widget should also scroll<ref>
| |
− | For more information, please refer to http://www.zkoss.org/javadoc/7.0.1/jsdoc/zul/ContainerWidget.html</ref>.
| |
− | Since ZK 7.0.1
| |
− | <source lang="xml">
| |
− | <div xmlns:ca="client/attribute">
| |
− | <window height="100px" contentStyle="overflow:auto" ca:data-scrollable="true">
| |
− | </window>
| |
− | </div>
| |
− | </source>
| |
− |
| |
− | When user swipes on the content of Listbox, Grid, Tree in a tablet device, the friendly scrollbar will appear. To disable the friendly scrollbar, please use the following setting<ref>For more information, please refer to [[ZK Component Reference/Tablet Devices/UI Enhancements/Listbox#Friendly_Scrolling_Support|ZK Component Reference Tablet Devices: Listbox]], [[ZK Component Reference/Tablet Devices/UI Enhancements/Grid#Friendly_Scrolling_Support|ZK Component Reference Tablet Devices: Grid]], [[ZK Component Reference/Tablet Devices/UI Enhancements/Tree#Friendly_Scrolling_Support|ZK Component Reference Tablet Devices: Tree]].</ref>.
| |
− |
| |
− | ZK EE tablet only
| |
− |
| |
− | <source lang="xml">
| |
− | <div xmlns:ca="client/attribute">
| |
− | <listbox xmlns:a="client/attribute" a:data-scrollable="false"/>
| |
− | </div>
| |
− | </source>
| |
− |
| |
− | '''data-embedscrollbar'''
| |
− | ZK EE tablet only
| |
− | To show the position of zk customized scrollbar, the mesh component should apply data-embedscrollbar attribute.
| |
− |
| |
− | <source lang="xml">
| |
− | <div xmlns:ca="client/attribute">
| |
− | <grid ca:data-embedscrollbar="true"></grid>
| |
− | </div>
| |
− | </source>
| |
− |
| |
− | '''data-fixscrollposition'''
| |
− |
| |
− | To prevent conflict with 'next' and 'previous' button on the virtual keyboard on iPad. The input element should apply data-fixScrollPosition attribute<ref>For more information, please refer to http://tracker.zkoss.org/browse/ZK-1285</ref>.
| |
− | <source lang="xml">
| |
− | <div xmlns:ca="client/attribute">
| |
− | <textbox xmlns:ca="client/attribute" ca:data-fixScrollPosition="true"></textbox>
| |
| </div> | | </div> |
| </source> | | </source> |
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.
Version History
Version |
Date |
Content
|
5.0.3
|
July 2010
|
The client-attribute namespace was introduced.
|