mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 14:30:28 +00:00
178 lines
No EOL
7.8 KiB
HTML
178 lines
No EOL
7.8 KiB
HTML
<?php /*gzip page*/ ob_start("ob_gzhandler"); ?>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Framework - Form Controls</title>
|
|
<link rel="stylesheet" type="text/css" href="css/all" />
|
|
<script type="text/javascript" src="js/all"></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="ui-page">
|
|
|
|
<div class="ui-header">
|
|
<h1>Form controls</h1>
|
|
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
|
</div>
|
|
|
|
<div class="ui-content">
|
|
|
|
|
|
<form class="ui-body-c" action="#" method="get">
|
|
|
|
<div data-role="collapsible" data-state="collapsed">
|
|
<h1>Demo description</h1>
|
|
<p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. In theory, browsers that don't support the custom controls will still get a usable experience.</p>
|
|
|
|
<p><strong>The collapsible panels</strong> are marked up as either heading/content, or legend/fieldset combinations. Helper text on the toggle links allows them to make sense on a screen reader.</strong></p>
|
|
|
|
<p><strong>Text inputs and textareas</strong> are largely left alone, aside from having some theme classes applied. Textareas auto-grow using Brandon Aaron's expandable plugin, eliminating the need to 2-finger scroll a textarea on a mobile device.</p>
|
|
|
|
<p><strong>The radio and checkbox controls</strong> below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. The horizontal toggles for "cache settings" and "font styling" are also just sets of checkboxes and radios with icons disabled.</p>
|
|
|
|
<p><strong>The select menus</strong> are driven off native select elements, but the native selects are hidden from view and replaced with more style-friendly markup. The replacement buttons and menus are ARIA-enabled and are keyboard accessible on the desktop as well. When clicked, if the menu has room it will appear as an overlay listbox, but if there are too many options to fit in the window without scrolling, the page content is wrapped in a div and hidden, and the menu is appended after that div. This lets us take advantage of native scrolling while the menu is in use. Try the third select menu to see this behavior in action. </p>
|
|
|
|
<p><strong>The submit buttons</strong> are marked up as both input[type=submit] and button elements in the source, but we're generating anchor-based buttons in their place in order to take advantage of consistent styling across mobile browsers. The original buttons are still on the page, hidden from view, and clicking the replacement button will trigger a click on the original element, so the form can be submitted normally.</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<fieldset data-role="collapsible">
|
|
<legend>Text input controls</legend>
|
|
<div class="field">
|
|
<label for="name">Text Input:</label>
|
|
<input type="text" name="name" id="name" value="" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="password">Password Input:</label>
|
|
<input type="password" name="password" id="password" value="" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="textarea">Textarea:</label>
|
|
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
|
</div>
|
|
</fieldset>
|
|
|
|
|
|
|
|
<div id="radio-examples" data-role="collapsible">
|
|
|
|
<h2>Radio toggles</h2>
|
|
|
|
|
|
<fieldset data-role="controlgroup" class="field">
|
|
<legend>Choose one:</legend>
|
|
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
|
|
<label for="radio-choice-1">Choice 1</label>
|
|
|
|
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
|
|
<label for="radio-choice-2">Choice 2</label>
|
|
|
|
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
|
|
<label for="radio-choice-3">Choice 3</label>
|
|
|
|
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
|
|
<label for="radio-choice-4">Choice 4</label>
|
|
</fieldset>
|
|
|
|
<fieldset data-role="controlgroup" data-type="horizontal" class="field">
|
|
<legend>Cache settings:</legend>
|
|
<input type="radio" name="radio-choice-a" id="radio-choice-a" value="choice-a" checked="checked" />
|
|
<label for="radio-choice-a">On</label>
|
|
<input type="radio" name="radio-choice-a" id="radio-choice-b" value="choice-b" />
|
|
<label for="radio-choice-b">Off</label>
|
|
</fieldset>
|
|
|
|
</div>
|
|
|
|
<div id="checkbox-examples" data-role="collapsible">
|
|
|
|
<h2>Checkboxes</h2>
|
|
|
|
<fieldset data-role="controlgroup">
|
|
<legend>Choose one or more:</legend>
|
|
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
|
|
<label for="checkbox-1">Choice 1</label>
|
|
|
|
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
|
|
<label for="checkbox-2">Choice 2</label>
|
|
|
|
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
|
|
<label for="checkbox-3">Choice 3</label>
|
|
</fieldset>
|
|
|
|
<fieldset data-role="controlgroup" data-type="horizontal" class="field">
|
|
<legend>Font styling:</legend>
|
|
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
|
|
<label for="checkbox-6">b</label>
|
|
|
|
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
|
|
<label for="checkbox-7"><em>i</em></label>
|
|
|
|
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
|
|
<label for="checkbox-8">u</label>
|
|
</fieldset>
|
|
|
|
<fieldset class="field">
|
|
<input type="checkbox" name="checkbox-9" id="checkbox-9" class="custom" />
|
|
<label for="checkbox-9">Single Checkbox</label>
|
|
</fieldset>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<fieldset data-role="collapsible">
|
|
<legend>Select menus</legend>
|
|
<div class="field">
|
|
<label for="select-choice-1" class="select">Choose one:</label>
|
|
<select name="select-choice-1" id="select-choice-1">
|
|
<option value="Choice 1">Choice 1</option>
|
|
<option value="Choice 2">Choice 2</option>
|
|
<option value="Choice 3">Choice 3</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="select-choice-3" class="select">Choose one:</label>
|
|
<select name="select-choice-3" id="select-choice-3">
|
|
<option value="Choice 1">Choice 1</option>
|
|
<option value="Choice 2">Choice 2</option>
|
|
<option value="Choice 3">Choice 3</option>
|
|
<option value="Choice 4">Choice 4</option>
|
|
<option value="Choice 5">Choice 5</option>
|
|
<option value="Choice 6">Choice 6</option>
|
|
<option value="Choice 7">Choice 7</option>
|
|
<option value="Choice 8">Choice 8</option>
|
|
<option value="Choice 9">Choice 9</option>
|
|
<option value="Choice 10">Choice 10</option>
|
|
<option value="Choice 11">Choice 11</option>
|
|
<option value="Choice 12">Choice 12</option>
|
|
<option value="Choice 13">Choice 13</option>
|
|
<option value="Choice 14">Choice 14</option>
|
|
<option value="Choice 15">Choice 15</option>
|
|
<option value="Choice 16">Choice 16</option>
|
|
<option value="Choice 17">Choice 19</option>
|
|
<option value="Choice 20">Choice 20</option>
|
|
</select>
|
|
</div>
|
|
</fieldset>
|
|
|
|
|
|
|
|
<fieldset class="ui-body-c ui-body ui-config-a">
|
|
<div class="ui-block-a"><input type="submit" value="Input Submit" /></div>
|
|
<div class="ui-block-b"><button type="submit" data-theme="b">Button Submit</button></div>
|
|
</fieldset>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |