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 Basic flip toggle switch using jquery mobile?
JQuery
Jquery is a fast and simple Javascript library which is used to make a client-side through HTML, It simplifies some of the Javascript functions like, DOM Manipulation,traversal, Event Handling and AJAX calls. This also has Cross-Browser compatibility.
Jquery Mobile
JQuery mobile is another framework which is designed specifically for mobile applications. This UI framework is based upon the Jquery library and provides some themes and tools which are based on HTML5.
What is Flip toggle switch and why do we need one in our UI?
Flip toggle switch is used to Switch On or Off something or set this sets the value to True or False, Like you might have seen in websites which has a toggle switch which turns on Dark Mode and turns Off Dark mode by a toggle. Toggle switch is a very useful UI component which can be used to set a state to true or false or On or Off. Toggle switch can be used to change the theme, or can be used to set a button/form active or deactivate the same and there are many useful cases where you need to toggle between the state and set it to true or false.
Approach 1
Creating <label> and <input> tags in HTML and Using jQuery mobile and Javascript files.
Algorithm
Step 1 - First you need to add the Jquery Mobile library to your HTML file.
Step 2 - Now Create a Flip Toggle switch component using label and select tags.
Step 3 - Now create a javascript function and initialize the toggle switch. Here I am using <script> but you can also create a separate Javascript file and add it in the <head> tag.
That's it, Now you can save the html file and run it on your browser, you can see a basic toggle switch and can be toggled on or off.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.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="fieldcontain">
<label for="flip-1">Toggle:</label>
<select name="flip-1" id="flip-1" data-role="flipswitch">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<script>
$(document).on("pagecreate", function() {
$("#flip-1").flipswitch();
});
</script>
</body>
</html>
Approach 2
Creating dynamically through the flipswitch() function of jQuery mobile in a Javascript file.
Algorithm
Step 1 Include jQuery mobile CSS and Javascript files inside your HTML file.
Step 2 Create an empty <div> element.
Step 3 Now use flipswitch() function in the <script> tag or in a separate js file to create a flip toggle.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
<div id="flip-switch-container" style="text-align:center;padding: 20px;"></div>
<script>
$(document).on("pagecreate", function() {
// Create flip toggle switch
var flipSwitch = $('<input type="checkbox" data-role="flipswitch">');
flipSwitch.appendTo('#flip-switch-container');
// Configure flip toggle switch
flipSwitch.flipswitch({
"onText": "Yes",
"offText": "No",
"wrapperClass": "custom-switch",
"defaultState": "on" // or "off" for initial state
});
});
</script>
</body>
</html>
Conclusion
The above two functions can be used to create a Basic flip toggle switch using jQuery mobile, you can simply create it by including <label> and <input> tag inside of the <div> element inside the HTML file or you can create a dynamic flip toggle by using flipswitch(). Also there are some methods which are used to interact with the flip toggle switch such as option() which is used to set options for the flip toggle switch, toggle() method to toggle the switch and destroy() method to remove the switch().
201 Views
