addClass (className)
Adds the specified class(es) to each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
className
String
A single class name or a list of class names separated by a space.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm"></div>
<div class="width-md height-sm"></div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").addClass("background-accent-1-light border-md border-dark");
});
append (elements, appendToStart)
Appends the specified elements or DOM fragment to each element in the set of matched elements or DOM fragment. Element objects specified as the first argument can be an HTMLElement, a WebUI onject, or a valid DOM fragment. If a valid DOM fragment string is specified, a new DOM element is created and converted to a WebUI object, and then appended.
Returns - WebUI object.
Argument
Type
Description
elements
Onject or String
An HTMLElement, a WebUI object, or a valid DOM fragment.
appendToStart
Boolean
Either true or false. If true, elements are appended before any existing elements in the node list.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm" id="element1"></div>
<div class="width-md height-sm" id="element2"></div>
</div>
</div>
webui.ready(function() {
ui("#element1").append(ui("#element2").append("<div class='width-md height-sm'>Element 2A</div>"));
});
appendTo (to)
This method is similar to append(), but appends the matched elements or DOM fragment to a specified target elements or DOM fragment at the end of the node list.
Returns - WebUI object.
Argument
Type
Description
to
Object or String
An HTMLElement, a WebUI object, or a valid DOM fragment.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm" id="element1"></div>
<div class="width-md height-sm" id="element2"></div>
</div>
</div>
webui.ready(function() {
ui("<div class='width-md height-sm'>Element 3</div>").appendTo(ui(".flex-row"));
});
attr (attrName)
Gets the specified attribute values of each element in the set of matched elements.
Returns - A single attribute value or an array of attribute values.
Argument
Type
Description
attrName
String
A single attribute name.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm" id="exampleDiv1"></div>
<div class="width-md height-sm" id="exampleDiv2"></div>
</div>
</div>
webui.ready(function() {
var ids = ui("#exampleArea .flex-row div").attr("id");
});
attr (attrName, attrValue)
Sets the specified attribute value for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
attrName
String
A single attribute name.
attrValue
String
A single attribute value. If set to null or "", the named attribute will be removed from the element.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm" id="exampleDiv1"></div>
<div class="width-md height-sm" id="exampleDiv2"></div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").first().attr("id", "div1");
ui("#exampleArea .flex-row div").last().attr("id", "div2")
});
css (ruleName)
Gets the specified computed css property values of each element in the set of matched elements.
Returns - A single css property value or an array of css property values.
Argument
Type
Description
ruleName
String
A single css property name.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm"></div>
<div class="width-md height-sm""></div>
</div>
</div>
webui.ready(function() {
var heights = ui("#exampleArea .flex-row div").css("height");
});
css (ruleName, ruleValue)
Sets the specified css property value for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
ruleName
String
A single css property name.
ruleValue
String
A single css property value. If set to null or "", the named css property will be removed from the element.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm"></div>
<div class="width-md height-sm"></div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").first().css("height", "5rem");
ui("#exampleArea .flex-row div").last().css("height", "5rem")
});
data (dataName)
Gets the specified data attribute values of each element in the set of matched elements.
Returns - A single data attribute value or an array of attribute values.
Argument
Type
Description
dataName
String
A single data attribute name.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm" data-percent="20"></div>
<div class="width-md height-sm" data-percent="50"></div>
</div>
</div>
webui.ready(function() {
var percentages = ui("#exampleArea .flex-row div").data("percent");
});
data (dataName, dataValue)
Sets the specified data attribute value for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
dataName
String
A single data attribute name.
dataValue
String
A single data attribute value. If set to null or "", the named data attribute will be removed from the element.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm" data-percent="20"></div>
<div class="width-md height-sm" data-percent="50"></div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").first().data("percent", "10");
ui("#exampleArea .flex-row div").last().data("percent", "25")
});
hasClass (className)
Determines whether the specified class(es) exist on any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
className
String
A single class name or a list of class names separated by a space.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm"></div>
<div class="width-md height-sm example"></div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").hasClass("example");
});
hidden ()
Sets the visibility property to hidden of each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").first().hidden();
});
hide ()
Sets the display property to none of each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").first().hide();
});
html ()
Gets the inner html of each element in the set of matched elements.
Returns - The element inner html fragment or an array of element inner html fragments.
<div class="area">
<div class="flex-row control-group">
<div class="form-col">
<div class="width-md height-md background-accent-1-light pad-sm" id="exampleDiv"><div class="width-sm height-xs accent-1"></div></div>
</div>
</div>
</div>
webui.ready(function() {
var divTextContent = ui("#exampleDiv").html();
});
html (value)
Sets the specified inner html fragment for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
value
String
Any html fragment.
<div class="area">
<div class="flex-row control-group">
<div class="form-col">
<div class="width-md height-md background-accent-1-light pad-sm" id="exampleDiv"></div>
</div>
</div>
</div>
webui.ready(function() {
ui("#exampleDiv").html("<div class='width-xs height-sm background-dark'></div>");
});
prependTo (to)
This method is similar to appendTo(), but prepends the matched elements or DOM fragment to a specified target elements or DOM fragment at the start of the node list.
Returns - WebUI object.
Argument
Type
Description
to
Object or String
An HTMLElement, a WebUI object, or a valid DOM fragment.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm" id="element1"></div>
<div class="width-md height-sm" id="element2"></div>
</div>
</div>
webui.ready(function() {
ui("<div class='width-md height-sm'>Element 3</div>").prependTo(ui(".flex-row"));
});
remove ()
Removes each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm example"></div>
<div class="width-md height-sm example"></div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").remove();
});
removeChildren ()
Removes all child elements of each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm example"></div>
<div class="width-md height-sm example"></div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row").removeChildren();
});
removeClass (className)
Removes the specified class(es) from each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
className
String
A single class name or a list of class names separated by a space.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm background-accent-1-light border-md border-dark"></div>
<div class="width-md height-sm background-accent-1-light border-md border-dark"></div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").removeClass("border-md border-dark");
});
show ()
Sets the display property to block of each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm hidden">Element 1</div>
<div class="width-md height-sm hidden">Element 2</div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").first().show();
});
text ()
Gets the text content of each element in the set of matched elements.
Returns - A single text content value or an array of text content values.
<div class="area">
<div class="flex-row">
<div class="form-col">
<div class="width-md height-sm" id="exampleDiv">Lorem ipsum dolor sit amet</div>
</div>
<div class="form-col">
<textarea class="control width-xl height-md" id="exampleTextarea">Lorem ipsum dolor sit amet</textarea>
</div>
</div>
</div>
webui.ready(function() {
var divTextContent = ui("#exampleDiv").text();
var textareaTextContent = ui("#exampleTextarea").text();
});
text (value)
Sets the specified text content for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
value
String
A single text value.
<div class="area">
<div class="flex-row">
<div class="form-col">
<div class="width-md height-sm" id="exampleDiv">Lorem ipsum dolor sit amet</div>
</div>
<div class="form-col">
<textarea class="control width-xl height-md" id="exampleTextarea">Lorem ipsum dolor sit amet</textarea>
</div>
</div>
</div>
webui.ready(function() {
ui("#exampleDiv").text("10");
ui("#exampleTextarea").text("Example text");
});
toggle
Shows or hides all elements in the set of matched elements, and sets the aria-hidden attribute to either true or false.
Returns - WebUI 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="toggleButton">Toggle</button>
<div class="width-md height-control-sm background-dark"></div>
<div class="width-md height-control-sm background-dark"></div>
</div>
</div>
webui.ready(function() {
ui("#toggleButton").click(function() {
ui("#exampleArea .flex-row div").toggle();
});
});
toggle (toggleState)
Shows or hides all elements in the set of matched elements depending on the toggleState argument, and sets the aria-hidden attribute to either true or false.
Returns - WebUI object.
Argument
Type
Description
toggleState
String
A value of "on" or "off".
<div class="area text-sm" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<button type="button" class="button-sm button-accent-1" id="toggleButtonOn">Toggle On</button>
<button type="button" class="button-sm button-accent-1" id="toggleButtonOff">Toggle Off</button>
<div class="width-md height-control-sm background-dark"></div>
<div class="width-md height-control-sm background-dark"></div>
</div>
</div>
webui.ready(function() {
ui("#toggleButtonOn").click(function() {
ui("#exampleArea .flex-row div").toggle("on");
});
ui("#toggleButtonOff").click(function() {
ui("#exampleArea .flex-row div").toggle("off");
});
});
toggleClass (className)
Toggles the addition or removal of a class or set of classes for all elements in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
className
String
A single class name or a list of class names separated by a space.
<div class="area text-sm" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<button type="button" class="button-sm button-accent-1" id="toggleButton">Toggle On</button>
<div class="width-md height-control-sm background-dark boundary-success"></div>
<div class="width-md height-control-sm background-dark boundary-success"></div>
</div>
</div>
webui.ready(function() {
ui("#toggleButton").click(function() {
ui("#exampleArea .flex-row div").toggleClass("background-dark");
});
});
val ()
Gets the value of each element in the set of matched elements.
Returns - A single element value or an array of element values.
<div class="flex-row">
<div class="form-col">
<input type="text" value="20" class="input-sm" id="exampleInput" />
</div>
<div class="form-col">
<select class="input-sm" id="exampleSelect">
<option value="1">Austria</option>
<option value="3">Bulgaria</option>
<option value="4">Canada</option>
<option value="5">Denmark</option>
<option value="6">England</option>
<option value="7">Finland</option>
<option value="8">Germany</option>
</select>
</div>
</div>
webui.ready(function() {
var textInputValue = ui("#exampleInput").val();
var selectInputValue = ui("#exampleSelect").val();
});
val (value)
Sets the specified value for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
value
String
A single value.
<div class="flex-row">
<div class="form-col">
<input type="text" value="20" class="input-sm" id="exampleInput" />
</div>
<div class="form-col">
<select class="input-sm" id="exampleSelect">
<option value="1">Austria</option>
<option value="3">Bulgaria</option>
<option value="4">Canada</option>
<option value="5">Denmark</option>
<option value="6">England</option>
<option value="7">Finland</option>
<option value="8">Germany</option>
</select>
</div>
</div>
webui.ready(function() {
ui("#exampleInput").val("10");
ui("#exampleSelect").val("5");
});
visible ()
Sets the visibility property to visible of each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm invisible">Element 1</div>
<div class="width-md height-sm invisible">Element 2</div>
</div>
</div>
webui.ready(function() {
ui("#exampleArea .flex-row div").first().visible();
});
