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 Disable Fieldcontain flip toggle switch using jQuery Mobile
Overview
A flip toggle switch is a button which is used to change any element's state, from one state to another. The jQuery mobile is a library which maintains the user interface for the web pages. The jQuery mobile provides some of the data−role attributes value with some of its predefined classes which provides a good look from the normal basic interface to the user. Like that a “fieldcontain” is also an attribute value of the attribute data−role. The data−role attribute provides the property to the element to which it is added, if the data−role value of the attribute is button then the element which contains this attribute is now of type button. So to make a toggle switch using jQuery mobile we can add the data−role attribute value to the “fieldcontain”.
jQuery mobile CDN Links
The given below shows the jQuery mobile Content Delivery Network CDN links, add these 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 in a text editor such as notepad++ or visual studio code. Now add the HTML boilerplate to the HTML document.
Step 2 − Now add the Content Delivery Network (CDN) links to the head tag of the main HTML document. All the link and script tags CDN link are given above.
Step 3 − Create a parent div container which contains the fieldcontain flip toggle switch button.
<div data-role="fieldcontain" style="text-align: center;"></div>
Step 4 − Now create a select element using the <select> tag and add the certain attributes to the select tag such as name, id and data−role to the select tag with the value “toggleswitch” and “slider” respectively to the attributes.
<select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
Step 5 − Now to make the toggle switch disabled use an attribute “disabled”.
<select name="toggleSwitch" id="toggleSwitch" data-role="slider" disabled>
<option value="off">Off</option>
<option value="on">On</option>
</select>
Step 6 − The disabled toggle switch button is created successfully.
Example
In this example we will be creating a flip toggle switch using jQuery mobile. After creating the toggle switch with the data−role fieldcontain. We have to make this toggle switch disabled. To make this switch disabled we will add the “disabled” attribute to the select tag. This will make the toggle switch disabled.
<html>
<head>
<title>disable 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;">Disabled fieldcontains</h3>
<div data-role="fieldcontain" style="text-align: center;">
<select name="toggleSwitch" id="toggleSwitch" data-role="slider" disabled>
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</body>
</html>
Conclusion
This feature is used in web applications like Exam panel, login form and in many games applications also. The exam panel uses the disabled feature in the button to submit the exams as a feature which is connected to javascript to allow it to be enabled after a fixed time. It can also be used in switching the theme of the application, for example a web application contains the theme switch but there may be a certain condition that arises that the browser does not support the switching of theme at that condition the flip switch will be disabled. The main role to create a fieldcontain is of data−role attribute as it contains the value of fieldcontain.
63 Views
