How to create group of buttons in a page ?
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 = "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 > </ 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 = "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 > </ 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:
Contact Us