How to create group of buttons in a page ?
Last Updated :
10 Feb, 2022
In this article, we will learn How to create a group of buttons on the page. This can be done by setting the ‘data-role‘ attribute to controlgroup.
controlgroup: Groups multiple buttons and other widgets into one visual set, Visually integrate multiple button-styled inputs of a single type into a group.
- data-mini true | false – Compact-sized version for all items in the controlgroup.
- data-type horizontal | vertical – For horizontal or vertical item alignment.
Syntax:
<div data-role="controlgroup">
<a href="#" data-role="button">button 1</a>
<a href="#" data-role="button">button 2</a>
<a href="#" data-role="button">button 2</a>
</div>
CDN link:
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
Approach:
Firstly, add the above jQuery and JQuery UI CDN links to the script or download them to your local machine. Create a DIV tag and set the data-role attribute to controlgroup. In DIV container create 3 anchor tags and set the data-role attribute to a button.
Change the border color of buttons using the following code
$("a").css("border-color", "black")
Example 1: This example illustrates the group of buttons as a vertical list.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div data-role = "controlgroup" >
< a href = "#" data-role = "button" >button 1</ a >
< a href = "#" data-role = "button" >button 2</ a >
< a href = "#" data-role = "button" >button 2</ a >
</ div >
< script >
$("a").css("border-color", "black")
</ script >
</ body >
</ html >
|
Output:
Example 2: This example illustrates the group of buttons as a horizontal list. By setting the data-type attribute to horizontal we can group buttons as horizontal lists.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div data-role = "controlgroup" data-type = "horizontal" >
< a href = "#" data-role = "button" >button 1</ a >
< a href = "#" data-role = "button" >button 2</ a >
< a href = "#" data-role = "button" >button 2</ a >
</ div >
< script >
$("a").css("border-color", "black")
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...