How to create controlgroup widget using jQuery-ui ?
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 = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel = 'stylesheet' > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > </ script > < script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" > </ script > </ head > < body > < center > < h1 style = "color:green" >w3wiki</ 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 = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel = 'stylesheet' > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > </ script > < script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" > </ script > </ head > < body > < center > < h1 style = "color:green" >w3wiki</ 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:
Contact Us