2010-11-11 23:47:21 +00:00
<!DOCTYPE html>
< html >
< head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
2011-05-17 21:28:19 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2010-11-11 23:47:21 +00:00
< title > jQuery Mobile Docs - Form Plugin Methods< / title >
2011-01-06 00:19:24 +00:00
< link rel = "stylesheet" href = "../../themes/default/" / >
2010-11-11 23:47:21 +00:00
< link rel = "stylesheet" href = "../_assets/css/jqm-docs.css" / >
2011-04-14 20:04:47 +00:00
< script src = "../../js/jquery.js" > < / script >
2011-06-20 19:41:40 +00:00
< script src = "../../experiments/themeswitcher/jquery.mobile.themeswitcher.js" > < / script >
< script src = "../_assets/js/jqm-docs.js" > < / script >
2011-04-14 20:04:47 +00:00
< script src = "../../js/" > < / script >
2010-11-11 23:47:21 +00:00
< / head >
< body >
2011-06-20 19:57:04 +00:00
< div data-role = "page" class = "type-interior" >
2010-11-11 23:47:21 +00:00
2011-06-20 19:57:04 +00:00
< div data-role = "header" data-theme = "f" >
2010-11-11 23:47:21 +00:00
< h1 > Form Plugin Methods< / h1 >
2011-02-03 23:34:35 +00:00
< a href = "../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
2010-11-11 23:47:21 +00:00
< / div > <!-- /header -->
< div data-role = "content" >
2011-06-20 20:35:27 +00:00
< div class = "content-primary" >
2011-08-04 21:23:42 +00:00
< h2 > Form methods reference< / h2 >
2010-11-11 23:47:21 +00:00
< p > After jQuery Mobile auto-enhances form controls into custom controls, you can manipulate many of their properties via plugin methods. The currently available methods are listed below. Check Github for updates - we're working on complete coverage.< / p >
< h2 > Selectmenu< / h2 >
< dl >
2011-08-04 21:23:42 +00:00
< dt > < code > open< / code > open a closed select menu< / dt >
2010-11-11 23:47:21 +00:00
< dd >
< pre > < code >
$('select').selectmenu('open');
< / code > < / pre >
< / dd >
2011-08-04 21:23:42 +00:00
< dt > < code > close< / code > close an open select menu< / dt >
2010-11-11 23:47:21 +00:00
< dd >
< pre > < code >
$('select').selectmenu('close');
< / code > < / pre >
< / dd >
2011-08-04 21:23:42 +00:00
< dt > < code > refresh< / code > : Update the custom menu to reflect the native select element's value. < / dt >
< dd > < p > If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu. Also, if you pass a true argument you can force the rebuild to happen.< / p >
2010-11-11 23:47:21 +00:00
< pre > < code >
//refresh value
$('select').selectmenu('refresh');
//refresh and force rebuild
$('select').selectmenu('refresh', true);
< / code > < / pre >
< / dd >
2011-08-04 21:23:42 +00:00
< dt > < code > enable< / code > : enable a disabled select.< / dt >
2010-11-11 23:47:21 +00:00
< dd >
< pre > < code >
$('select').selectmenu('enable');
< / code > < / pre >
< / dd >
2011-08-04 21:23:42 +00:00
< dt > < code > disable< / code > : disable a select.< / dt >
2010-11-11 23:47:21 +00:00
< dd >
< pre > < code >
$('select').selectmenu('disable');
< / code > < / pre >
< / dd >
< / dl >
< h2 > Textinput< / h2 >
2011-08-04 21:23:42 +00:00
2010-11-11 23:47:21 +00:00
< dl >
2011-08-04 21:23:42 +00:00
< dt > < code > enable< / code > : enable a disabled textinput/textarea.< / dt >
2010-11-11 23:47:21 +00:00
< dd >
< pre > < code >
$('input').textinput('enable');
< / code > < / pre >
< / dd >
2011-08-04 21:23:42 +00:00
< dt > < code > disable< / code > : disable a textinput/textarea.< / dt >
2010-11-11 23:47:21 +00:00
< dd >
< pre > < code >
$('textarea').textinput('disable');
< / code > < / pre >
< / dd >
< / dl >
< h2 > checkboxradio< / h2 >
2011-08-04 21:23:42 +00:00
2010-11-11 23:47:21 +00:00
< dl >
2011-08-04 21:23:42 +00:00
< dt > < code > enable< / code > : enable a disabled checkboxradio.< / dt >
2010-11-11 23:47:21 +00:00
< dd >
< pre > < code >
$('input').checkboxradio('enable');
< / code > < / pre >
< / dd >
2011-08-04 21:23:42 +00:00
< dt > < code > disable< / code > : disable a checkboxradio.< / dt >
2010-11-11 23:47:21 +00:00
< dd >
< pre > < code >
2010-11-30 15:20:07 +00:00
$('input').checkboxradio('disable');
2010-11-11 23:47:21 +00:00
< / code > < / pre >
< / dd >
2011-08-04 21:23:42 +00:00
< dt > < code > refresh< / code > : refresh a checkboxradio's value.< / dt >
2010-11-11 23:47:21 +00:00
< dd >
< pre > < code >
2010-11-30 15:20:07 +00:00
$('input').checkboxradio('refresh');
2010-11-11 23:47:21 +00:00
< / code > < / pre >
< / dd >
< / dl >
2011-08-04 21:23:42 +00:00
< h2 > Slider< / h2 >
2010-11-19 03:15:00 +00:00
< dl >
2011-08-04 21:23:42 +00:00
< dt > < code > enable< / code > : enable a disabled slider.< / dt >
2010-11-19 03:15:00 +00:00
< dd >
< pre > < code >
$('input').slider('enable');
< / code > < / pre >
< / dd >
2011-08-04 21:23:42 +00:00
< dt > < code > disable< / code > : disable a slider.< / dt >
2010-11-19 03:15:00 +00:00
< dd >
< pre > < code >
$('input').slider('disable');
< / code > < / pre >
< / dd >
2011-08-04 21:23:42 +00:00
< dt > < code > refresh< / code > : refresh a slider's value.< / dt >
2010-11-19 03:15:00 +00:00
< dd >
< pre > < code >
$('input').slider('refresh');
< / code > < / pre >
< / dd >
2010-11-19 03:17:46 +00:00
< / dl >
2011-08-04 21:23:42 +00:00
< h2 > Form buttons< / h2 >
2010-11-19 03:17:46 +00:00
< dl >
2011-08-04 21:23:42 +00:00
< dt > < code > enable< / code > : enable a disabled button.< / dt >
2010-11-19 03:17:46 +00:00
< dd >
< pre > < code >
$('input').button('enable');
< / code > < / pre >
< / dd >
2011-08-04 21:23:42 +00:00
< dt > < code > disable< / code > : disable a slider.< / dt >
2010-11-19 03:17:46 +00:00
< dd >
< pre > < code >
$('input').button('disable');
< / code > < / pre >
< / dd >
2010-11-19 03:15:00 +00:00
< / dl >
2010-11-19 03:40:18 +00:00
< h2 > Degraded Form Input Types< / h2 >
< p > jQuery Mobile degrades several HTML5 input types back to type=text, or type=number after adding enhanced controls. For example, inputs with a type of range are enhanced with a custom slider control, and their type is set to number to offer a usable form input alongside that slider. Inputs with a type of search are degraded back to type=text after we add our own themable search input styling.< / p >
< p > The page plugin contains a list of input types that are set to either true which means they'll degrade to type=text, false which means they'll be left alone, or a string such as "number", which means they'll be converted to that type (such as the case of type=range).< / p >
2010-11-11 23:47:21 +00:00
2010-12-01 14:37:35 +00:00
< p > You can configure which types are changed via the page plugin's < code > degradeInputs< / code > option, which can be manipulated externally via < code > $.mobile.page.prototype.options.degradeInputs< / code > , which has properties: color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, and week. Be sure to configure this inside an event handler bound to the < code > mobileinit< / code > event, so that it applies to the first page as well as subsequent pages that are loaded.< / p >
2011-06-20 20:35:27 +00:00
< / div > <!-- /content - primary -->
< div class = "content-secondary" >
< div data-role = "collapsible" data-collapsed = "true" data-theme = "b" >
2011-06-20 22:23:09 +00:00
< h3 > More in this section< / h3 >
2011-06-20 20:35:27 +00:00
< ul data-role = "listview" data-theme = "c" data-dividertheme = "d" >
2011-06-20 21:17:04 +00:00
< 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 >
2011-07-28 23:00:52 +00:00
< li > < a href = "texts/index.html" > Text inputs< / a > < / li >
2011-06-20 21:17:04 +00:00
< li > < a href = "forms-search.html" > Search inputs< / a > < / li >
< li > < a href = "forms-slider.html" > Slider< / a > < / li >
< li > < a href = "forms-switch.html" > Flip toggle switch< / a > < / li >
2011-07-29 20:59:06 +00:00
< li > < a href = "radiobuttons/index.html" > Radio buttons< / a > < / li >
2011-07-29 22:37:57 +00:00
< li > < a href = "checkboxes/index.html" > Checkboxes< / a > < / li >
2011-07-28 16:00:36 +00:00
< li > < a href = "selects/index.html" > Select menus< / a > < / li >
2011-06-20 21:17:04 +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 >
< li data-theme = "a" > < a href = "plugin-eventsmethods.html" > Plugin methods< / a > < / li >
2011-06-20 20:35:27 +00:00
< / ul >
< / div >
< / div >
2010-11-11 23:47:21 +00:00
< / div > <!-- /content -->
2011-06-20 20:35:27 +00:00
< div data-role = "footer" class = "footer-docs" data-theme = "c" >
2011-06-20 22:50:52 +00:00
< p > © 2011 The jQuery Project< / p >
2011-06-20 20:35:27 +00:00
< / div >
< / div > <!-- /page -->
< / body >
< / html >
