blur (callback)
Called when any element in the set of matched elements loses focus.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements loses focus.
<div class="flex gap-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>
HTML
webui.ready( () => {
ui("#textbox1, #select1").blur( (e) => {
console.log("Event fired for " + e.target.id);
});
});
JS
change (callback)
Called when the value is changed for any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called the value is changed for any element in the set of matched elements.
<div class="flex gap-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>
HTML
webui.ready( () => {
ui("#textbox1, #select1").change( (e) => {
console.log("Event fired for " + e.target.id);
});
});
JS
click (callback)
Called when any element in the set of matched elements receives mouse click events.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements receives mouse click events.
<div class="flex gap-sm width-xl"> <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>
HTML
webui.ready( () => {
ui(".container").click( (e) => {
console.log("Event fired for " + e.target.id);
});
});
JS
dblclick (callback)
Called when any element in the set of matched elements receives mouse double click events.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements receives mouse double click events.
<div class="flex gap-sm width-xl"> <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>
HTML
webui.ready( () => {
ui(".container").dblclick( (e) => {
console.log("Event fired for " + e.target.id);
});
});
JS
drag (callback)
Called when any draggable element in the set of matched elements changes position during the drag operation.
Returns - WebUI object.
Argument
Type
Description
callback
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="border-sm border-dark width-md height-lg-xl" id="dragDropExample">
<div class="flex align-items-center justify-content-center info height-sm cursor-copy" draggable="true" id="dragItem1">
<label>1</label>
</div>
<div class="flex align-items-center justify-content-center success height-sm cursor-copy" draggable="true" id="dragItem2">
<label>2</label>
</div>
<div class="flex align-items-center justify-content-center warning height-sm cursor-copy" draggable="true" id="dragItem3">
<label>3</label>
</div>
</div>
HTML
webui.ready( () => {
ui("#dragItem1, #dragItem2, #dragItem3").drag( (e) => {
console.log("drag");
});
});
JS
dragEnd (callback)
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
callback
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="border-sm border-dark width-md height-lg-xl" id="dragDropExample">
<div class="flex align-items-center justify-content-center info height-sm cursor-copy" draggable="true" id="dragItem1">
<label>1</label>
</div>
<div class="flex align-items-center justify-content-center success height-sm cursor-copy" draggable="true" id="dragItem2">
<label>2</label>
</div>
<div class="flex align-items-center justify-content-center warning height-sm cursor-copy" draggable="true" id="dragItem3">
<label>3</label>
</div>
</div>
HTML
webui.ready( () => {
ui("#dragItem1, #dragItem2, #dragItem3").dragEnd( (e) => {
console.log("dragEnd");
});
});
JS
dragEnter (callback)
Called when any draggable element in the set of matched elements enters a valid drop target.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any draggable element in the set of matched elements enters a valid drop target.
<div class="border-sm border-dark width-md height-lg-xl" id="dragDropExample">
<div class="flex align-items-center justify-content-center info height-sm cursor-copy" draggable="true" id="dragItem1">
<label>1</label>
</div>
<div class="flex align-items-center justify-content-center success height-sm cursor-copy" draggable="true" id="dragItem2">
<label>2</label>
</div>
<div class="flex align-items-center justify-content-center warning height-sm cursor-copy" draggable="true" id="dragItem3">
<label>3</label>
</div>
</div>
HTML
webui.ready( () => {
ui("#dragDropExample").dragEnter( (e) => {
console.log("dragEnter");
});
});
JS
dragLeave (callback)
Called when any draggable element in the set of matched elements leaves a valid drop target.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any draggable element in the set of matched elements leaves a valid drop target.
<div class="border-sm border-dark width-md height-lg-xl" id="dragDropExample">
<div class="flex align-items-center justify-content-center info height-sm cursor-copy" draggable="true" id="dragItem1">
<label>1</label>
</div>
<div class="flex align-items-center justify-content-center success height-sm cursor-copy" draggable="true" id="dragItem2">
<label>2</label>
</div>
<div class="flex align-items-center justify-content-center warning height-sm cursor-copy" draggable="true" id="dragItem3">
<label>3</label>
</div>
</div>
HTML
webui.ready( () => {
ui("#dragDropExample").dragLeave( (e) => {
console.log("dragLeave");
});
});
JS
dragOver (callback)
Called when a draggable element is dragged over any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when a draggable element is dragged over any element in the set of matched elements.
<div class="border-sm border-dark width-md height-lg-xl" id="dragDropExample">
<div class="flex align-items-center justify-content-center info height-sm cursor-copy" draggable="true" id="dragItem1">
<label>1</label>
</div>
<div class="flex align-items-center justify-content-center success height-sm cursor-copy" draggable="true" id="dragItem2">
<label>2</label>
</div>
<div class="flex align-items-center justify-content-center warning height-sm cursor-copy" draggable="true" id="dragItem3">
<label>3</label>
</div>
</div>
HTML
webui.ready( () => {
ui("#dragDropExample").dragOver( (e) => {
e.preventDefault();
webui(e.target).setControlState("border-dark", "border-info");
});
});
JS
dragStart (callback)
Initiates a drag and drop operation for each draggable element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
callback
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="border-sm border-dark width-md height-lg-xl" id="dragDropExample">
<div class="flex align-items-center justify-content-center info height-sm cursor-copy" draggable="true" id="dragItem1">
<label>1</label>
</div>
<div class="flex align-items-center justify-content-center success height-sm cursor-copy" draggable="true" id="dragItem2">
<label>2</label>
</div>
<div class="flex align-items-center justify-content-center warning height-sm cursor-copy" draggable="true" id="dragItem3">
<label>3</label>
</div>
</div>
HTML
webui.ready( () => {
ui("#dragItem1, #dragItem2, #dragItem3").dragStart( (e) => {
if (e.target.draggable === true) {
e.dataTransfer.setData("exampleData", e.target.id);
console.log("dragStart event data: " + e.target.id);
}
else {
e.preventDefault();
}
});
});
JS
drop (callback)
Called when a draggable element is dropped on any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when a draggable element is dropped on any element in the set of matched elements.
<div class="border-sm border-dark width-md height-lg-xl" id="dragDropExample">
<div class="flex align-items-center justify-content-center info height-sm cursor-copy" draggable="true" id="dragItem1">
<label>1</label>
</div>
<div class="flex align-items-center justify-content-center success height-sm cursor-copy" draggable="true" id="dragItem2">
<label>2</label>
</div>
<div class="flex align-items-center justify-content-center warning height-sm cursor-copy" draggable="true" id="dragItem3">
<label>3</label>
</div>
</div>
HTML
webui.ready( () => {
ui("#dragDropExample").drop( (e) => {
if (e.target.id === "dragDropExample") {
webui(e.target).setControlState("border-info", "border-dark");
var data = e.dataTransfer.getData("exampleData");
if (data) {
webui(e.target).append(webui("#" + data));
console.log("drop event data: " + data);
}
}
else {
e.preventDefault();
}
});
});
JS
focus (callback)
Called when any element in the set of matched elements gains focus.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements gains focus.
<div class="flex gap-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>
HTML
webui.ready( () => {
ui("#textbox1, #select1").focus( (e) => {
console.log("Event fired for " + e.target.id);
});
});
JS
focusIn (callback)
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
callback
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="flex gap-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>
HTML
webui.ready( () => {
ui(".area").focusIn( (e) => {
console.log("Event fired for " + e.target.id);
});
});
JS
focusOut (callback)
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
callback
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="flex gap-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>
HTML
webui.ready( () => {
ui(".area").focusOut( (e) => {
console.log("Event fired for " + e.target.id);
});
});
JS
hoverIn (callback)
Called when the pointer device enters any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when the pointer device enters any element in the set of matched elements.
<div class="flex gap-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>
HTML
webui.ready( () => {
ui(".area").hoverIn( (e) => {
console.log("Event fired for " + e.target.id);
});
});
JS
hoverOut (callback)
Called when the pointer device leaves any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when the pointer device leaves any element in the set of matched elements.
<div class="flex gap-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>
HTML
webui.ready( () => {
ui(".area").hoverOut( (e) => {
console.log("Event fired for " + e.target.id);
});
});
JS
keyDown (callback)
Called when any element in the set of matched elements receives keyboard key down events.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements receives keyboard key down events.
<div class="flex gap-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>
HTML
webui.ready( () => {
ui("#textbox1, #select1").keyDown( (e) => {
console.log("Event fired for " + e.target.id);
});
});
JS
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="flex gap-sm width-xl"> <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>
HTML
webui.ready( () => {
function handleEvent(e) {
console.log("Event triggered: " + e.target.id);
ui("#div1").off("click", handleEvent);
}
ui("#div1").on("click", handleEvent);
});
JS
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="flex gap-sm width-xl"> <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>
HTML
webui.ready( () => {
function handleEvent(e) {
console.log("Event triggered: " + e.target.id);
ui("#div1").off("click", handleEvent);
}
ui("#div1").on("click", handleEvent);
});
JS
resize (callback)
Called when any resizable object in the set of matched elements is resized.
Returns - Date object.
Argument
Type
Description
callback
Function
A function to be called when a resize event occurs.
webui.ready( () => {
ui(window).resize( (e) => {
console.log("Window resize event triggered: " + e.timeStamp);
});
});
JS
scroll (callback)
Called when any scrollable object in the set of matched elements is scrolled.
Returns - Date object.
Argument
Type
Description
callback
Function
A function to be called when a scroll event occurs.
webui.ready( () => {
ui(window).scroll( (e) => {
console.log("Window scroll event triggered: " + e.timeStamp);
});
});
JS
touchEnd (callback)
Called when an element in the set of matched elements receives a touchEnd event.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements receives a touchEnd event.
<div class="height-md width-xl border-sm border-dark transition-long" id="div1"></div>
HTML
webui.ready( () => {
ui("#div1").touchEnd( (e) => {
console.log("Touch end event triggered for " + e.target.id);
});
});
JS
touchMove (callback)
Called when an element in the set of matched elements receives a touchMove event.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements receives a touchMove event.
<div class="height-md width-xl border-sm border-dark transition-long" id="div1"></div>
HTML
webui.ready( () => {
ui("#div1").touchMove( (e) => {
console.log("Touch move event triggered for " + e.target.id);
});
});
JS
touchStart (callback)
Called when an element in the set of matched elements receives a touchStart event.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements receives a touchStart event.
<div class="height-md width-xl border-sm border-dark transition-long" id="div1"></div>
HTML
webui.ready( () => {
ui("#div1").touchStart( (e) => {
console.log("Touch start event triggered for " + e.target.id);
});
});
JS
transitionEnd (callback)
Called when an element in the set of matched elements receives a transitionEnd event.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements receives a transitionEnd event.
<div class="height-md width-xl border-sm border-dark transition-long" id="div1"></div>
HTML
webui.ready( () => {
ui("#div1").transitionEnd( (e) => {
console.log("Transition end event triggered for " + e.target.id);
});
ui("#div1").css("width", "10%");
});
JS
transitionRun (callback)
Called when an element in the set of matched elements receives a transitionRun event.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements receives a transitionRun event.
<div class="height-md width-xl border-sm border-dark transition-long" id="div1"></div>
HTML
webui.ready( () => {
ui("#div1").transitionRun( (e) => {
console.log("Transition run event triggered for " + e.target.id);
});
ui("#div1").css("width", "10%");
});
JS
transitionStart (callback)
Called when an element in the set of matched elements receives a transitionStart event.
Returns - WebUI object.
Argument
Type
Description
callback
function
A function that will be called when any element in the set of matched elements receives a transitionStart event.
<div class="height-md width-xl border-sm border-dark transition-long" id="div1"></div>
HTML
webui.ready( () => {
ui("#div1").transitionStart( (e) => {
console.log("Transition start event triggered for " + e.target.id);
});
ui("#div1").css("width", "10%");
});
JS
trigger (callback, args)
Dispatches the named event to matching event listerners for all elements in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
callback
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="flex gap-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>
HTML
webui.ready( () => {
ui(".container").on("customEvent", (e) => {
console.log("Data for event: " + e.detail);
});
ui(".container").trigger("customEvent", "Example data.");
});
JS