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 create a Mini Button using jQuery Mobile
Overview
The jQuery comes up with certain classes by defining those classes in the anchor element, input tag or in a button tag we can create a mini button. The jQuery mobile has its own styling with their classes so there is only need to link the Content Delivery Network (CDN) link with the web page in which we are building the mini button.
There are certain class by which we can create the button in jQuery mobile they are −
ui-btn − This class creates a jQuery mobile button, by defining this class in an element the button properties will be inherited to that element
ui-mini − This class when defined in an element makes a mini button. By defining the mini class in an element it creates a compact size of the component.
We can also use some attributes to add the mini button property to the HTML element. These attributes are −
data-role= “button”
data-mini= “true”
Content Delivery Network (CDN Links)
Add these CDN links to your head tag of the web page to make the jQuery mobile library work with your project −
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Algorithm
Step 1 − Create a HTML boilerplate in a text editor.
Step 2 − Add the above given Content Delivery Network (CDN) links to the head tag of the code.
Step 3 − Now create a HTML button tag, define the class in it with the name “ui-btn”, “ui-mini”.
Step 4 − The mini version of the button is created successfully and can be seen on the browser.
Example
In this example we have used the HTML button tag to create a mini button with the help of jQuery mobile. The class is defined in the button tag, these classes are ui-btn this will create the button with the jQuery property and other class is ui-mini, this class will provide the mini property to the created button.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>jQuery mini button</title>
</head>
<body>
<h1 style="text-align: center;">JQuery Mini Button</h1>
<button style="width:15rem;margin: 0.8rem auto;" class=“ui-btn ui-mini”>
Mini Button (using button)
</button>
</body>
</html>
Algorithm
Step 1 − Create a HTML boilerplate in a text editor.
Step 2 − Add the above given Content Delivery Network (CDN) links to the head tag of the code.
Step 3 − Create a HTML anchor tag <a>, add some attributes to it, to provide the property of a mini button to the anchor element.
<a href="#" data-role="button" data-mini="true"></a>
Step 4 − The jQuery mobile mini button is created successfully and can be seen on the browser.
Example
In this example we had used the attributes to make the mini compact version of the button. In this by using the anchor tag element is created and the data-role and data-mini attribute are added to the element. These both attributes are assigned with the value of button and true respectively.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>jQuery Mini Button</title>
</head>
<body>
<h1 style="text-align: center;">JQuery Mini Button</h1>
<a href="#" style="width:15rem;margin: auto;" data-role="button" data-mini="true">
Mini Button (using anchor tag)
</a>
</body>
</html>
Conclusion
The mini class of the jQuery mobile provides an attractive and eye-catching user interface. The normal jQuery mobile button when created contains text with large font size and large font weight. The mini type of class can be used in navbars and many alert boxes or dialogue boxes. The mini class provides the user interface a responsive nature to the web page. The data-mini attribute stores the Boolean value, when the data-mini attribute is assigned true then the mini version property is reflected to that particular element and when the data-mini attribute is assigned false then no property is assigned to the element.
110 Views
