Overview
The WebUI selector engine provides a rich query API for working with HTML elements. If you are already familiar with jQuery, the WebUI API will be easy to work with, as it works in the same way. The API includes all of the common methods needed for querying the document object model (DOM), and a range of higher level utility and component specific methods to make many tasks easier.
The selector engine converts HTML elements to WebUI objects, which are then returned by the API methods as a single object or an array of objects. It also makes it easy to create and append new elements to the DOM through its constructor.
WebUI Aliases
There are two alias variables that can be used with WebUI - these are "webui" or just "ui". These are equivalent to the "jQuery" and "$" aliases in jQuery. WebUI uses different aliases to avoid conflicts in projects that may be using jQuery as well as WebUI, although it is not recommended to use both if it can be avoided.
JavaScript DOM Ready Event
All WebUI JavaScript should be enclosed in the DOM ready event callback, as shown in the following example.
Use the optional flag set to true to ensure the page is fully loaded and the document.readyState is "complete" before running scripts. By default, the webui.ready event is called when the document DOMContentLoaded event is fired.
webui.ready( () => {
// Call WebUI functions here...
});
webui.ready( () => {
// Call WebUI functions here...
}, true);
DOM Ready EventNOTE: The webui.ready event does not need to be used if you are using a framework lifecycle mounted / render event.
JavaScript Files
For more information on the JavaScript files available and which CSS files they should be used with, see the Getting Started section.
Useage
Constructor
The WebUI constructor accepts a valid CSS selector expression or an HTML fragment. The following example shows using a selector expression to select a form column, and then appending an HTML fragment to the column.
<div class="container" id="exampleContainer">
<div class="flex-row">
<div class="flex-col">
</div>
</div>
</div>
webui.ready( () => {
let column = ui("#exampleContainer .flex-col");
ui("<div class='width-lg height-md accent-2-light'></div>").appendTo(column);
});
Method Chaining
All DOM traversal and manipulation API methods are chainable, since each method returns the HTML elements being acted on as a WebUI object. The next method in the chain knows how to work with elements returned by the previous. In the example below, a border is added to the div element before appending the result to the form column.
<div class="container" id="exampleContainer">
<div class="flex-row">
<div class="flex-col">
</div>
</div>
</div>
webui.ready( () => {
let column = ui("#exampleContainer .flex-col");
ui("<div class='width-lg height-md accent-2-light'></div>").addClass("border-sm border-dark").appendTo(column);
});