Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create 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.
150 Views
