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 an Edit icon using jQuery Mobile
Overview
The jQuery mobile provides many icons packs which we can access using as a value in the data−icon attribute. As all these icons are used as the buttons so by using the basic HTML button we can use the data−icon attribute. The jQuery mobile provides responsive user interface content to the web pages with the attractive icons. Instead of using the HTML button tag we can also use the HTML anchor tag and set the attribute data role as button so the anchor tag will behave like a button and after this we will use the data icon attribute to create the edit icon.
Syntax
The syntax to create a basic HTML button and the anchor tag is shown below. In the syntax it also contains some of the attributes as data−role, data−icon and data−theme. These attributes are used to set the role of the element, icon in the element and theme of the element such as dark or light.
<a href="" data-role="" data-icon=""></a> <button data-icon="" data-theme=""></button>
jQuery Mobile CDN Link
The Content Delivery Network (CDN) links of the jQuery mobile are given below, add these link in the head tag of the HTML document.
<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 file in a text editor and add the HTML boilerplate to it.
Step 2 − Now add the jQuery mobile CDN links to the head tag of the HTML document given above.
Step 3 − Create a HTML anchor tag inside the body tag of the HTML.
<a></a>
Step 4 − Now add the attribute data−role to it with the value as button, also add the data−icon attribute to it with the value as edit.
<a data-role="button" data-icon="edit"></a>
Step 5 − The edit icon using the jQuery mobile is created successfully.
Example
In this example we will create an edit icon using the jQuery mobile. To create the edit icon jQuery mobile provides a value as “edit” which will be used as the value to the key attribute of data−icon.
<html>
<head>
<title>Edit icon using jQuery mobile</title>
<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>
</head>
<body>
<h3 style="text-align: center;">jQuery mobile Edit Icon</h3>
<a style="width:1rem;padding: 1rem 0.8rem;text-align: center;margin:auto;margin-top: 2rem;" data-role="button" data-icon="edit"></a>
</body>
</html>
Algorithm
Step 1 − Create a HTML file in a text editor and add the HTML boilerplate to it.
Step 2 − Now add the jQuery mobile CDN links to the head tag of the HTML document given above
Step 3 − Create a HTML anchor tag inside the body tag of the HTML.
<a></a>
Step 4 − Now add the attribute data−role to it with the value as button, also add the data−icon attribute to it with the value as edit.
<a data-role="button" data-icon="edit"></a>
Step 5 − Add the data theme attribute to the anchor tag and set the value as “b” which stands for black.
<a data-role="button" data-icon="edit" data-theme="b"></a>
Step 6 − The edit icon using the jQuery mobile is created successfully.
Example
In this example we will create an edit icon with dark−theme using jQuery mobile. For this we will create a jQuery edit icon using the data−icon attribute by adding the value as “edit”. To make the edit icon of dark theme we will be adding the data−theme attribute to the anchor tag with the value of “b”, the value “b” denotes black color.
<html>
<head>
<titlegt;Edit icon using jQuery mobile</title>
<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>
</head>
<body>
<h3 style="text-align: center;">Dark Theme Edit Icon</h3>
<a style="width:1rem;padding: 1rem 0.8rem;text-align: center;margin:auto;margin-top: 2rem;" data-role="button" data-icon="edit" data-theme="b"></a>
</body>
</html>
Conclusion
As we have seen in the above examples, the data−icon attribute plays an important role in creating the jQuery mobile icon. But it is to remember that this data−icon attribute only works with the button type of element whether it can be the basic button, the input type button or the anchor tag with the data role as button. The edit icon used in the application which performs the CRUD operation is of create, read, update and delete. So to edit an already added content we use the icon of edit which indicates to the user that the given data is editable and can be edited by the users.
101 Views
