Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make Mini sized Vertical controlgroups using jQuery Mobile?
The controlgroups can have the options of vertical or horizontal. Sometimes, if many buttons are taken together, it is also required that the controlgroup size is reduced. Using HTML and jquery mobile, this process of creating the mini-sized vertical controlgroups is demonstrated in this article. This is shown by using two different examples. In the first example, the ways to use mini vertical controlgroup for the buttons are demonstrated. In the second example, the use of a mini vertical controlgroup for the icon buttons is shown.
Example 1: Using JQuery Mobile to Make mini Vertical Control groups for the Buttons
Folder and Pages Design Steps
Step 1 − Make an HTML file and start writing the code. Include the required libraries for JQuery Mobile within the script tags.
Step 2 − Inside the body tag first make two <div> tag. In both these <div> tags, set the "controlgroup" as the specification of the data-role. The "vertical" is the default data type. For using the mini size, in the <div> tag, use "true" for the data-mini prop.
Step 3 − Now inside these div tags make the buttons.
Step 4 − Design the buttons with and without using the ui-btn class.
Step 5 − Write a function within the <script> tags to execute when a button will be clicked.
Step 6 − Load the HTML file in a browser and check the result.
For using JQuery Mobile, check the use of <script> tags src links as given in this code
Example
<!DOCTYPE html>
<html>
<head>
<title>Button Control Group Demo</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<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.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.fixedwidthclass {
width: 200px;
}
</style>
</head>
<body>
<h2>Vertical Mini Control Group Demo</h2>
<p></p>
<h4>Normal Size Vertical Button Control Group </h4>
<div data-role="controlgroup" class=fixedwidthclass >
<button onclick="fnc()" data-role="button" >About Us</button>
<button onclick="fnc()" data-role="button" >Home</button>
<button onclick="fnc()" data-role="button" >Work</button>
<a href="#" onclick="fnc()" class = "ui-btn" >Settings</a>
<a href="#" onclick="fnc()" class = "ui-btn">Maps</a>
<a href="#" onclick="fnc()" class = "ui-btn">Contact Us</a>
</div>
<p></p>
<h4>Mini Sized Vertical Button Control Group </h4>
<div data-role="controlgroup" data-mini="true" class=fixedwidthclass>
<button onclick="fnc()" data-role="button" >About Us</button>
<button onclick="fnc()" data-role="button" >Home</button>
<button onclick="fnc()" data-role="button" >Work</button>
<a href="#" onclick="fnc()" class = "ui-btn" >Settings</a>
<a href="#" onclick="fnc()" class = "ui-btn">Maps</a>
<a href="#" onclick="fnc()" class = "ui-btn">Contact Us</a>
</div>
<script>
function fnc(){
alert("Button Pressed !");
}
</script>
</body>
</html>
Viewing The Result - Example 1
For seeing the result open the html file in a browser using a webserver.
Example 2: Using JQuery Mobile to make mini Vertical Controlgroups for the Icon Buttons
Folder and Pages Design Steps
Step 1 − Make an html file and start writing the code. Include the required libraries for JQuery Mobile within the script tags.
Step 2 − Inside the body tag first make two <div> tag. In both these <div> tags, set the "controlgroup" as the specification of the data-role. The vertical is the default data-type. For using the mini option, in the <div> tag also use "true" for the data-mini prop.
Step 3 − Now inside this div tag use <a> tag to make the icon buttons. Specify "notext" for some of the data-iconpos. This is needed for seeing the icons with and without button labels.
Step 4 − Use different icons for different buttons such as home, refresh, gear, and delete.
Step 5 − Write a function within the <script> tags to execute when a button will be clicked.
Step 6 − Load the HTML file in a browser and check the result.
For Using JQuery Mobile, Check the use of <script> Tags src Links as Given in This Code.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js"></script>
<style>
.iconStyle {
width: 200px;
}
</style>
</head>
<body>
<h2>Vertical Mini Control Group ICON Demo</h2>
<p></p>
<h4>Normal Size Vertical ICON Control Group </h4>
<div id="verticalGP1" data-role="controlgroup" >
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="gear" data-iconpos="left" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="home" data-iconpos="top" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="delete" data-iconpos="right" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="refresh" data-iconpos="notext" ></a>
</div>
<p></p>
<h4>Mini Size Vertical ICON Control Group </h4>
<div id="verticalGP1" data-role="controlgroup" data-mini="true" >
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="gear" data-iconpos="left" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="home" data-iconpos="top" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="delete" data-iconpos="right" ></a>
<a class="iconStyle" href="#" onclick="fnc()" data-role="button" data-icon="refresh" data-iconpos="notext" ></a>
</div>
<script>
function fnc(){
alert("Button Pressed !");
}
</script>
</body>
</html>
Viewing The Result - Example 2
For seeing the result open the html file in a browser using a webserver.
Sometimes, buttons and icons are needed to be placed together and give a navigator-type look or make a side menu design. It is also sometimes needed to make controlgroups in mini size. In this HTML-JQuery Mobile article, using two different examples, the ways to show how to make the mini-sized vertical controlgroups are given. First, the method is given where some buttons are grouped vertically using the mini size and packed together by using the controlgroup. In the second example, the icon buttons are grouped by using the controlgroup vertical and mini options.
79 Views
