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 Home icon using jQuery Mobile
Overview
The home icon can be created from the jQuery mobile icons library. This home icon is useful in the navbar area of a web page for navigation to the home page. So the home icon gives an attractive look to the navbar of the webpage. To create a home icon the jQuery mobile icons library has predefined classes which can be used to create a home icon. These classes can be defined in any element as class name and the home icon will be created for that particular element in which the classes are defined.
Approach
To create a home icon to be a clickable button we define the element class name as “ui-btn”.
To set-up and create a home icon we define “ui-icon-home” as the class name.
To position the created home icon we can define classes as −
ui-btn-icon-left
ui-btn-icon-right
ui-btn-icon-bottom
ui-btn-icon-top
To restrict the button, anchor text or any other element to write any text with the home icon we can define “ui-btn-icon-notext” as the class name in an element.
Content Delivery Network (CDN)
All the given cdn links will provide the jQuery functionality to your code −
<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> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
Algorithm
Step 1 − Create a HTML boilerplate code and link the above given Content Delivery Network (CDN) of jQuery and jQuery mobile library link to the head tag of the HTML code.
Step 2 − Now create a parent div which contains the jquery mobile home icon.
Step 3 −Now inherit some elements such as <a>, <button> to the parent div.
Step 4 − Define the class name to the above inherited elements to create a home icon in it. Use “ui-btn ui-icon-home ui-btn-b” classes in elements which will create a home icon.
<button class="ui-btn ui-icon-home ui-btn-icon-notext ui-btn-b"></button> <p class="ui-btn ui-icon-home ui-btn-icon-left ui-btn-b> Home Icon </p>
Step 5 − The home home icon is created successfully and will display on the browser.
Example
In this example we have created the home icon by defining the classes from the jQuery mobile icons library. Which can be used for navigation towards the home page by giving the link of the home page in the anchor element.
<html>
<head>
<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>
<title>Creating Home Icon Using jQuery</title>
</head>
<body>
<div class="icon" style="gap: 0.5rem;width: fit-content;margin:auto;margin-top: 10rem;">
<h2>jQuery Mobile Home Icon</h2>
<button class="ui-btn ui-icon-home ui-btn-icon-notext ui-btn-b"style="margin: 0.4rem 0;"> </button>
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left ui-btn-b" style="margin: 0.4rem auto;">Home</a>
</div>
</body>
</html>
The below image shows the output of the above code, in which we have created a home icon in button and Anchor element by using the jQuery mobile icon library. As in the below image it shows the two home icons,the first one shows only an icon and the other with icon and text both. So in the first home icon we had also defined a class name as “ui-btn-notext” which will not allow the icon to write the text inside its tag and in the second icon we had removed this class so that we can write text with the home icon as “HOME” in navbar.
Conclusion
For the styling of home icons, mainly background and the border radius of the icon we use the classes “ui-btn-b” and “ui-corner-all” respectively. The “ui-btn-b” changes the background of the home icon to black, so if we want a dark mode in our website we can add this class to it and the “ui-corner-all” makes the border of the home icon round as a circle. The jQuery mobile provides a responsive design to the page which can look interactive in both desktop and mobile.
257 Views
