2011-09-28 20:02:28 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > jQuery Mobile Docs - Sliders< / title >
2011-10-17 20:51:45 +00:00
< link rel = "stylesheet" href = "../../../css/themes/default/" / >
2011-09-28 20:02:28 +00:00
< link rel = "stylesheet" href = "../../_assets/css/jqm-docs.css" / >
< script src = "../../../js/jquery.js" > < / script >
< script src = "../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js" > < / script >
< script src = "../../_assets/js/jqm-docs.js" > < / script >
< script src = "../../../js/" > < / script >
< / head >
< body >
< div data-role = "page" class = "type-interior" >
< div data-role = "header" data-theme = "f" >
< h1 > Flip Toggle Switch< / h1 >
< a href = "../../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
< / div > <!-- /header -->
< div data-role = "content" >
< div class = "content-primary" >
< form action = "#" method = "get" >
< h2 > Flip toggle switch< / h2 >
< ul data-role = "controlgroup" data-type = "horizontal" class = "localnav" >
< li > < a href = "index.html" data-role = "button" data-transition = "fade" class = "ui-btn-active" > Basics< / a > < / li >
< li > < a href = "options.html" data-role = "button" data-transition = "fade" > Options< / a > < / li >
< li > < a href = "methods.html" data-role = "button" data-transition = "fade" > Methods< / a > < / li >
< li > < a href = "events.html" data-role = "button" data-transition = "fade" > Events< / a > < / li >
< / ul >
< p > A binary "flip" switch is a common UI element on mobile devices that is used for binary on/off or true/false data input. You can either drag the flip handle like a slider or tap one side of the switch.< / p >
2011-10-14 19:59:55 +00:00
< p > To create a flip toggle, start with a < code > select< / code > with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options accordingly.< / p >
< p > Set the < code > for< / code > attribute of the < code > label< / code > to match the ID of the < code > input< / code > so they are semantically associated. It's possible to < a href = "../docs-forms.html" > accessibly hide the label< / a > if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.< / p >
2011-09-28 20:02:28 +00:00
< pre > < code >
2011-10-14 19:59:55 +00:00
< label for=" flip-a" > Select slider:< /label>
< select name=" slider" id=" flip-a" data-role=" slider" >
< option value=" off" > Off< /option>
< option value=" on" > On< /option>
< /select>
2011-09-28 20:02:28 +00:00
< / code > < / pre >
2011-10-14 19:59:55 +00:00
< p > This will produce a basic flip toggle switch input. The default styles set the width of the switch to 100% of the parent container and stacks the label on a separate line.< / p >
< label for = "flip-a" > Flip switch:< / label >
< select name = "slider" id = "flip-a" data-role = "slider" >
2011-09-28 20:02:28 +00:00
< option value = "off" > Off< / option >
< option value = "on" > On< / option >
< / select >
2011-10-14 19:59:55 +00:00
< p > Optionally wrap the switch markup in a container with the < code > data-role="fieldcontain"< / code > attribute to help visually group it in a longer form.< / p >
< pre > < code >
< strong > < div data-role=" fieldcontain" >
< / strong > < label for=" flip-b" > Flip switch:< /label>
< select name=" slider" id=" flip-b" data-role=" slider" >
< option value=" no" > No< /option>
< option value=" yes" > Yes< /option>
< /select>
< strong > < /div>
< / strong > < / code > < / pre >
< p > The flip toggle switch is now displayed like this:< / p >
< div data-role = "fieldcontain" >
< label for = "flip-b" > Flip switch:< / label >
< select name = "slider" id = "flip-b" data-role = "slider" >
< option value = "no" > No< / option >
< option value = "yes" > Yes< / option >
< / select >
2011-09-28 20:02:28 +00:00
< / div >
2011-10-14 19:59:55 +00:00
< h2 > Theming the flip switch< / h2 >
< p > Like all form elements, this widget will automatically inherit the theme from it's parent container. TO choose a specific theme color swatch, specify the < code > data-theme< / code > attribute on the select and specify a swatch letter.< / p >
< pre > < code >
< div data-role=" fieldcontain" >
< label for=" flip-c" > Flip switch:< /label>
< select name=" slider" id=" flip-c" data-role=" slider" data-theme=" a" >
< option value=" no" > No< /option>
< option value=" yes" > Yes< /option>
< /select>
< /div>
< / code > < / pre >
< p > This results in a switch with the A swatch colors for the handle. Note that the lefthand "on" state gets the active state color.< / p >
< div data-role = "fieldcontain" >
< label for = "flip-c" > Flip switch:< / label >
< select name = "slider" id = "flip-c" data-role = "slider" data-theme = "a" >
< option value = "no" > No< / option >
< option value = "yes" > Yes< / option >
< / select >
< / div >
< p > Here is a E swatch variation:< / p >
< div data-role = "fieldcontain" >
< label for = "flip-d" > Flip switch:< / label >
< select name = "slider" id = "flip-d" data-role = "slider" data-theme = "e" >
< option value = "no" > No< / option >
< option value = "yes" > Yes< / option >
< / select >
< / div >
2011-09-28 20:02:28 +00:00
< h2 > Calling the switch plugin< / h2 >
< p > This plugin will auto initialize on any page that contains a < code > select< / code > with the < code > data-role="slider"< / code > attribute. However, if needed you can directly call the < code > slider< / code > plugin on any selector, just like any jQuery plugin:< / p >
< pre > < code >
$('select').slider();
< / code > < / pre >
< / form >
< / div > <!-- /content - primary -->
< div class = "content-secondary" >
2011-09-29 20:35:31 +00:00
< div data-role = "collapsible" data-collapsed = "true" data-theme = "b" data-content-theme = "d" >
2011-09-28 20:02:28 +00:00
< h3 > More in this section< / h3 >
< ul data-role = "listview" data-theme = "c" data-dividertheme = "d" >
< li data-role = "list-divider" > Form elements< / li >
< li > < a href = "../docs-forms.html" > Form basics< / a > < / li >
< li > < a href = "../forms-all.html" > Form element gallery< / a > < / li >
< li > < a href = "../textinputs/index.html" > Text inputs< / a > < / li >
2011-09-29 14:52:58 +00:00
< li > < a href = "../search/" > Search input< / a > < / li >
< li > < a href = "../slider/" > Slider< / a > < / li >
2011-09-28 20:02:28 +00:00
< li data-theme = "a" > < a href = "index.html" > Flip toggle switch< / a > < / li >
2011-09-29 14:52:58 +00:00
< li > < a href = "../radiobuttons/" > Radio buttons< / a > < / li >
< li > < a href = "../checkboxes/" > Checkboxes< / a > < / li >
< li > < a href = "../selects/" > Select menus< / a > < / li >
2011-09-28 20:02:28 +00:00
< li > < a href = "../forms-themes.html" > Theming forms< / a > < / li >
< li > < a href = "../forms-all-native.html" > Native form elements< / a > < / li >
< li > < a href = "../forms-sample.html" > Submitting forms< / a > < / li >
2011-09-29 15:33:32 +00:00
2011-09-28 20:02:28 +00:00
< / ul >
< / div >
< / div >
< / div > <!-- /content -->
< div data-role = "footer" class = "footer-docs" data-theme = "c" >
< p > © 2011 The jQuery Project< / p >
< / div >
< / div > <!-- /page -->
< / body >
< / html >
