3.0 beta 2

AX.HTML

Represents a single HTML tag. Allows to specify CSS classes, styles and HTML attributes.

Can also represent an HTML fragment when the tag property set to empty string.

Base class for ActiveWidgets component.

Properties

attributes

HTML attributes collection (see Attributes).

obj.attributes().set('title', 'xyz');

Adds attribute shortcut.

// get attribute
vat s = obj.attribute('title');

// set attribute
obj.attribute('title', 'abc');

classes

CSS classes collection (see Classes).

obj.classes().add('my-class');

or

obj.classes().remove('my-class');

id

An HTML id attribute. For the standalone or top-level objects you have to assign a unique ID and put a placeholder element with the same id into your markup.

var obj = new AX.Component({
    id: 'xyz123'
});

innerHTML

HTML content. Automatically compiles input string to template function.

var obj = new AX.HTML({

    name: 'abc',
    value: 123,

    innerHTML: '{{@name}}: <i>{{@value}}</i>'
});

outerHTML

HTML markup, including opening and closing tags. Switches to {{@innerHTML}} if the tag property is an empty string.

var outerHTML = AX.template('<{{@tag}}{{@attributes}}>{{@innerHTML}}</tag>');

styles

CSS styles collection (see Styles).

obj.styles().set('color', 'red');

Adds style shortcut.

// get style
var s = obj.style('color');

// set style
obj.style('color', 'red');

tag

HTML tag.

var input = AX.HTML({
    tag: 'input',
    attributes: {
        type: 'text',
        value: 'abc'
    }
});

Assigning an empty string switches the object into HTML fragment mode (innerHTML only).

var message = new AX.HTML({
    tag: '',
    innerHTML: 'hello!'
});

Methods

dom()

Returns the underlying DOM element (or undefined if the object is not rendered).

obj.dom().scrollTop = 100;

Parameters

none

Returns

  • DOM element. The reference to the DOM element.