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 Left arrow icon using jQuery Mobile?
In the realm of cybernetic evolution, pictographs perform an indispensable function in enhancing user interfaces with greater perceptibility and ease of use. Amidst the abundance of ideograms, the sinister arrow serves as a ubiquitous tool for the purpose of navigation. If you aim to append this indispensable pictogram to your site or app, jQuery Mobile proposes an expedient and propitious approach. The present document will lead you through the gradual procedure of contriving a left-facing arrow emblem using jQuery Mobile, commencing with configuring the setting to altering the outlook of the icon. Therefore, let us plunge into the realm of network establishment and erect a leftward arrow logo that will elevate the operator's acquaintance of your enterprise.
Getting Started with jQuery Mobile
Before we dive into the process of creating a flip toggle switch, you need to make sure you have the jQuery Mobile library included in your project. You can download it from the official website or include it from a CDN
Data-icon Attribute
The data-icon attribute in jQuery Mobile is used to specify the icon to display on a button or other UI element. It grants you the ability to append optical hints to your handheld cyberspace software, amplifying its user-accessibility and innate lucidity. The data-icon characteristic is a constituent of the jQuery Mobile infrastructure, and it upholds a broad gamut of pictographs to opt from.
Syntax
<a href=”#” data-role=”button” data-icon=”icon-name”>Button Text</a>
The icons available in jQuery Mobile are −
Arrow-l (left arrow)
Arrow-r (right arrow)
Arrow-u (up arrow)
Arrow-d (down arrow)
Delete (trash icon)
Plus (plus sign)
Check (checkmark)
Gear (gear/settings icon)
Refresh (refresh icon)
Forward (forward icon)
Approach
We will add an <a> element in the body section with the following attributes: data-role="button", data-icon="arrow-l", and data-iconpos="left". The data-role attribute specifies that the a element is a button, while the data-icon attribute specifies the icon that should be displayed on the button. In this case, the icon is the left arrow (arrow-l). The data-iconpos attribute specifies the position of the icon relative to the text on the button, in this case on the left side.
Let us now try to decipher this code. Before we delve in the code, please notice that I have imported jQuery as well as jQuery Mobile in the head section using CDN for this code to function properly. Now coming back to the code, the document consists of several elements enclosed in angled brackets that describe the content and structure of the page. The head element contains the title of the page and references to external JavaScript and CSS files required by the page. The body element contains the visible content of the page, including a heading and a hyperlink styled as a button that navigates to a previous page, featuring a left arrow icon rendered by jQuery Mobile framework
Example
The following is the complete code which we are going to go through in this example −
<!DOCTYPE html> <html> <head> <title>How to create Left arrow icon using jQuery Mobile?</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script> </head> <body> <h4>How to create Left arrow icon using jQuery Mobile?</h4> <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Back</a> </body> </html>
Conclusion
In summation, the production of a left-facing arrow pictograph for a push button in jQuery Mobile is an uncomplicated and direct procedure. Through utilization of the data-icon and data-iconpos characteristics, you have the ability to effortlessly append a pictogram to a button and fixate it on the dexterous or sinistral aspect of the push button literature. This characteristic is a pivotal component of the jQuery Mobile schema and affords a modality to append optical signals to your portable web program. Whether you are devising a pilotage menu or fabricating a bespoke knob, the capacity to integrate icons into your push buttons can immensely improve the user familiarity of your program. With this handbook, you are now proficient and equipped to concoct a sinister arrow emblem by means of jQuery Mobile.
184 Views
To Continue Learning Please Login