mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-19 05:41:00 +00:00
Text Input plugin with new API docs format
This commit is contained in:
Omar Vargas
parent
91dfba1d0a
commit
b9127f6eb3
6 changed files with 447 additions and 1 deletions
|
|
@ -458,7 +458,7 @@ myselect.selectmenu("refresh");
|
|||
<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="../forms-text.html">Text inputs</a></li>
|
||||
<li><a href="../texts/index.html">Text inputs</a></li>
|
||||
<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>
|
||||
|
|
|
|||
101
docs/forms/texts/events.html
Normal file
101
docs/forms/texts/events.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Text Input events</title>
|
||||
<link rel="stylesheet" href="../../../themes/default/" />
|
||||
<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>Text inputs</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>Text inputs</h2>
|
||||
|
||||
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
||||
<li><a href="index.html" data-role="button" data-transition="fade">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" class="ui-btn-active">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Since the native text inputs and textareas are used as a proxy for the custom text inputs, you can watch for events on the original, native text input and textareas instead of needing to go through the text input plugin. Bind to the change event by type: change, blur, focus, keypress, click, etc.</p>
|
||||
<pre><code>
|
||||
$( ".selector" ).bind( "change", function(event, ui) {
|
||||
...
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<p>The text input plugin has the following custom events:</p>
|
||||
|
||||
<dl>
|
||||
|
||||
<dt><code>create</code> triggered when a text input is created</dt>
|
||||
<dd>
|
||||
<p>This event is used to find out when a custom text input was created. It is not used to create a custom text input. The text input create event can be used like this: </p>
|
||||
|
||||
<pre><code>
|
||||
$( ".selector" ).textinput({
|
||||
create: function(event, ui) { ... }
|
||||
});
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
</form>
|
||||
</div><!--/content-primary -->
|
||||
|
||||
<div class="content-secondary">
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-theme="b">
|
||||
|
||||
<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 data-theme="a"><a href="index.html">Text inputs</a></li>
|
||||
<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>
|
||||
<li><a href="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<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><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
|
||||
|
||||
</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>
|
||||
|
||||
158
docs/forms/texts/index.html
Executable file
158
docs/forms/texts/index.html
Executable file
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Text inputs</title>
|
||||
<link rel="stylesheet" href="../../../themes/default/" />
|
||||
<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>Text inputs</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>Text inputs</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>Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile.</p>
|
||||
|
||||
<h2>Text inputs</h2>
|
||||
<p>To collect standard alphanmeric text, use an <code>input</code> with a <code>type="text"</code> attribute. It's important to 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 and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="name">Text Input:</label>
|
||||
<input type="text" name="name" id="name" value="" />
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<p>The text input is displayed like this:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="name">Text Input:</label>
|
||||
<input type="text" name="name" id="name" value="" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>Password inputs</h2>
|
||||
<p>For password fields, use an <code>input</code> with a <code>type="password"</code> attribute. 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 and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="password">Password Input:</label>
|
||||
<input type="password" name="password" id="password" value="" />
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<p>The password input is displayed like this:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="password">Password Input:</label>
|
||||
<input type="password" name="password" id="password" value="" />
|
||||
</div>
|
||||
|
||||
|
||||
<h2>More standard HTML5 input types</h2>
|
||||
<p>In jQuery Mobile, you can use new HTML5 input types such as <code>email</code>, <code>tel</code>, <code>number</code>, and more. We actively degrade certain types to <code>type=text</code> (currently, <code>range</code> and <code>search</code>) in certain cases when we provide a replacement for that type's native control. You can configure which types are degraded to text through the <code>page</code> plugin's options.</p>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="number">Number:</label>
|
||||
<input type="number" name="number" id="number" value="" />
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" name="email" id="email" value="" />
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="url">Url:</label>
|
||||
<input type="url" name="url" id="url" value="" />
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="tel">Tel:</label>
|
||||
<input type="tel" name="tel" id="tel" value="" />
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Textareas</h2>
|
||||
<p>For multi-line text inputs, use a <code>textarea</code> element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar which is very hard to use on a mobile device. </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 and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<p>The textarea is displayed like this and will grow as you type:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
</div><!--/content-primary -->
|
||||
|
||||
<div class="content-secondary">
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-theme="b">
|
||||
|
||||
<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 data-theme="a"><a href="index.html">Text inputs</a></li>
|
||||
<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>
|
||||
<li><a href="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<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><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
|
||||
|
||||
</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>
|
||||
97
docs/forms/texts/methods.html
Normal file
97
docs/forms/texts/methods.html
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Text Input methods</title>
|
||||
<link rel="stylesheet" href="../../../themes/default/" />
|
||||
<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>Text inputs</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>Text inputs</h2>
|
||||
|
||||
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
||||
<li><a href="index.html" data-role="button" data-transition="fade">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" class="ui-btn-active">Methods</a></li>
|
||||
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>The text input plugin has the following methods:</p>
|
||||
|
||||
<dl>
|
||||
|
||||
<dt><code>enable</code> enable a disabled text input.</dt>
|
||||
<dd>
|
||||
<pre><code>
|
||||
$('select').selectmenu('enable');
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
<dt><code>disable</code> disable a text input.</dt>
|
||||
<dd>
|
||||
<pre><code>
|
||||
$('select').selectmenu('disable');
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
</form>
|
||||
</div><!--/content-primary -->
|
||||
|
||||
<div class="content-secondary">
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-theme="b">
|
||||
|
||||
<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 data-theme="a"><a href="index.html">Text inputs</a></li>
|
||||
<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>
|
||||
<li><a href="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<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><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
|
||||
|
||||
</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>
|
||||
|
||||
90
docs/forms/texts/options.html
Normal file
90
docs/forms/texts/options.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Text Input options</title>
|
||||
<link rel="stylesheet" href="../../../themes/default/" />
|
||||
<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>Text inputs</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>Text inputs</h2>
|
||||
|
||||
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
||||
<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
|
||||
<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">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>The text input plugin has the following options:</p>
|
||||
|
||||
<dl>
|
||||
|
||||
<dt><code>theme</code> <em>string</em></dt>
|
||||
<dd>
|
||||
<p class="default">default: null, inherited from parent</p>
|
||||
<p>Sets the theme swatch color scheme for the text input element. This is a single letter from a-z that maps to the swatches included in your theme. By default, a text input will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
|
||||
<pre><code>$('.selector').textinput(<strong>{ theme: "a" }</strong>);</code></pre>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
</form>
|
||||
</div><!--/content-primary -->
|
||||
|
||||
<div class="content-secondary">
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true" data-theme="b">
|
||||
|
||||
<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 data-theme="a"><a href="index.html">Text inputs</a></li>
|
||||
<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>
|
||||
<li><a href="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<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><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
|
||||
|
||||
</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>
|
||||
|
||||
Loading…
Reference in a new issue