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 Mini Theme flip toggle switch using jQuery Mobile?
In this article, we will explore the process of creating a Mini Theme flip toggle switch using jQuery Mobile. This type of toggle switch is a user-friendly way to present a binary option to the user, allowing them to quickly switch between two options. jQuery Mobile provides a simple and efficient way to create this type of control, making it easy to implement and customize. By the end of this article, you will have a working Mini Theme flip toggle switch that you can use in your own web applications.
Getting Started with jQuery Mobile
Before we dive into the process of creating a flip toggle switch, you need to make sure you have the jQuery Mobile library included in your project. You can download it from the official website or include it from a CDN.
Syntax
$(selector).slider(options)
.slider() Method
The slider() method, which is a part of the jQuery Mobile library, is utilized to generate a slider control that allows the selection of a value from a range of values. This slider control is constructed from a select element that specifies the range of values with option elements. The slider() method can be applied to alter the slider's appearance and behavior, such as defining the minimum and maximum values, step size, and orientation. Furthermore, the slider() method provides the ability to attach events to the slider to respond to changes in the chosen value or monitor the slider handle's movement.
Where −
selector is a string containing a selector expression that matches the select element(s) to be converted into a slider.
options is an optional object that can be used to specify the options for the slider.
The options available for the slider() method are −
disabled − a boolean value that determines whether the slider is disabled or not.
initSelector − a string containing a selector expression that matches the select elements that should be automatically converted into sliders.
mini − a boolean value that determines whether the slider should use the mini version of the jQuery Mobile theme or not.
theme − a string that specifies the theme to be used for the slider.
trackTheme − a string that specifies the theme to be used for the track of the slider.
highlight − a boolean value that determines whether the slider should highlight when the handle is moved.
step − a number that specifies the size of the step interval to be used when selecting values.
Approach
Creating a Mini Theme flip toggle switch using jQuery Mobile involves the following steps −
Include the jQuery Mobile library in your HTML file. This undertaking can be achieved through two methods - the first being the addition of a reference to the library in the head segment of the HTML document, while the second involves obtaining the library and assimilating it into your project.
Constitute a select component in your HTML document and supplement a duo of alternative components to it. The primary alternative component will embody the "inactive" orientation of the switching mechanism, whilst the secondary alternative component will epitomize the "active" orientation of the switching mechanism.
Call the slider() method on the select element. The slider() method will convert the select element into a slider control, which can be used as a toggle switch.
Incorporate the data-role characteristic onto the select element and establish its worth as "slider". Such action notifies jQuery Mobile to fashion the select element as a slider mechanism.
Set the data-mini attribute to "true" on the select element. This tells jQuery Mobile that the slider control should use the mini version of the theme, which is smaller in size and more suitable for mobile devices.
Incorporate the attribute of data-theme into the elect component and assign its worth to the coveted motif. This shall intimate jQuery Mobile as to which design to apply towards the management of the slider.
Incorporate the data-track-theme characteristic into the designated selection unit and establish its numerical or categorical denomination to the preferred motif for the trail of the slip controller.
Electively, append the data-highlight characteristic to the elect component and designate its worth to "true" if you yearn for the slide regulator to accentuate whilst the grip is shifted.
Finally, bind an event handler to the slider event of the select element. The slider occurrence is activated upon any modification in the magnitude of the slider restraint. Within the happening handler, you have the ability to retrieve the present magnitude of the slider control and undertake operations in accordance with the elected magnitude.
Example
The following is the complete code which we are going to have a look at in this example −
<!DOCTYPE html>
<html>
<head>
<title>How to create Mini Theme flip toggle switch using jQuery Mobile?</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<h4>How to create Mini Theme flip toggle switch using jQuery Mobile?</h4>
<div data-role="fieldcontain">
<label for="flip-min">Select slider:</label>
<select name="flip-min" id="flip-min" data-role="slider" data-mini="true">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<script>
$(document).ready(function() {
$("#flip-min").slider();
});
</script>
</body>
</html>
Conclusion
To sum up, the fabrication of a Mini Theme flip toggle switch using jQuery Mobile is an uncomplicated and effortless undertaking. By utilization of the offered slider element from the library, we achieved the creation of an amicable toggle switch with just a small number of lines of code. Its Mini Theme layout makes it compressed and aesthetically pleasing, rendering it a magnificent option for web applications with limited screen space. As a result of its simplistic implementation and adaptable attributes, the Mini Theme flip toggle switch is a magnificent supplement to any web application. I trust that this article has served as a beneficial tutorial for the incorporation of this practical mechanism in your personal undertakings.
127 Views
