mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-04 04:44:42 +00:00
edited demo pages for listviews
This commit is contained in:
scottjehl
parent
799cee85bc
commit
1a49fb9445
7 changed files with 832 additions and 63 deletions
|
|
@ -27,7 +27,9 @@
|
|||
<li><a href="lists-ul.html">Basic linked list</a></li>
|
||||
<li><a href="lists-nested.html">Nested list</a></li>
|
||||
<li><a href="lists-ol.html">Numbered list</a></li>
|
||||
<li><a href="lists-readonly.html">Read-only list</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="lists-split.html">Split button list</a></li>
|
||||
<li><a href="lists-divider.html">List dividers</a></li>
|
||||
<li><a href="lists-count.html">Count bubble</a></li>
|
||||
|
|
@ -37,6 +39,14 @@
|
|||
<li><a href="lists-search.html">Search filter bar</a></li>
|
||||
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
|
||||
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
|
||||
|
||||
<li><a href="lists-readonly.html">Read-only lists</a></li>
|
||||
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
|
||||
<li><a href="lists-forms.html">Lists with forms</a></li>
|
||||
<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="lists-inset.html">Inset styled lists</a></li>
|
||||
<li><a href="lists-performance.html">List performance test</a></li>
|
||||
<li><a href="lists-themes.html">Theming lists</a></li>
|
||||
|
|
|
|||
127
docs/lists/lists-all-full.html
Normal file
127
docs/lists/lists-all-full.html
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
|
||||
<title>jQuery Mobile Docs - Lists</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script type="text/javascript" src="../../js/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../js/"></script>
|
||||
<script type="text/javascript" src="docs/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>Linked list samples</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">
|
||||
|
||||
<form>
|
||||
<h2>Simple list</h2>
|
||||
|
||||
<ul data-role="listview">
|
||||
<li><a href="index.html">Acura</a></li>
|
||||
<li><a href="index.html">Audi</a></li>
|
||||
<li><a href="index.html">BMW</a></li>
|
||||
<li><a href="index.html">Cadillac</a></li>
|
||||
<li><a href="index.html">Ferrari</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Count bubbles</h2>
|
||||
<ul data-role="listview">
|
||||
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
|
||||
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
|
||||
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
|
||||
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Numbered list</h2>
|
||||
<ol data-role="listview">
|
||||
<li><a href="index.html">The Godfather</a></li>
|
||||
<li><a href="index.html">Inception</a></li>
|
||||
<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
|
||||
<li><a href="index.html">Pulp Fiction</a></li>
|
||||
<li><a href="index.html">Schindler's List</a></li>
|
||||
</ol>
|
||||
|
||||
<h2>Divided, formatted content</h2>
|
||||
<ul data-role="listview">
|
||||
<li><a href="index.html">
|
||||
<h3>Stephen Weber</h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>jQuery Team</h3>
|
||||
<p><strong>Boston Conference Planning</strong></p>
|
||||
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
|
||||
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
|
||||
</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Icon list</h2>
|
||||
<ul data-role="listview">
|
||||
<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
|
||||
<li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
|
||||
<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
|
||||
<li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Thumbnail, split button list</h2>
|
||||
|
||||
<ul data-role="listview">
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-p.jpg" />
|
||||
<h3>Wolfgang Amadeus Phoenix</h3>
|
||||
<p>Phoenix</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Divided, filterable list</h2>
|
||||
<ul data-role="listview" data-filter="true">
|
||||
<li data-role="list-divider">A</li>
|
||||
<li><a href="index.html">Adam Kinkaid</a></li>
|
||||
<li><a href="index.html">Alex Wickerham</a></li>
|
||||
<li><a href="index.html">Avery Johnson</a></li>
|
||||
<li data-role="list-divider">B</li>
|
||||
<li><a href="index.html">Bob Cabot</a></li>
|
||||
<li data-role="list-divider">C</li>
|
||||
<li><a href="index.html">Caleb Booth</a></li>
|
||||
<li><a href="index.html">Christopher Adams</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
204
docs/lists/lists-forms-inset.html
Normal file
204
docs/lists/lists-forms-inset.html
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
|
||||
<title>jQuery Mobile Docs - Lists</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script type="text/javascript" src="../../js/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../js/"></script>
|
||||
<script type="text/javascript" src="docs/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>Inset list samples</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">
|
||||
|
||||
<form>
|
||||
<h2>Form controls in listviews</h2>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li data-role="fieldcontain">
|
||||
<label for="name">Text Input:</label>
|
||||
<input type="text" name="name" id="name" value="" />
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<label for="search">Search Input:</label>
|
||||
<input type="search" name="password" id="search" value="" />
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<label for="slider2">Flip switch:</label>
|
||||
<select name="slider2" id="slider2" data-role="slider">
|
||||
<option value="off">Off</option>
|
||||
<option value="on">On</option>
|
||||
</select>
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<label for="slider">Slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Choose as many snacks as you'd like:</legend>
|
||||
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
|
||||
<label for="checkbox-1a">Cheetos</label>
|
||||
|
||||
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
|
||||
<label for="checkbox-2a">Doritos</label>
|
||||
|
||||
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
|
||||
<label for="checkbox-3a">Fritos</label>
|
||||
|
||||
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
|
||||
<label for="checkbox-4a">Sun Chips</label>
|
||||
</fieldset>
|
||||
</li>
|
||||
|
||||
<li data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup" data-type="horizontal">
|
||||
<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>
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</fieldset>
|
||||
</li>
|
||||
|
||||
|
||||
<li data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup" data-type="horizontal">
|
||||
<legend>Layout view:</legend>
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
|
||||
<label for="radio-choice-c">List</label>
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
|
||||
<label for="radio-choice-d">Grid</label>
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
|
||||
<label for="radio-choice-e">Gallery</label>
|
||||
</fieldset>
|
||||
</li>
|
||||
|
||||
<li 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>
|
||||
</li>
|
||||
|
||||
<li 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>
|
||||
</li>
|
||||
|
||||
<li data-role="fieldcontain">
|
||||
<label for="select-choice-a" class="select">Choose shipping method:</label>
|
||||
<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
|
||||
<option>Custom menu example</option>
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li class="ui-body ui-body-b">
|
||||
<fieldset class="ui-grid-a">
|
||||
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
|
||||
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
|
||||
</fieldset>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
202
docs/lists/lists-forms.html
Normal file
202
docs/lists/lists-forms.html
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
|
||||
<title>jQuery Mobile Docs - Lists</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script type="text/javascript" src="../../js/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../js/"></script>
|
||||
<script type="text/javascript" src="docs/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>Inset list samples</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">
|
||||
|
||||
<form>
|
||||
<h2>Form controls in listviews</h2>
|
||||
<ul data-role="listview">
|
||||
<li data-role="fieldcontain">
|
||||
<label for="name">Text Input:</label>
|
||||
<input type="text" name="name" id="name" value="" />
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<label for="search">Search Input:</label>
|
||||
<input type="search" name="password" id="search" value="" />
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<label for="slider2">Flip switch:</label>
|
||||
<select name="slider2" id="slider2" data-role="slider">
|
||||
<option value="off">Off</option>
|
||||
<option value="on">On</option>
|
||||
</select>
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<label for="slider">Slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Choose as many snacks as you'd like:</legend>
|
||||
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
|
||||
<label for="checkbox-1a">Cheetos</label>
|
||||
|
||||
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
|
||||
<label for="checkbox-2a">Doritos</label>
|
||||
|
||||
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
|
||||
<label for="checkbox-3a">Fritos</label>
|
||||
|
||||
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
|
||||
<label for="checkbox-4a">Sun Chips</label>
|
||||
</fieldset>
|
||||
</li>
|
||||
|
||||
<li data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup" data-type="horizontal">
|
||||
<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>
|
||||
</li>
|
||||
<li data-role="fieldcontain">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</fieldset>
|
||||
</li>
|
||||
|
||||
|
||||
<li data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup" data-type="horizontal">
|
||||
<legend>Layout view:</legend>
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
|
||||
<label for="radio-choice-c">List</label>
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
|
||||
<label for="radio-choice-d">Grid</label>
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
|
||||
<label for="radio-choice-e">Gallery</label>
|
||||
</fieldset>
|
||||
</li>
|
||||
|
||||
<li 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>
|
||||
</li>
|
||||
|
||||
<li 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>
|
||||
</li>
|
||||
|
||||
<li data-role="fieldcontain">
|
||||
<label for="select-choice-a" class="select">Choose shipping method:</label>
|
||||
<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
|
||||
<option>Custom menu example</option>
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li class="ui-body ui-body-b">
|
||||
<fieldset class="ui-grid-a">
|
||||
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
|
||||
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
|
||||
</fieldset>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</form>
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
|
||||
<title>jQuery Mobile Docs - Inset List</title>
|
||||
<title>jQuery Mobile Docs - Lists with Form Controls</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script type="text/javascript" src="../../js/jquery.js"></script>
|
||||
|
|
@ -15,19 +15,33 @@
|
|||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>Inset list</h1>
|
||||
<h1>Inset list samples</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">
|
||||
|
||||
<form>
|
||||
<h2>Simple list</h2>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
|
||||
<li><a href="index.html">Acura</a></li>
|
||||
<li><a href="index.html">Audi</a></li>
|
||||
<li><a href="index.html">BMW</a></li>
|
||||
<li><a href="index.html">Cadillac</a></li>
|
||||
<li><a href="index.html">Ferrari</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Count bubbles</h2>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
|
||||
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
|
||||
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
|
||||
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Numbered list</h2>
|
||||
<ol data-role="listview" data-inset="true">
|
||||
<li><a href="index.html">The Godfather</a></li>
|
||||
<li><a href="index.html">Inception</a></li>
|
||||
|
|
@ -36,7 +50,60 @@
|
|||
<li><a href="index.html">Schindler's List</a></li>
|
||||
</ol>
|
||||
|
||||
<h2>Divided, formatted content</h2>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="index.html">
|
||||
<h3>Stephen Weber</h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>jQuery Team</h3>
|
||||
<p><strong>Boston Conference Planning</strong></p>
|
||||
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
|
||||
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
|
||||
</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Icon list</h2>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
|
||||
<li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
|
||||
<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
|
||||
<li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Thumbnail, split button list</h2>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-p.jpg" />
|
||||
<h3>Wolfgang Amadeus Phoenix</h3>
|
||||
<p>Phoenix</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Divided, filterable list</h2>
|
||||
<ul data-role="listview" data-filter="true" data-inset="true">
|
||||
<li data-role="list-divider">A</li>
|
||||
<li><a href="index.html">Adam Kinkaid</a></li>
|
||||
<li><a href="index.html">Alex Wickerham</a></li>
|
||||
|
|
@ -47,44 +114,12 @@
|
|||
<li><a href="index.html">Caleb Booth</a></li>
|
||||
<li><a href="index.html">Christopher Adams</a></li>
|
||||
</ul>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li>
|
||||
<a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p>
|
||||
</a>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="index.html">
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
</a>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="index.html">
|
||||
<img src="images/album-p.jpg" />
|
||||
<h3>Wolfgang Amadeus Phoenix</h3>
|
||||
<p>Phoenix</p>
|
||||
</a>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="index.html">
|
||||
<img src="images/album-ok.jpg" />
|
||||
<h3>Of The Blue Colour Of The Sky</h3>
|
||||
<p>Ok Go</p>
|
||||
</a>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
|
|
|
|||
123
docs/lists/lists-readonly-inset.html
Normal file
123
docs/lists/lists-readonly-inset.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
|
||||
<title>jQuery Mobile Docs - Lists</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script type="text/javascript" src="../../js/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../js/"></script>
|
||||
<script type="text/javascript" src="docs/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>Inset list samples</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">
|
||||
|
||||
<h2>Simple list</h2>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li>Acura</li>
|
||||
<li>Audi</li>
|
||||
<li>BMW</li>
|
||||
<li>Cadillac</li>
|
||||
<li>Ferrari</li>
|
||||
</ul>
|
||||
|
||||
<h2>Count bubbles</h2>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li>Inbox <span class="ui-li-count">12</span></li>
|
||||
<li>Outbox <span class="ui-li-count">0</span></li>
|
||||
<li>Drafts <span class="ui-li-count">4</span></li>
|
||||
<li>Sent <span class="ui-li-count">328</span></li>
|
||||
<li>Trash <span class="ui-li-count">62</span></li>
|
||||
</ul>
|
||||
|
||||
<h2>Numbered list</h2>
|
||||
<ol data-role="listview" data-inset="true">
|
||||
<li>The Godfather</li>
|
||||
<li>Inception</li>
|
||||
<li>The Good, the Bad and the Ugly </li>
|
||||
<li>Pulp Fiction</li>
|
||||
<li>Schindler's List</li>
|
||||
</ol>
|
||||
|
||||
<h2>Divided, formatted content</h2>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li>
|
||||
<h3>Stephen Weber</h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>jQuery Team</h3>
|
||||
<p><strong>Boston Conference Planning</strong></p>
|
||||
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
|
||||
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Icon list</h2>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
|
||||
<li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></li>
|
||||
<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></li>
|
||||
<li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></li>
|
||||
<li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></li>
|
||||
<li><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></li>
|
||||
</ul>
|
||||
|
||||
<h2>Thumbnail list</h2>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li>
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/album-p.jpg" />
|
||||
<h3>Wolfgang Amadeus Phoenix</h3>
|
||||
<p>Phoenix</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Divided, filterable list</h2>
|
||||
<ul data-role="listview" data-filter="true" data-inset="true">
|
||||
<li data-role="list-divider">A</li>
|
||||
<li>Adam Kinkaid</li>
|
||||
<li>Alex Wickerham</li>
|
||||
<li>Avery Johnson</li>
|
||||
<li data-role="list-divider">B</li>
|
||||
<li>Bob Cabot</li>
|
||||
<li data-role="list-divider">C</li>
|
||||
<li>Caleb Booth</li>
|
||||
<li>Christopher Adams</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
docs/lists/lists-readonly.html
Executable file → Normal file
108
docs/lists/lists-readonly.html
Executable file → Normal file
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
|
||||
<title>jQuery Mobile Docs - Readonly Lists</title>
|
||||
<title>jQuery Mobile Docs - Lists</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script type="text/javascript" src="../../js/jquery.js"></script>
|
||||
|
|
@ -15,35 +15,103 @@
|
|||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>Read-only list</h1>
|
||||
<h1>Inset list samples</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">
|
||||
<ul data-role="listview" data-theme="d" data-inset="true">
|
||||
|
||||
<h2>Simple list</h2>
|
||||
|
||||
<ul data-role="listview">
|
||||
<li>Acura</li>
|
||||
<li>Audi</li>
|
||||
<li>BMW</li>
|
||||
<li>Cadillac</li>
|
||||
<li>Chrysler</li>
|
||||
<li>Dodge</li>
|
||||
<li>Ferrari</li>
|
||||
<li>Ford</li>
|
||||
<li>GMC</li>
|
||||
<li>Honda</li>
|
||||
<li>Hyundai</li>
|
||||
<li>Infiniti</li>
|
||||
<li>Jeep</li>
|
||||
<li>Kia</li>
|
||||
<li>Lexus</li>
|
||||
<li>Mini</li>
|
||||
<li>Nissan</li>
|
||||
<li>Porsche</li>
|
||||
<li>Subaru</li>
|
||||
<li>Toyota</li>
|
||||
<li>Volkswagon</li>
|
||||
<li>Volvo</li>
|
||||
</ul>
|
||||
|
||||
<h2>Count bubbles</h2>
|
||||
<ul data-role="listview">
|
||||
<li>Inbox <span class="ui-li-count">12</span></li>
|
||||
<li>Outbox <span class="ui-li-count">0</span></li>
|
||||
<li>Drafts <span class="ui-li-count">4</span></li>
|
||||
<li>Sent <span class="ui-li-count">328</span></li>
|
||||
<li>Trash <span class="ui-li-count">62</span></li>
|
||||
</ul>
|
||||
|
||||
<h2>Numbered list</h2>
|
||||
<ol data-role="listview">
|
||||
<li>The Godfather</li>
|
||||
<li>Inception</li>
|
||||
<li>The Good, the Bad and the Ugly </li>
|
||||
<li>Pulp Fiction</li>
|
||||
<li>Schindler's List</li>
|
||||
</ol>
|
||||
|
||||
<h2>Divided, formatted content</h2>
|
||||
<ul data-role="listview">
|
||||
<li>
|
||||
<h3>Stephen Weber</h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>jQuery Team</h3>
|
||||
<p><strong>Boston Conference Planning</strong></p>
|
||||
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
|
||||
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Icon list</h2>
|
||||
<ul data-role="listview">
|
||||
<li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
|
||||
<li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></li>
|
||||
<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></li>
|
||||
<li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></li>
|
||||
<li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></li>
|
||||
<li><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></li>
|
||||
</ul>
|
||||
|
||||
<h2>Thumbnail list</h2>
|
||||
|
||||
<ul data-role="listview">
|
||||
<li>
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/album-p.jpg" />
|
||||
<h3>Wolfgang Amadeus Phoenix</h3>
|
||||
<p>Phoenix</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Divided, filterable list</h2>
|
||||
<ul data-role="listview" data-filter="true">
|
||||
<li data-role="list-divider">A</li>
|
||||
<li>Adam Kinkaid</li>
|
||||
<li>Alex Wickerham</li>
|
||||
<li>Avery Johnson</li>
|
||||
<li data-role="list-divider">B</li>
|
||||
<li>Bob Cabot</li>
|
||||
<li data-role="list-divider">C</li>
|
||||
<li>Caleb Booth</li>
|
||||
<li>Christopher Adams</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue