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 design badges for mobiles using jQuery EasyUI Mobile?
Badges are a common design element used in mobile applications to convey information to users. A badge is a small visual indicator that displays information, such as the number of notifications or messages a user has. jQuery EasyUI Mobile is a framework that makes it easy to create badges in your mobile app design.
In this article, we'll walk you through how to design badges for mobiles using jQuery EasyUI Mobile.
Getting Started With jQuery EasyUI Mobile
jQuery EasyUI Mobile is a lightweight framework for creating mobile apps that use jQuery and HTML5. It provides a set of user interface components that are optimized for mobile devices, including buttons, lists, and forms. To get started with jQuery EasyUI Mobile, you'll need to include the framework in your project.
To include jQuery EasyUI Mobile in your project, you can download the framework from the official website or include it from a CDN.
Once you've included jQuery EasyUI Mobile in your project, you can start designing badges.
Customizing Badge Styles
By default, jQuery EasyUI Mobile provides a simple red circle with white text for badges. However, you can customize the styles of your badges using CSS.
In many mobile apps, badges need to display dynamic information, such as the number of unread messages or the number of items in a user's cart. To create dynamic badges using jQuery EasyUI Mobile, you can use JavaScript to update the badge text.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.easyui.mobile/dist/jquery.easyui.mobile.css">
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.easyui.mobile/dist/jquery.easyui.mobile.js"></script>
<style>
.badge {
display: inline-block;
padding: 5px;
border-radius: 50%;
background-color: red;
color: white;
font-size: 12px;
line-height: 1;
}
.badge-success {
background-color: green;
}
.badge-warning {
background-color: orange;
}
.badge-danger {
background-color: red;
}
</style>
</head>
<body>
<h1>Basic Badges Example</h1>
<div class="content">
<h2>Notifications</h2>
<p>You have <span class="badge">5</span> new notifications.</p>
<h2>Status</h2>
<p><span class="badge badge-success">Online</span></p>
<p><span class="badge badge-warning">Away</span></p>
<p><span class="badge badge-danger">Offline</span></p>
</div>
</body>
</html>
Explanation
This code demonstrates the use of basic badges in mobile applications using the EasyUI framework. The code defines CSS styles for badges with different colors and creates badges that display the number of new notifications and the status of a user.
The HTML markup uses the badge class to create badges with a circular shape and applies additional classes to change the badge color. The jQuery and EasyUI scripts are included to enable the use of the framework.
Conclusion
Badges are an important design element in mobile apps, and jQuery EasyUI Mobile makes it easy to create badges that match your app's design. By using the `badge` class and customizing badge styles with CSS, you can create badges that display any type of information. And by using JavaScript to update badge text dynamically, you can create badges that display dynamic information in your mobile app.
116 Views
To Continue Learning Please Login