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 Different Themes Buttons using jQuery Mobile?
An advanced mobile framework called jQuery Mobile makes it simple for developers to build applications and webpages that are optimized for mobile devices. This framework's capability to generate buttons with various themes is only one of its many advantages.
We must follow some predefined steps to implement jquery theme buttons in our code. Following steps explain the whole process for adding theme buttons to any webpage.
Downloading and installing the framework is the first and most important thing to do. The Jquery mobile library helps in utilizing its features to create various themes for buttons. The official website for installing jQuery Mobile, where you may get the most recent version.
You must include the required files in your project after downloading the framework. You can include either the full framework or simply the required files available for download. The mandatory files required to run the code include:
jQuery library
jQuery Mobile CSS file
jQuery Mobile JavaScript file
Example 1
Here, we will add multiple buttons for different types of styling using the jQuery mobile library. The buttons will be shown on the screen in different themes using special libraries of Jquery mobile.
Algorithm
Step 1: Download and install jQuery Mobile.
Step 2: Include jquery libraries in the script section.
Step 3: Now create different theme buttons. First start with adding a basic button using jQuery mobile.
Step 4: Create different theme buttons using jQuery Mobile class “ ui−btn”. Since jQuery Mobile provides different themes for buttons such as a for the default button, b for blue, c to add green, d for red, e for (yellow), and f for orange.
Step 5: You can also create custom buttons by using the same library. For this purpose use "ui−btn−custom" class to create a custom theme button.
Step 6: Add CSS styling to arrange the buttons on the page uniformly.
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Button Themes</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> <a href="https://www.tutorialspoint.com/index.htm" class="ui-btn" style="border-color: blue; width: 150px; margin-left:45%">Basic Button</a> <a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-008CBA" style="background-color: blue; color: white; width: 150px; margin-left:45%">Blue Button</a> <a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-e" style="background-color: Green; color: white; width: 150px;margin-left:45%">Green Button</a> <a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-b" style="background-color: Red; color: white; width: 150px;margin-left:45%">Red Button</a> <a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-b" style="background-color: Yellow; color: white; width: 150px;margin-left:45%">Yellow Button</a> <a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-s" style="background-color: Orange; color: white; width: 150px;margin-left:45%">Orange Button</a> <a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-custom" style="background-color:#008CBA ; color: white; width: 150px;margin-left:45%">Custom Button</a> </body> </html>
Conclusion
A quick and easy approach to improve the aesthetic attractiveness of mobile applications and websites is by adding multiple theme buttons using jQuery Mobile. Custom themes let you create buttons that are one−of−a−kind and personalized whereas built−in themes like a, b, c, d, e and f gives us a choice of colours.
75 Views
