blur (eventCallback)
Called when any element in the set of matched elements loses focus.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when any element in the set of matched elements loses focus.
<div class="area">
<div class="flex-row gap-horizontal-sm">
<input type="text" class="input-sm width-lg" id="textbox1" />
<select class="input-sm width-lg" id="select1">
<option value="0">-- Select --</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
webui.ready(function() {
ui("#textbox1, #select1").blur(function(e) {
console.log("Event fired.");
});
});
change (eventCallback)
Called when the value is changed for any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called the value is changed for any element in the set of matched elements.
<div class="area">
<div class="flex-row gap-horizontal-sm">
<input type="text" class="input-sm width-lg" id="textbox1" />
<select class="input-sm width-lg" id="select1">
<option value="0">-- Select --</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
webui.ready(function() {
ui("#textbox1, #select1").change(function(e) {
console.log("Event fired.");
});
});
click (eventCallback)
Called when any element in the set of matched elements receives mouse click events.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when any element in the set of matched elements receives mouse click events.
<div class="width-xl">
<div class="flex-row gap-horizontal-sm">
<div class="container flex-auto height-md border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-md border-sm border-dark" id="div2"></div>
</div>
</div>
webui.ready(function() {
ui(".container").click(function(e) {
console.log("Event fired.");
});
});
dblclick (eventCallback)
Called when any element in the set of matched elements receives mouse double click events.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when any element in the set of matched elements receives mouse double click events.
<div class="width-xl">
<div class="flex-row gap-horizontal-sm">
<div class="container flex-auto height-md border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-md border-sm border-dark" id="div2"></div>
</div>
</div>
webui.ready(function() {
ui(".container").dblclick(function(e) {
console.log("Event fired.");
});
});
drag (eventCallback)
Called when any draggable element in the set of matched elements changes position during the drag operation.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when any draggable element in the set of matched elements changes position during the drag operation.
<div class="panel border-sm border-dark width-md-lg height-lg-xl" id="exampleArea">
<div class="container info width-md height-sm cursor-copy" draggable="true" id="dragItem1">
<span class="place-middle-center">DragItem1</span>
</div>
<div class="container success width-md height-sm cursor-copy" draggable="true" id="dragItem2">
<span class="place-middle-center">DragItem2</span>
</div>
<div class="container warning width-md height-sm cursor-copy" draggable="true" id="dragItem3">
<span class="place-middle-center">DragItem3</span>
</div>
</div>
webui.ready(function() {
ui(".container").drag( function(e) {
console.log(e.clientX + ", " + e.clientY);
});
});
dragEnd (eventCallback)
Called when the drag an drop operation has completed for any draggable element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when the drag an drop operation has completed for any draggable element in the set of matched elements.
<div class="panel border-sm border-dark width-md-lg height-lg-xl" id="exampleArea">
<div class="container info width-md height-sm cursor-copy" draggable="true" id="dragItem1">
<span class="place-middle-center">DragItem1</span>
</div>
<div class="container success width-md height-sm cursor-copy" draggable="true" id="dragItem2">
<span class="place-middle-center">DragItem2</span>
</div>
<div class="container warning width-md height-sm cursor-copy" draggable="true" id="dragItem3">
<span class="place-middle-center">DragItem3</span>
</div>
</div>
webui.ready(function() {
ui(".container").dragEnd( function(e) {
console.log("dragEnd");
});
});
dragEnter (eventCallback)
Called when any draggable element in the set of matched elements enters a valid drop target.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when any draggable element in the set of matched elements enters a valid drop target.
<div class="panel border-sm border-dark width-md-lg height-lg-xl" id="exampleArea">
<div class="container info width-md height-sm cursor-copy" draggable="true" id="dragItem1">
<span class="place-middle-center">DragItem1</span>
</div>
<div class="container success width-md height-sm cursor-copy" draggable="true" id="dragItem2">
<span class="place-middle-center">DragItem2</span>
</div>
<div class="container warning width-md height-sm cursor-copy" draggable="true" id="dragItem3">
<span class="place-middle-center">DragItem3</span>
</div>
</div>
webui.ready(function() {
ui(".container").dragEnter( function(e) {
console.log("dragEnter");
});
});
dragLeave (eventCallback)
Called when any draggable element in the set of matched elements leaves a valid drop target.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when any draggable element in the set of matched elements leaves a valid drop target.
<div class="panel border-sm border-dark width-md-lg height-lg-xl" id="exampleArea">
<div class="container info width-md height-sm cursor-copy" draggable="true" id="dragItem1">
<span class="place-middle-center">DragItem1</span>
</div>
<div class="container success width-md height-sm cursor-copy" draggable="true" id="dragItem2">
<span class="place-middle-center">DragItem2</span>
</div>
<div class="container warning width-md height-sm cursor-copy" draggable="true" id="dragItem3">
<span class="place-middle-center">DragItem3</span>
</div>
</div>
webui.ready(function() {
ui(".container").dragLeave( function(e) {
console.log("dragLeave");
});
});
dragOver (eventCallback)
Called when a draggable element is dragged over any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when a draggable element is dragged over any element in the set of matched elements.
<div class="panel border-sm border-dark width-md-lg height-lg-xl" id="exampleArea">
<div class="container info width-md height-sm cursor-copy" draggable="true" id="dragItem1">
<span class="place-middle-center">DragItem1</span>
</div>
<div class="container success width-md height-sm cursor-copy" draggable="true" id="dragItem2">
<span class="place-middle-center">DragItem2</span>
</div>
<div class="container warning width-md height-sm cursor-copy" draggable="true" id="dragItem3">
<span class="place-middle-center">DragItem3</span>
</div>
</div>
webui.ready(function() {
ui(".panel").dragOver( function(e) {
e.preventDefault();
webui(e.target).setState("border-dark", "border-info");
});
});
dragStart (eventCallback)
Initiates a drag and drop operation for each draggable element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called at the start of a drag and drop operation for each draggable element in the set of matched elements.
<div class="panel border-sm border-dark width-md-lg height-lg-xl" id="exampleArea">
<div class="container info width-md height-sm cursor-copy" draggable="true" id="dragItem1">
<span class="place-middle-center">DragItem1</span>
</div>
<div class="container success width-md height-sm cursor-copy" draggable="true" id="dragItem2">
<span class="place-middle-center">DragItem2</span>
</div>
<div class="container warning width-md height-sm cursor-copy" draggable="true" id="dragItem3">
<span class="place-middle-center">DragItem3</span>
</div>
</div>
webui.ready(function() {
ui(".container").dragStart( function(e) {
e.dataTransfer.setData("Example data", e.target.id);
});
});
drop (eventCallback)
Called when a draggable element is dropped on any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when a draggable element is dropped on any element in the set of matched elements.
<div class="panel border-sm border-dark width-md-lg height-lg-xl" id="exampleArea">
<div class="container info width-md height-sm cursor-copy" draggable="true" id="dragItem1">
<span class="place-middle-center">DragItem1</span>
</div>
<div class="container success width-md height-sm cursor-copy" draggable="true" id="dragItem2">
<span class="place-middle-center">DragItem2</span>
</div>
<div class="container warning width-md height-sm cursor-copy" draggable="true" id="dragItem3">
<span class="place-middle-center">DragItem3</span>
</div>
</div>
webui.ready(function() {
ui(".panel").drop( function(e) {
e.preventDefault();
webui(e.target).setState("border-info", "border-dark");
var data = e.dataTransfer.getData("text");
webui(e.target).append(webui("#" + data));
});
});
focus (eventCallback)
Called when any element in the set of matched elements gains focus.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when any element in the set of matched elements gains focus.
<div class="area">
<div class="flex-row gap-horizontal-sm">
<input type="text" class="input-sm width-lg" id="textbox1" />
<select class="input-sm width-lg" id="select1">
<option value="0">-- Select --</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
webui.ready(function() {
ui("#textbox1, #select1").focus(function(e) {
console.log("Event fired.");
});
});
focusIn (eventCallback)
Called when any element, its parent, or its child elements in the set of matched elements is about to gain focus.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when any element, its parent, or its child elements in the set of matched elements is about to gain focus.
<div class="area">
<div class="flex-row gap-horizontal-sm">
<input type="text" class="input-sm width-lg" id="textbox1" />
<select class="input-sm width-lg" id="select1">
<option value="0">-- Select --</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
webui.ready(function() {
ui(".area").focusIn(function(e) {
console.log("Event fired.");
});
});
focusOut (eventCallback)
Called when any element, its parent, or its child elements in the set of matched elements is about to lose focus.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when any element, its parent, or its child elements in the set of matched elements is about to lose focus.
<div class="area">
<div class="flex-row gap-horizontal-sm">
<input type="text" class="input-sm width-lg" id="textbox1" />
<select class="input-sm width-lg" id="select1">
<option value="0">-- Select --</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
webui.ready(function() {
ui(".area").focusOut(function(e) {
console.log("Event fired.");
});
});
hoverIn (eventCallback)
Called when the pointer device enters any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when the pointer device enters any element in the set of matched elements.
<div class="area">
<div class="flex-row gap-horizontal-sm">
<input type="text" class="input-sm width-lg" id="textbox1" />
<select class="input-sm width-lg" id="select1">
<option value="0">-- Select --</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
webui.ready(function() {
ui(".area").hoverIn(function(e) {
console.log("Event fired.");
});
});
hoverOut (eventCallback)
Called when the pointer device leaves any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when the pointer device leaves any element in the set of matched elements.
<div class="area">
<div class="flex-row gap-horizontal-sm">
<input type="text" class="input-sm width-lg" id="textbox1" />
<select class="input-sm width-lg" id="select1">
<option value="0">-- Select --</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
webui.ready(function() {
ui(".area").hoverOut(function(e) {
console.log("Event fired.");
});
});
keyDown (eventCallback)
Called when any element in the set of matched elements receives keyboard key down events.
Returns - WebUI object.
Argument
Type
Description
eventCallback
function
A function that will be called when any element in the set of matched elements receives keyboard key down events.
<div class="area">
<div class="flex-row gap-horizontal-sm">
<input type="text" class="input-sm width-lg" id="textbox1" />
<select class="input-sm width-lg" id="select1">
<option value="0">-- Select --</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
webui.ready(function() {
ui("#textbox1, #select1").keyDown(function(e) {
console.log("Event fired.");
});
});
off (name, callback)
Removes the named event listener for all elements in the set of matched elements, and optionally with a callback.
Returns - WebUI object.
Argument
Type
Description
name
String
The name of the event matched by the trigger function.
callback
function
A function that will be called when the named event is triggered on any element in the set of matched elements.
<div class="width-xl">
<div class="flex-row gap-horizontal-sm">
<div class="container flex-auto height-md border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-md border-sm border-dark" id="div2"></div>
</div>
</div>
webui.ready(function() {
ui(".container").on("customEvent", function(e) {
console.log("Data for event: " + e.detail);
ui(".container").off("customEvent", function(e) {
console.log("Listener removed.");
});
});
ui(".container").trigger("customEvent", "example data.");
});
on (name, callback)
Adds an event listener for the named event, and is called when the named event is dispatched by the trigger function for any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
name
String
The name of the event matched by the trigger function.
callback
function
A function that will be called when the named event is triggered on any element in the set of matched elements.
<div class="width-xl">
<div class="flex-row gap-horizontal-sm">
<div class="container flex-auto height-md border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-md border-sm border-dark" id="div2"></div>
</div>
</div>
webui.ready(function() {
ui(".container").on("customEvent", function(e) {
console.log("Data for event: " + e.detail);
});
ui(".container").trigger("customEvent", "example data.");
});
resize (eventCallback, params)
Creates a resize event for any HTML element.
Returns - Date object.
Argument
Type
Description
eventCallback
Function
A function to be called when a reset event occurs.
params
Object
Any JavaScript object.
<div class="area text-sm" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<button type="button" class="button-sm button-accent-1" id="resizeButton">Resize</button>
<div class="width-md height-control-sm control" id="resizeExample"></div>
</div>
</div>
webui.ready(function() {
var resizeCallback = function (el, params) {
console.log(el);
console.log("Name: " + params.name + ", Data: " + params.data);
};
ui("#resizeExample").resize(resizeCallback, {
name: "EventData",
data: 54321
});
ui("#resizeButton").click(function() {
ui("#resizeExample").css("height", "20rem");
});
});
trigger (eventCallback, args)
Dispatches the named event to matching event listerners for all elements in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
eventCallback
String
The name of the event.
args
String
Any data that should be carried in the event detail and available to matching event listeners.
<div class="width-xl">
<div class="flex-row gap-horizontal-sm">
<div class="container flex-auto height-md border-sm border-dark" id="div1"></div>
<div class="container flex-auto height-md border-sm border-dark" id="div2"></div>
</div>
</div>
webui.ready(function() {
ui(".container").on("customEvent", function(e) {
console.log("Data for event: " + e.detail);
});
ui(".container").trigger("customEvent", "example data.");
});
