How to create controlgroup widget using jQuery-ui ?
Last Updated :
22 Oct, 2021
Controlgroups are used to group a set of buttons to form a single block visually. It looks contained like a navigation component. Controlgroup is used to group various input widgets like checkboxes, buttons, etc.
Horizontal controlgroup widget: In the horizontal control group, we can create a set of buttons horizontally.
Syntax:
$(".first_class" ).controlgroup({});
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = 'stylesheet' >
</ script >
</ script >
</ head >
< body >
< center >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< div class = "first_class" >
< label for = "radio_1" >
Stationery
</ label >
< input type = "radio" name = "type" id = "radio_1" >
< label for = "radio_2" >
Electronics
</ label >
< input type = "radio" name = "type" id = "radio_2" >
< label for = "radio_3" >
Clothing
</ label >
< input type = "radio" name = "type" id = "radio_3" >
</ div >
< script >
$(document).ready(function () {
$(".first_class").controlgroup({});
})
</ script >
</ center >
</ body >
</ html >
|
Output:
Vertical controlgroup widget: In the vertical controlgroup widget, we can create a set of buttons vertically.
Syntax:
$(".first_class").controlgroup({"direction": "vertical"});
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = 'stylesheet' >
</ script >
</ script >
</ head >
< body >
< center >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< div class = "first_class" >
< label for = "radio_1" >
Stationery
</ label >
< input type = "radio" name = "type" id = "radio_1" >
< label for = "radio_2" >
Electronics
</ label >
< input type = "radio" name = "type" id = "radio_2" >
< label for = "radio_3" >
Clothing
</ label >
< input type = "radio" name = "type" id = "radio_3" >
</ div >
< script >
$(document).ready(function () {
$(".first_class").controlgroup(
{ "direction": "vertical" });
})
</ script >
</ center >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...