Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create an Edit icon using jQuery Mobile
jQuery Mobile provides a rich icon library that can be easily integrated into web applications. The edit icon is particularly useful for applications with CRUD operations, allowing users to modify existing content. This icon can be created using the data-icon attribute with the value "edit".
Syntax
<a href="#" data-role="button" data-icon="edit">Edit</a> <button data-icon="edit" data-theme="a">Edit</button>
jQuery Mobile CDN Links
Add these CDN links to your HTML document's head section
<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.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Example 1: Basic Edit Icon
The following example demonstrates how to create a basic edit icon using jQuery Mobile
<!DOCTYPE html>
<html>
<head>
<title>Edit Icon - jQuery Mobile</title>
<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.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Edit Icon Example</h1>
</div>
<div data-role="content">
<a href="#" data-role="button" data-icon="edit">Edit Content</a>
</div>
</div>
</body>
</html>
A button with an edit icon (pencil symbol) and the text "Edit Content" appears on the page with jQuery Mobile styling.
Example 2: Dark Theme Edit Icon
This example shows how to create an edit icon with a dark theme using the data-theme attribute
<!DOCTYPE html>
<html>
<head>
<title>Dark Theme Edit Icon</title>
<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.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Dark Theme Edit Icon</h1>
</div>
<div data-role="content">
<a href="#" data-role="button" data-icon="edit" data-theme="b">Edit</a>
<button data-icon="edit" data-theme="b">Edit Button</button>
</div>
</div>
</body>
</html>
Two dark-themed buttons with edit icons appear - one created with an anchor tag and another with a button element. Both have a black/dark background with white text and icon.
Key Attributes
| Attribute | Value | Description |
|---|---|---|
data-role |
button | Converts anchor tag to button |
data-icon |
edit | Displays the edit icon |
data-theme |
a, b, c, d, e | Sets the button theme |
Conclusion
The jQuery Mobile edit icon is essential for applications requiring content modification functionality. Using the data-icon="edit" attribute with buttons or anchor tags provides a consistent, user-friendly interface element that clearly indicates editable content to users.
323 Views
