About this page

This page explain about the JavaScript code generated by the UI editor.

About Automatic Evaluation (Auto Eval)

Each line of jQuery code generated by the UI editor begins like this:

/*!kz:autoeval*/

This autoeval comment ensures that the code in its line will be executed immediately.

To avoid conflict between DOM creation and applying the Variation, remove these autoeval comments from the lines. Without the autoeval comment, the lines will be executed after DOMContentLoaded events.

How UI editor uses jQuery method

Edit HTML

The Kaizen Platform UI editor uses the following codes to edit HTML:

• html(val)
• replaceWith(content)
• append(content)
• remove()
• attr(properties)

Edit Style

To set a style, the UI editor uses:

• attr(properties)

Edit Attributes

To adjust Atributes, the Kaizen Platform UI editor uses:

• attr(properties): to change value and addition of Attributes
• removeAttr(name): to delete Attributes

Set a background image

To set a background image, the Kaizen Platform UI editor uses css({ "background-image": "Image URL" }).

• css(properties)

Add jQuery coding

Adding jQuery coding is possible. Find out more at jQuery reference.

Removing Elements

• remove()

Drag to move

This code explains the relative position from a parent element:

$("#element").css({"position":"relative","left":"150px","top":"69px"});

• css(properties)

Insert images

Use the append(content) method and insert the<img>-tag.

• append(content)

Insert HTML

• before(content): insert HTML into the previous element
• after(content): insert HTML after this element
• prepend(content): insert HTML at the top of the element
• append(content): insert HTML at the end of the element
• wrap(html): wrap an element in HTML
• wrapInner(html): wrap a child-element in HTML