HTML5 attribute for ZK

Question

I have some html5 written which i need to re-implement for a ZK6 application.

I am struggling with the data-* attribute.

For example

 <div class="caption lft"
                                 data-x="140"
                                 data-y="60"
                                 data-speed="900"
                                 data-start="800"
                                 data-easing="Sine.easeOut"> <h:img id="tp-mainImgSlide-02" src="img/slider/pic1.png" alt=""/> 
                                 </div>

I get the error

Cause: Method setData-x not found for class org.zkoss.zul.Div

Has anyone encountered this issue with HTML5 in ZK 6 and do you know how to resolve?

Answer 1

You might want to use a h:div with h being the namespace for html, the same way you did for img:

 <h:div class="caption lft" data-x="140" data-y="60" data-speed="900" data-start="800" data-easing="Sine.easeOut"> 
     <h:img id="tp-mainImgSlide-02" src="img/slider/pic1.png" alt=""/> 
 </div>

the html div is not the same as the zul one.

Answer 2

You have two options for specifying HTML5 data attributes in ZUL file

First option, use native html element as suggested by RC.

Second option, use client attribute namespace. This should work with any ZK component.

<zk xmlns:ca="xmlns:ca="http://www.zkoss.org/2005/zk/client/attribute">
  <div ca:data-x="140"></div>
</zk>

This will output a native div html element with data-x attribute