mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 14:30:28 +00:00
123 lines
No EOL
5.5 KiB
HTML
Executable file
123 lines
No EOL
5.5 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Forms</title>
|
|
<link rel="stylesheet" href="../../themes/default" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
<script type="text/javascript" src="../docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Slider</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<form action="#" method="get">
|
|
|
|
<h2>Select menus</h2>
|
|
|
|
<p>The select menus are driven off native <code>select</code> 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. </p>
|
|
<p>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 as a whole new page. This lets us take advantage of native scrolling while the menu is in use. </p>
|
|
|
|
<p>To add a select widget 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>The framework will find all <code>select</code> elements and automatically enhance them into the custom select menus.</p>
|
|
|
|
<pre><code>
|
|
<div data-role="fieldcontain">
|
|
<label for="select-choice-1" class="select">Choose 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>
|
|
|
|
<p> If there is a small number of options that will fit on the device's screen, it will appear as a small overlay with a pop transition.</p>
|
|
|
|
<div data-role="fieldcontain">
|
|
<label for="select-choice-1" class="select">Choose 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>
|
|
|
|
|
|
<p>If there is a select menu with too many options to show on the device's screen, the framework will automatically create a new "page" populated with a standard list view that contains all the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the <code>label</code> is used as the title for this page.</p>
|
|
|
|
<div data-role="fieldcontain">
|
|
<label for="select-choice-3" class="select">Your state:</label>
|
|
<select name="select-choice-3" id="select-choice-3">
|
|
<option value="AL">Alabama</option>
|
|
<option value="AK">Alaska</option>
|
|
<option value="AZ">Arizona</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="CA">California</option>
|
|
<option value="CO">Colorado</option>
|
|
<option value="CT">Connecticut</option>
|
|
<option value="DE">Delaware</option>
|
|
<option value="FL">Florida</option>
|
|
<option value="GA">Georgia</option>
|
|
<option value="HI">Hawaii</option>
|
|
<option value="ID">Idaho</option>
|
|
<option value="IL">Illinois</option>
|
|
<option value="IN">Indiana</option>
|
|
<option value="IA">Iowa</option>
|
|
<option value="KS">Kansas</option>
|
|
<option value="KY">Kentucky</option>
|
|
<option value="LA">Louisiana</option>
|
|
<option value="ME">Maine</option>
|
|
<option value="MD">Maryland</option>
|
|
<option value="MA">Massachusetts</option>
|
|
<option value="MI">Michigan</option>
|
|
<option value="MN">Minnesota</option>
|
|
<option value="MS">Mississippi</option>
|
|
<option value="MO">Missouri</option>
|
|
<option value="MT">Montana</option>
|
|
<option value="NE">Nebraska</option>
|
|
<option value="NV">Nevada</option>
|
|
<option value="NH">New Hampshire</option>
|
|
<option value="NJ">New Jersey</option>
|
|
<option value="NM">New Mexico</option>
|
|
<option value="NY">New York</option>
|
|
<option value="NC">North Carolina</option>
|
|
<option value="ND">North Dakota</option>
|
|
<option value="OH">Ohio</option>
|
|
<option value="OK">Oklahoma</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
<option value="RI">Rhode Island</option>
|
|
<option value="SC">South Carolina</option>
|
|
<option value="SD">South Dakota</option>
|
|
<option value="TN">Tennessee</option>
|
|
<option value="TX">Texas</option>
|
|
<option value="UT">Utah</option>
|
|
<option value="VT">Vermont</option>
|
|
<option value="VA">Virginia</option>
|
|
<option value="WA">Washington</option>
|
|
<option value="WV">West Virginia</option>
|
|
<option value="WI">Wisconsin</option>
|
|
<option value="WY">Wyoming</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |