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 a Fieldcontain flip toggle switch using jQuery Mobile
Overview
A flip toggle switch is a “on / off” like switch which changes the state of the HTML element from one form to another. By using the jQuery mobile we can create a responsive attractive flip toggle switch. So to create a flip toggle jQuery provides an attribute value as “fieldcontain”, this value is set to the attribute named as data−role. The data−role attribute is set to the fieldcontain in a div container which provides the property to the container as flip toggle switch. To create a basic flip toggle use the data−role value as a slider in the select element.
Syntax
The basic syntax to create a flip toggle switch is shown below.
<select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
jQuery Mobile CDN Links
Add the given below CDN links to the head tag of the HTML document.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Algorithm
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the HTML document.
Step 2 − Now add the jQuery mobile CDN links to the head tag. The CDN links are given above.
Step 3 − Now create a parent div container with a data−role attribute. Add the “fieldcontain” value to the data−role attribute.
<div data-role="fieldcontain"></div>
Step 4 − Now to create the on off options in the flip toggle switch using the select option tag as a child of the parent container.
<select name="toggleSwitch" id="toggleSwitch" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
Step 5 − The fieldcontain flip toggle switch is created successfully.
Example
The flip toggle switch will be created using the data−role attribute fieldcontain.
<html>
<head>
<title>fieldcontain flip toggle switch</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<h3 style="text-align: center;">fieldcontains toggle switch</h3>
<div data-role="fieldcontain" style="text-align: center;">
<select name="toggleSwitch" id="toggleSwitch" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</body>
</html>
Algorithm
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the HTML document.
Step 2 − Now add the jQuery mobile CDN links to the head tag. The CDN links are given above.
Step 3 − Now create a parent div container with a data−role attribute. Add the “fieldcontain” value to the data−role attribute.
<div data-role="fieldcontain"></div>
Step 4 − Now to create the on off options in the flip toggle switch create the select option tag using the HTML tags syntax.
<select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
Step 5 − Add the data−role attribute slider to the select tag, and also add the data−theme attribute to it and set the value to “b”.
<select data-role="slider" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
Step 5 − The fieldcontain flip toggle switch is created successfully.
Example
In this example we will create a dark themed flip toggle switch using the data−theme attribute. This data−theme attribute is set to “b” which means black.
<html>
<head>
<title>fieldcontain flip toggle switch</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<h3 style="text-align: center;">fieldcontain toggle switch(Dark Theme)</h3>
<div data-role="fieldcontain" style="text-align: center;">
<select name="toggleSwitch" id="toggleSwitch" data-role="slider" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</body>
</html>
Conclusion
This fieldcontain flip toggle switch is used in the web pages as a theme changer flip component. It is also used as the on / off button which can turn the state on or can turn the state off. As seen in the above example the data−role attribute with the value “slider” is as important as the fieldcontain value as to make a toggle switch. The jQuery mobile is a user interface library which has many data−role attributes with the jQuery predefined value.
66 Views
