New HTML data clone feature is very useful to automatically duplicate any HTML tags.

Specific attributes can be used :

  • data-clone : number of clone to create, no default
  • data-clonestart : number of first element, 1 by default – use it to generate a dynamic id
  • data-clonestep : step number, 1 by default
  • data-cloneself : true by default. Cloning operation includes the tag itself, otherwise only the children will be cloned

The special sequence %% will be replaced anywhere in the cloned section by its iteration number, beginning from data-clonestart with a step of data-clonestep.

That job is done by new CYClone() function automatically called by CYLoadPage().

<div data-clone="2" data-clonestart="1" data-clonestep="2" data-cloneself="false">
    <h3>
        <l>
            Cloned section
        </l>&nbsp;%%
    </h3>
    <span id="myid%%">
        <p>
            This section %% has been automatically cloned with data-clone feature.
        </p>
    </span>
</div>

Will generate :

<h3>
    <l>
        Cloned section
    </l>&nbsp; 1
</h3>
<span id="myid1">
    <p>
        This section 1 has been automatically cloned with data-clone feature.
    </p>
</span>
<h3>
    <l>
        Cloned section
    </l>&nbsp; 3
</h3>
<span id="myid3">
    <p>
        This section 3 has been automatically cloned with data-clone feature.
    </p>
</span>

As you can see, the %% pattern is automatically replaced with the iteration number, beginning from data-clonestart with a step of data-clonestep – exactly as a for .. to .. step .. loop –

By default the itself would have been cloned too if the parameter data-cloneself  would have been unset.

Note that all data-clonexxxxxx attributes are deleted after parsing.