- Trending Categories
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 Bars icon using jQuery Mobile
Overview
Bars icons are used as the navbar lines in the small screens. As the desktop mode of the screen shows the navbar in full view with navigation items but in the responsive nature of the navbar it only shows the bars line on the screen. So to build the bars icon using jQuery mobile can be achieved by defining the data−role attribute to any element with the value of “bars”. The bars is a predefined data role attribute. It can also be done with the simple jQuery but jQuery mobile provides a responsive way to display the icons on the web page.
jQuery Mobile Content Delivery Network (CDN) Links
Add these CDN links to the head tag of the HTML document and add the script tag to the end of the body tag.
<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>
Syntax
The syntax to create a bars icon can be achieved using the button tag or an anchor tag.
<a data-role="button" data-icon="bars">Bars <button data-icon="bars">Bars</button>
Algorithm
Step 1 − Create a HTML file in your text editor and add the HTML boilerplate to the file
Step 2 − Now add the jQuery CDN link to the head tag and the end of the body tag. The CDN links are given above.
Step 3 − Now create a HTML button using the <button> tag.
Step 4 − Add the data−icon attribute to the button and set the value of the data−icon as “bars”.
Step 5 − The bars icon is created successfully.
Example
So in this example we have used the HTML button tag to create a bars icon. The default bars icon shows the button with default white color.
<html>
<head>
<title>bars icon using jQuery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
</head>
<body>
<h3 style="text-align: center;color: green;">tutorialspoint.com</h3>
<strong>
<p style="text-align: center;">(Bars icon using jQuery mobile)</p>
</strong>
<button href="index.html" data-icon="bars"
style="width: 50%;margin: auto;margin-top: 2rem;">Bars</button>
<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>
</body>
</html>
Algorithm
Step 1 − Create a HTML file in your text editor and add the HTML boilerplate to the file.
Step 2 − Now add the jQuery CDN link to the head tag and the end of the body tag. The CDN links are given above.
Step 3 − Now create a HTML anchor element using the tag and add a data−role attribute to it with the value to button.
Step 4 − Add the data−icon attribute to the anchor element and set the value of the data−icon as “bars”.
Step 5 − Add the data−theme attribute to the anchor element and set the data−theme value to “b” which means black.
Step 6 − Add the data−theme attribute to the anchor element and set the data−theme value to “b” which means black.
Example
In this we will create an anchor element using the anchor tag and will add the data−role attribute and set the value to the button. In this example we will be creating the bars icon in dark theme by adding the data−theme value to “b”.
<html>
<head>
<title>bars icon using jQuery mobile dark theme</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
</head>
<body>
<h3 style="text-align: center;color: green;">tutorialspoint.com</h3>
<strong>
<p style="text-align: center;">(Bars icon using jQuery mobile dark theme)</p>
</strong>
<a href="index.html" data-role="button" data-icon="bars" data-theme="b"
style="width: 50%;margin: auto;margin-top: 2rem;">Bars</a>
<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>
</body>
</html>
Conclusion
As we have used the data icon attribute to make the bars icon, there is one common thing in both the examples that both the elements are made button whether by default or by data role attribute. The data icon attributes mostly work with the button tag.
42 Views
