- jQuery Mobile Tutorial
- jQuery Mobile - Home
- jQuery Mobile - Overview
- jQuery Mobile - Setup
- jQuery Mobile - Pages
- jQuery Mobile - Icons
- jQuery Mobile - Transitions
- jQuery Mobile - Layouts
- jQuery Mobile - Widgets
- jQuery Mobile - Events
- jQuery Mobile - Forms
- jQuery Mobile - Themes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Data Attributes
- jQuery Mobile Useful Resources
- jQuery Mobile - Interview Questions
- jQuery Mobile - Quick Guide
- jQuery Mobile - Useful Resources
- jQuery Mobile - Discussion
jQuery Mobile - Form Flip Toggle Switch
Description
Flip Switch allows you to turn off/on or true/false the switch by clicking it for boolean style input.
Example
Following example demonstrates the use of multiple selection in form in jQuery Mobile.
<!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 = "page"> <div data-role = "header"> <h2>Form Multiple Selection</h2> </div> <div data-role = "main" class = "ui-content"> <form method = "post" action = "switchdemo.php"> <h3>Basic Flipswitch</h3> <input name = "flip" type = "checkbox" data-role = "flipswitch"> <h3>Basic checkbox switch with custom labels</h3> <input name = "flip1" type = "checkbox" data-role = "flipswitch" data-on-text = "YES" data-off-text = "NO" ><br/> <input type = "submit" value = "Submit" name = "submit" data-inline = "true"> </form> </div> </div> </body> </html>
Output
Let's carry out the following steps to see how the above code works −
Save the above html code as form_flip_toggle_switch.html file in your server root folder.
Open this HTML file as http://localhost/form_flip_toggle_switch.html and the following output will be displayed.
jquery_mobile_forms.htm
Advertisements