mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
Re-vamped form docs to add in full width examples and clean up demos
This commit is contained in:
toddparker
parent
90d29840f6
commit
daeeab8b83
7 changed files with 279 additions and 87 deletions
|
|
@ -40,6 +40,18 @@
|
|||
|
||||
<p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. 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.</p>
|
||||
|
||||
<pre><code>
|
||||
<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
|
||||
<label for="checkbox-0">I agree</label>
|
||||
</code></pre>
|
||||
|
||||
<p>This will produce a basic checkbox. The default styles will set the width of the element to 100% of the parent container.</p>
|
||||
|
||||
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
|
||||
<label for="checkbox-0">I agree</label>
|
||||
|
||||
|
||||
|
||||
<p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
|
||||
|
||||
<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
|
||||
|
|
@ -47,11 +59,11 @@
|
|||
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Agree to the terms:</legend>
|
||||
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
|
||||
<label for="checkbox-1">I agree</label>
|
||||
</fieldset>
|
||||
<strong><fieldset data-role="controlgroup">
|
||||
<legend>Agree to the terms:</legend></strong>
|
||||
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
|
||||
<label for="checkbox-1">I agree</label>
|
||||
<strong></fieldset></strong>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
|
|
|
|||
|
|
@ -44,11 +44,48 @@
|
|||
|
||||
<p>Because radio buttons use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the radio buttons in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question.</p>
|
||||
|
||||
<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
|
||||
<p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the container.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup">
|
||||
<strong><fieldset data-role="controlgroup">
|
||||
<legend>Choose a pet:</legend></strong>
|
||||
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
|
||||
<label for="radio-choice-1">Cat</label>
|
||||
|
||||
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
|
||||
<label for="radio-choice-2">Dog</label>
|
||||
|
||||
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
|
||||
<label for="radio-choice-3">Hamster</label>
|
||||
|
||||
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
|
||||
<label for="radio-choice-4">Lizard</label>
|
||||
<strong></fieldset></strong>
|
||||
</code></pre>
|
||||
|
||||
|
||||
<p>This will produce a vertically grouped radio button set. The default styles set the width of the button group to 100% of the parent container and stacks the label on a separate line.</p>
|
||||
|
||||
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Choose a pet:</legend>
|
||||
<input type="radio" name="radio-pet-1a" id="radio-pet-1a" value="choice-1" checked="checked" />
|
||||
<label for="radio-pet-1a">Cat</label>
|
||||
|
||||
<input type="radio" name="radio-pet-1a" id="radio-pet-2a" value="choice-2" />
|
||||
<label for="radio-pet-2a">Dog</label>
|
||||
|
||||
<input type="radio" name="radio-pet-1a" id="radio-pet-3a" value="choice-3" />
|
||||
<label for="radio-pet-3a">Hamster</label>
|
||||
|
||||
<input type="radio" name="radio-pet-1a" id="radio-pet-4a" value="choice-4" />
|
||||
<label for="radio-pet-4a">Lizard</label>
|
||||
</fieldset>
|
||||
|
||||
|
||||
<pre><code>
|
||||
<strong><div data-role="fieldcontain">
|
||||
</strong> <fieldset data-role="controlgroup">
|
||||
<legend>Choose a pet:</legend>
|
||||
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
|
||||
<label for="radio-choice-1">Cat</label>
|
||||
|
|
@ -62,28 +99,28 @@
|
|||
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
|
||||
<label for="radio-choice-4">Lizard</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</code></pre>
|
||||
<strong></div>
|
||||
</strong> </code></pre>
|
||||
|
||||
<p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the fie.</p>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Choose a pet:</legend>
|
||||
<input type="radio" name="radio-pet-1" id="radio-pet-1" value="choice-1" checked="checked" />
|
||||
<label for="radio-pet-1">Cat</label>
|
||||
|
||||
<input type="radio" name="radio-pet-1" id="radio-pet-2" value="choice-2" />
|
||||
<label for="radio-pet-2">Dog</label>
|
||||
<p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the container.</p>
|
||||
|
||||
<input type="radio" name="radio-pet-1" id="radio-pet-3" value="choice-3" />
|
||||
<label for="radio-pet-3">Hamster</label>
|
||||
<div data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Choose a pet:</legend>
|
||||
<input type="radio" name="radio-pet-1" id="radio-pet-1" value="choice-1" checked="checked" />
|
||||
<label for="radio-pet-1">Cat</label>
|
||||
|
||||
<input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4" />
|
||||
<label for="radio-pet-4">Lizard</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<input type="radio" name="radio-pet-1" id="radio-pet-2" value="choice-2" />
|
||||
<label for="radio-pet-2">Dog</label>
|
||||
|
||||
<input type="radio" name="radio-pet-1" id="radio-pet-3" value="choice-3" />
|
||||
<label for="radio-pet-3">Hamster</label>
|
||||
|
||||
<input type="radio" name="radio-pet-1" id="radio-pet-4" value="choice-4" />
|
||||
<label for="radio-pet-4">Lizard</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<h2>Horizontal radio button sets</h2>
|
||||
|
||||
<p>Radio buttons can also be used for grouped button sets only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
|
||||
|
|
@ -104,7 +141,7 @@
|
|||
</fieldset>
|
||||
</div>
|
||||
|
||||
<p>The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.</p>
|
||||
<p>The framework will float the labels so they sit side-by-side on a line, hides the radio button icons and only round the left and right edges of the group.</p>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -35,25 +35,37 @@
|
|||
</ul>
|
||||
|
||||
<p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an <code>input</code> with a <code>type="search"</code> attribute in your markup. </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>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>
|
||||
|
||||
<pre><code>
|
||||
<label for="search-basic">Search Input:</label>
|
||||
<input type="search" name="search" id="searc-basic" value="" />
|
||||
</code></pre>
|
||||
|
||||
<p>This will produce a basic search input. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.</p>
|
||||
<label for="search-basic">Search Input:</label>
|
||||
<input type="search" name="search" id="search-basic" value="" />
|
||||
|
||||
|
||||
<p>Optionally wrap the search input in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="search">Search Input:</label>
|
||||
<strong><div data-role="fieldcontain">
|
||||
</strong> <label for="search">Search Input:</label>
|
||||
<input type="search" name="password" id="search" value="" />
|
||||
</div>
|
||||
</code></pre>
|
||||
<strong></div>
|
||||
</strong></code></pre>
|
||||
|
||||
<p>The search input is displayed like this:</p>
|
||||
<p>The search input is now displayed like this:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="search">Search Input:</label>
|
||||
<input type="search" name="password" id="search" value="" />
|
||||
<input type="search" name="search2" id="search" value="" />
|
||||
</div>
|
||||
|
||||
<p>Themed variation:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="searchA">Search Input:</label>
|
||||
<input type="search" name="searchA" id="searchA" value="" data-theme="a" />
|
||||
<input type="search" name="search3" id="searchA" value="" data-theme="a" />
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -38,23 +38,45 @@
|
|||
|
||||
<p>By default, the framework leverages the native OS options menu to use with the custom button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value.</p>
|
||||
|
||||
<p>To add a select menu to your page, start with a standard <code>select</code> element populated with a set of <code>option</code> elements. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>select</code> so they are semantically associated. Wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to help visually group it in a longer form. </p>
|
||||
<p>To add a select menu to your page, start with a standard <code>select</code> element populated with a set of <code>option</code> elements. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>select</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>
|
||||
|
||||
<p>The framework will find all <code>select</code> elements and automatically enhance them into select menus, no need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of a select, add <code>data-role="none"</code> attribute to the <code>select</code>.</p>
|
||||
|
||||
<pre><code>
|
||||
<label for="select-choice-0" class="select">Shipping method:</label>
|
||||
<select name="select-choice-0" id="select-choice-1">
|
||||
<option value="standard">Standard: 7 day</option>
|
||||
<option value="rush">Rush: 3 days</option>
|
||||
<option value="express">Express: next day</option>
|
||||
<option value="overnight">Overnight</option>
|
||||
</select>
|
||||
</code></pre>
|
||||
|
||||
<p>The framework will find all <code>select</code> elements and automatically enhance them into select menus. The markup for a select grouped in a field container:</p>
|
||||
<p>This will produce a basic select menu. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.</p>
|
||||
|
||||
<label for="select-choice-0" class="select">Shipping method:</label>
|
||||
<select name="select-choice-0" id="select-choice-1">
|
||||
<option value="standard">Standard: 7 day</option>
|
||||
<option value="rush">Rush: 3 days</option>
|
||||
<option value="express">Express: next day</option>
|
||||
<option value="overnight">Overnight</option>
|
||||
</select>
|
||||
|
||||
|
||||
<p>Optionally wrap the selects in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="select-choice-1" class="select">Shipping method:</label>
|
||||
<strong><div data-role="fieldcontain">
|
||||
</strong> <label for="select-choice-1" class="select">Shipping method:</label>
|
||||
<select name="select-choice-1" id="select-choice-1">
|
||||
<option value="standard">Standard: 7 day</option>
|
||||
<option value="rush">Rush: 3 days</option>
|
||||
<option value="express">Express: next day</option>
|
||||
<option value="overnight">Overnight</option>
|
||||
</select>
|
||||
</div>
|
||||
</code></pre>
|
||||
<strong></div>
|
||||
</strong></code></pre>
|
||||
|
||||
<p>produces this select menu:</p>
|
||||
<p>The select input is now displayed like this:</p>
|
||||
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
|
|
|
|||
|
|
@ -36,19 +36,33 @@
|
|||
<p>To add a slider widget to your page, use a standard <code>input</code> with the <code>type="range"</code> attribute. The input's <code>value</code> is used to configure the starting position of the handle and the value populated in the text input. Specify <code>min</code> and <code>max</code> attribute values to set the slider's range. The framework will parse these attributes to configure the slider widget. </p>
|
||||
|
||||
<p>As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.</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>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>
|
||||
|
||||
<p>The framework will find all <code>inputs</code> elements with a <code>type="range"</code> and automatically enhance them into a slider with an accompanying input, no need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of this input into a slider, add <code>data-role="none"</code> attribute to the <code>input</code>.</p> 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="slider">Input slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="25" min="0" max="100" />
|
||||
</div>
|
||||
<label for="slider-0">Input slider:</label>
|
||||
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
|
||||
</code></pre>
|
||||
|
||||
<p>The default slider is displayed like this:</p>
|
||||
<p>The default slider is displayed like this:</p>
|
||||
<label for="slider-0">Input slider:</label>
|
||||
<input type="range" name="slider-1" id="slider-0" value="25" min="0" max="100" />
|
||||
|
||||
<p>Optionally wrap the slider 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="slider">Input slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="25" min="0" max="100" />
|
||||
<strong></div>
|
||||
</strong></code></pre>
|
||||
|
||||
<p>The slider is now be is displayed like this:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider-1">Input slider:</label>
|
||||
<input type="range" name="slider-1" id="slider-1" value="25" min="0" max="100" data-theme="b" data-track-theme="a" />
|
||||
<input type="range" name="slider-1" id="slider-1" value="25" min="0" max="100" />
|
||||
</div>
|
||||
|
||||
<p>Sliders also respond to key commands. Right Arrow, Up Arrow, and Page Up keys increase the value; Left Arrow, Down Arrow, and Page Down keys decrease it. To move the slider to its minimum or maximum value, use the Home or End key, respectively.</p>
|
||||
|
|
@ -61,6 +75,22 @@
|
|||
$('input').slider();
|
||||
</code></pre>
|
||||
|
||||
|
||||
<h2>Theming the slider</h2>
|
||||
<p>To set the theme swatch for the slider, add a <code>data-theme</code> attribute to the <code>input</code> which will apply the theme to both the input, handle and track. The track swatch can be set separately by adding the <code>data-track-theme</code> attribute to apply the down state version of the selected button swatch.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider-2">Input slider:</label>
|
||||
<input type="range" name="slider-2" id="slider-1" value="25" min="0" max="100" <strong>data-theme="a" data-track-theme="b"</strong> />
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<p>This will produce a themed slider:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider-2">Input slider:</label>
|
||||
<input type="range" name="slider-2" id="slider-1" value="25" min="0" max="100" data-theme="a" data-track-theme="b" />
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/content-primary -->
|
||||
|
||||
|
|
|
|||
|
|
@ -35,27 +35,78 @@
|
|||
|
||||
<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>
|
||||
|
||||
<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. 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>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>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider">Select slider:</label>
|
||||
<select name="slider" id="slider" data-role="slider">
|
||||
<option value="off">Off</option>
|
||||
<option value="on">On</option>
|
||||
</select>
|
||||
</div>
|
||||
<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>
|
||||
</code></pre>
|
||||
<p>The flip toggle switch is displayed like this:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider">Flip switch:</label>
|
||||
<select name="slider" id="slider" data-role="slider">
|
||||
|
||||
<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">
|
||||
<option value="off">Off</option>
|
||||
<option value="on">On</option>
|
||||
</select>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<form action="#" method="get">
|
||||
|
||||
<h2>Text inputs</h2>
|
||||
<h2>Text inputs & Textareas</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>
|
||||
|
|
@ -36,25 +36,40 @@
|
|||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<h2>Text inputs</h2>
|
||||
<p>To collect standard alphanmeric text, use an <code>input</code> with a <code>type="text"</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. 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>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="name">Text Input:</label>
|
||||
<input type="text" name="name" id="name" value="" />
|
||||
</div>
|
||||
<label for="basic">Text Input:</label>
|
||||
<input type="text" name="name" id="basic" value="" />
|
||||
</code></pre>
|
||||
|
||||
<p>This will produce a basic text input. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.</p>
|
||||
|
||||
<label for="basic">Text Input:</label>
|
||||
<input type="text" name="name" id="basic" value="" />
|
||||
|
||||
<p>Optionally wrap the text input 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="name">Text Input:</label>
|
||||
<input type="text" name="name" id="name" value="" />
|
||||
<strong></div>
|
||||
</strong></code></pre>
|
||||
|
||||
<p>The text input is displayed like this:</p>
|
||||
<p>The text input is now displayed like this:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="name">Text Input:</label>
|
||||
<input type="text" name="name" id="name" value="" />
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Standard text input types</h3>
|
||||
<h3>More 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 — for example, Chrome displays the <code>range</code> input renders as a slider — 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>
|
||||
|
||||
<p>One major advantage of using these more specific input types if that on mobile devices, specialized keyboards that speed data entry are offered in place of the standard text keyboard. Try the followin inputs on a mobile device to see which display custom keyboards on various platforms.</p>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" id="password" value="" />
|
||||
|
|
@ -80,38 +95,51 @@
|
|||
<input type="tel" name="tel" id="tel" value="" />
|
||||
</div>
|
||||
|
||||
<h3>Degraded input types</h3>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<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. </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>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</div>
|
||||
<strong><label for="textarea-a">Textarea:</label>
|
||||
<textarea name="textarea" id="textarea-a"></strong>
|
||||
I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
|
||||
<strong></textarea></strong>
|
||||
</code></pre>
|
||||
|
||||
<p>This will produce a basic textarea with the width set to 100% of the parent container and the label stacked on a separate line.The textarea will grow to fit new lines as you type:</p>
|
||||
<label for="textarea-a">Textarea:</label>
|
||||
<textarea name="textarea" id="textarea-a">
|
||||
I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
|
||||
</textarea>
|
||||
|
||||
<pre><code>
|
||||
<strong><div data-role="fieldcontain">
|
||||
</strong><label for="textarea">Textarea:</label>
|
||||
<textarea name="textarea" id="textarea"></textarea>
|
||||
<strong></div></strong>
|
||||
</code></pre>
|
||||
|
||||
<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>
|
||||
<textarea name="textarea" id="textarea"></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>Calling the textinput plugin</h2>
|
||||
|
||||
<p>This plugin will auto initialize on any page that contains a text input, no need for a <code>data-role</code> attribute in the markup. However, if needed you can directly call the <code>textinput</code> plugin on any selector, just like any jQuery plugin:</p>
|
||||
<pre><code>
|
||||
<p>This plugin will auto initialize on any page that contains a textarea or any of the text input types listed above, no need for a <code>data-role</code> attribute in the markup. However, if needed you can directly call the <code>textinput</code> plugin on any selector, just like any jQuery plugin:</p>
|
||||
<pre><code>
|
||||
$('input').textinput();
|
||||
</code></pre>
|
||||
</code></pre>
|
||||
|
||||
|
||||
<h2>Degraded 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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue