Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-03 20:34:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote branch 'origin/master'

Browse source
This commit is contained in:
scottjehl 2011-09-27 16:27:23 -04:00
commit 3a337e98c7
19 changed files with 29 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/_assets/images/ipad-palm.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 99 KiB

1
docs/about/intro.html
View file

@ -34,7 +34,6 @@
<p>To make this broad support possible, all pages in jQuery Mobile are built on a foundation of <strong>clean, semantic HTML</strong> to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies <strong>progressive enhancement techniques</strong> to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. <strong>Accessibility features</strong> such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
<img src="../_assets/images/ipad-palm.png" alt="Smartphone and tablet designs" style="max-width:100%; margin-top:20px;">
</div><!--/content-primary -->

2
docs/forms/docs-forms.html
View file

@ -128,7 +128,7 @@ myswitch .slider("refresh");
<li data-role="list-divider">Form elements</li>
<li data-theme="a"><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
<li><a href="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/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>

2
docs/forms/forms-all-native.html
View file

@ -218,7 +218,7 @@
<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="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/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>

2
docs/forms/forms-all.html
View file

@ -216,7 +216,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="docs-forms.html">Form basics</a></li>
<li data-theme="a"><a href="forms-all.html">Form element gallery</a></li>
<li><a href="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/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>

2
docs/forms/forms-sample-response.php
View file

@ -52,7 +52,7 @@
<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="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/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>

2
docs/forms/forms-sample-selfsubmit.php
View file

@ -50,7 +50,7 @@
<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="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/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>

2
docs/forms/forms-sample.html
View file

@ -83,7 +83,7 @@
<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="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/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>

2
docs/forms/forms-search.html
View file

@ -66,7 +66,7 @@
<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="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/index.html">Text inputs</a></li>
<li data-theme="a"><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>

2
docs/forms/forms-slider.html
View file

@ -76,7 +76,7 @@ $("input[type=range]").val(60).slider("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="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/index.html">Text inputs</a></li>
<li><a href="forms-search.html">Search inputs</a></li>
<li data-theme="a"><a href="forms-slider.html">Slider</a></li>
<li><a href="forms-switch.html">Flip toggle switch</a></li>

2
docs/forms/forms-switch.html
View file

@ -73,7 +73,7 @@ myswitch .slider("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="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/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 data-theme="a"><a href="forms-switch.html">Flip toggle switch</a></li>

2
docs/forms/forms-themes.html
View file

@ -377,7 +377,7 @@
<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="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/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>

2
docs/forms/index.html
View file

@ -27,7 +27,7 @@
<ul data-role="listview" data-inset="true">
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
<li><a href="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/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>

2
docs/forms/plugin-eventsmethods.html
View file

@ -185,7 +185,7 @@ $('input').button('disable');
<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="texts/index.html">Text inputs</a></li>
<li><a href="textinputs/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>

4
docs/forms/texts/events.html → docs/forms/textinputs/events.html
View file

@ -34,7 +34,7 @@
<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>
<p>You can bind jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events to the input or textarea, like change, focus, blur, etc.:</p>
<pre><code>
$( ".selector" ).bind( "change", function(event, ui) {
...
@ -47,7 +47,7 @@ $( ".selector" ).bind( "change", function(event, ui) {
<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>
<p>This event is fired when the input is created. You can bind custom logic to it like this:</p>
<pre><code>
$( ".selector" ).textinput({

42
docs/forms/texts/index.html → docs/forms/textinputs/index.html
View file

@ -34,10 +34,9 @@
<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>
<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 device.</p>
<h2>Text inputs</h2>
<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>
@ -50,55 +49,42 @@
<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="" />
<input type="text" name="name" id="name" value="" />
</div>
<h3>Standard text input types</h3>
<p>In jQuery Mobile, you can use existing and new HTML5 input types such as <code>password</code>, <code>email</code>, <code>tel</code>, <code>number</code>, and more. Some type values are rendered differently across browsers &#8212; for example, Chrome displays the <code>range</code> input renders as a slider &#8212; so we standardize their appearance by dynamically changing their type to <code>text</code> (currently, this applies to <code>range</code> and <code>search</code>). You can configure which input types are degraded to <code>text</code> with the <code>page</code> plugin's options.</p>
<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>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
&lt;label for=&quot;password&quot;&gt;Password Input:&lt;/label&gt;
&lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; value=&quot;&quot; /&gt;
&lt;/div&gt;
</code></pre>
<p>The password input is displayed like this:</p>
<div data-role="fieldcontain">
<label for="password">Password Input:</label>
<label for="password">Password:</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="" />
<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="" />
<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="" />
<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="" />
<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>
<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. </p>
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>textarea</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>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
@ -107,7 +93,7 @@
&lt;/div&gt;
</code></pre>
<p>The textarea is displayed like this and will grow as you type:</p>
<p>The textarea is displayed like this and will grow to fit new lines as you type:</p>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

0
docs/forms/texts/methods.html → docs/forms/textinputs/methods.html
View file

2
docs/forms/texts/options.html → docs/forms/textinputs/options.html
View file

@ -41,7 +41,7 @@
<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=&quot;a&quot;</code></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, like <code>data-theme=&quot;a&quot;</code>.</p>
<pre><code>$('.selector').textinput(<strong>{ theme: "a" }</strong>);</code></pre>
</dd>

149
docs/forms/texts/forms-text.html
View file

@ -1,149 +0,0 @@
<!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">
<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>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
&lt;label for=&quot;name&quot;&gt;Text Input:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; value=&quot;&quot; /&gt;
&lt;/div&gt;
</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>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
&lt;label for=&quot;password&quot;&gt;Password Input:&lt;/label&gt;
&lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; value=&quot;&quot; /&gt;
&lt;/div&gt;
</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>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
&lt;label for=&quot;textarea&quot;&gt;Textarea:&lt;/label&gt;
&lt;textarea cols=&quot;40&quot; rows=&quot;8&quot; name=&quot;textarea&quot; id=&quot;textarea&quot;&gt;&lt;/textarea&gt;
&lt;/div&gt;
</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="forms-text.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="checkboxes/index.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>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>