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 Grid icon using jQuery Mobile
Overview
The Grid icon in any web application can also be developed using jQuery Mobile, as the jQuery mobile icon library provides the benefit of many icons. So to create the jQuery Grid icon there are some pre-built classes by the jQuery icon library that can be used to create the grid icon. As we define the class name for any element in the bootstrap to create a component the same as it is we have to define the class in the HTML element which will create a grid icon.
Approach
To create a clickable grid icon button we define the element class name as “ui-btn”.
To set-up and create a grid icon, define “ui-icon-grid” as the class name.
To position the created grid 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 grid 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, so inherit these link in your head tag of the 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 will contain the jquery mobile grid icon.
Step 3 − Now inherit some elements such as <a>, <button> and <p> to the parent div.
Step 4 − Define the class name to the above elements to create a grid icon. Use “ui-btn ui-icon-grid ui-btn-b” classed in elements which will create a grid icon.
<button class="ui-btn ui-icon-grid ui-btn-icon-notext ui-btn-b"></button> <p class="ui-btn ui-icon-grid ui-btn-icon-left ui-btn-b> Grid Icon </p>
Step 5 − The grid icon is created successfully and will display on the browser.
Example
In this example we have created the grid icon by defining the classes in class name of the button and anchor tag element from the jQuery mobile icons library. We had create two grid icons one with text and other without text
<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>Grid Icon Using jQuery</title>
</head>
<body>
<div class="icon" style="gap: 0.5rem;width: fit-content;margin: auto;margin-top: 10rem;">
<h2>jQuery Mobile Grid Icon</h2>
<button class="ui-btn ui-icon-grid ui-btn-icon-notext ui-btn-b" style="margin: 0.4rem auto;"></button>
<p class="ui-btn ui-icon-grid ui-btn-icon-left ui-btn-b" style="margin: 0.4rem auto;">Grid Icon</p>
</div>
</body>
</html>
The below image shows the output of the above code, in which we have build a grid icon by using the jQuery mobile icon library. As in the below image it shows the two grid icon, one with only icon and other with icon and text both. So in the first grid 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 grid icon.
Conclusion
For the styling of grid icons, mainly the 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 grid icon to black and icon color to pure white and the “ui-corner-all” makes the border of the grid icon round as a shape of circle. The grid icon gives an attraction to the user. This icon can be used in place where we need to change the view from list to grid as in case of product listing.
119 Views
