mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-10 15:44:45 +00:00
Merge branch 'master' of github.com:jquery/jquery-mobile
This commit is contained in:
scottjehl
commit
721ea2481d
10 changed files with 330 additions and 44 deletions
36
docs/content/api-content.html
Executable file
36
docs/content/api-content.html
Executable file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Content formatting</title>
|
||||
<link rel="stylesheet" href="../../css/all" />
|
||||
<script type="text/javascript" src="../../js/all"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Content formatting API</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content" data-theme="c">
|
||||
|
||||
<h2>Dependencies</h2>
|
||||
<p>To be documented</p>
|
||||
|
||||
<h2>Options</h2>
|
||||
<p>To be documented</p>
|
||||
|
||||
<h2>Methods</h2>
|
||||
<p>To be documented</p>
|
||||
|
||||
<h2>Known Issues</h2>
|
||||
<p>To be documented</p>
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
27
docs/content/content-all.html
Executable file
27
docs/content/content-all.html
Executable file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Content formatting</title>
|
||||
<link rel="stylesheet" href="../../css/all" />
|
||||
<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>Content formatting</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<p>to do</p>
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
98
docs/content/content-html.html
Executable file
98
docs/content/content-html.html
Executable file
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Content formatting</title>
|
||||
<link rel="stylesheet" href="../../css/all" />
|
||||
<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>HTML Formatting</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. Here is what standard HTML markup looks like by default:</p>
|
||||
|
||||
<h1>H1 Heading</h1>
|
||||
<h2>H2 Heading</h2>
|
||||
<h3>H3 Heading</h3>
|
||||
<h4>H4 Heading</h4>
|
||||
<h5>H5 Heading</h5>
|
||||
<h6>H1 Heading</h6>
|
||||
|
||||
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
|
||||
|
||||
<blockquote>How about some blockquote action with a <cite>cite</cite></blockquote>
|
||||
|
||||
<p>This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.</p>
|
||||
|
||||
<ul>
|
||||
<li>Unordered list item 1</li>
|
||||
<li>Unordered list item 1</li>
|
||||
<li>Unordered list item 1</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li>Ordered list item 1</li>
|
||||
<li>Ordered list item 1</li>
|
||||
<li>Ordered list item 1</li>
|
||||
</ul>
|
||||
|
||||
<dl title="Definition list">
|
||||
<dt>Definition term</dt>
|
||||
<dd>I'm the definition text</dd>
|
||||
<dt>Definition term</dt>
|
||||
<dd>I'm the definition text</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
|
||||
<table summary="This table lists all the JetBlue flights.">
|
||||
<caption>Flight Schedule</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Flight:</th>
|
||||
<th scope="col">From:</th>
|
||||
<th scope="col">To:</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="5">Total: 3 flights</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">JetBlue 983</th>
|
||||
<td>Boston (BOS)</td>
|
||||
<td>New York (JFK)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">JetBlue 354</th>
|
||||
<td>San Francisco (SFO)</td>
|
||||
<td>Los Angeles (LAX)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">JetBlue 465</th>
|
||||
<td>New York (JFK)</td>
|
||||
<td>Portland (PDX)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
29
docs/content/content-themes.html
Executable file
29
docs/content/content-themes.html
Executable file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Content formatting</title>
|
||||
<link rel="stylesheet" href="../../css/all" />
|
||||
<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>Theming content</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>Theming</h2>
|
||||
|
||||
<p>To do...</p>
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
67
docs/content/docs-content.html
Executable file
67
docs/content/docs-content.html
Executable file
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Content formatting</title>
|
||||
<link rel="stylesheet" href="../../css/all" />
|
||||
<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>Content formatting</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<p>jQuery Mobile provides a number of tools and widgets to help you format content for mobile.</p>
|
||||
|
||||
<h2>HTML markup</h2>
|
||||
|
||||
<p>Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. We don't use CSS resets or a lot of custom styles because standard HTML markup is provides a lot of visual texture out of the box. By taking a light hand with content styling, it gives designers and developers a clean slate to work with instead of fighting against a lot of complex styles. Here is what standard HTML markup looks like by default:</p>
|
||||
|
||||
<a href="content-html.html">View default HTML rendering</a>
|
||||
|
||||
<h2>Collapsible panels</h2>
|
||||
|
||||
<p>To create a collapsible block of content, create a container and add the <code>data-role="collapsible"</code> attribute.</p>
|
||||
|
||||
<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
|
||||
|
||||
<p>After the heading, add any HTML markup you want to be collapsible. The framework will wrap all this markup in a container that will be hidden or shown when the heading is clicked.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="collapsible">
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content.</p>
|
||||
</div>
|
||||
</pre></code>
|
||||
|
||||
|
||||
<p>By default, the content will be expaneded. To collapse the content when the page loads, add the <code>data-state="collapsed"</code> attribute to the wrapper.</p>
|
||||
|
||||
<code>
|
||||
<div data-role="collapsible" <strong>data-state="collapsed"></strong>
|
||||
</code>
|
||||
|
||||
<p>This will create this widget:</p>
|
||||
|
||||
|
||||
<div data-role="collapsible" data-state="collapsed">
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content.</p>
|
||||
</div>
|
||||
|
||||
<p>The collapsible content is minimally styled -- we just add a bit of margin between the bar and content but you can add custom styles to tweak the appearance of the collapsible container or heading button.</p>
|
||||
|
||||
|
||||
<h2>Multi-column grids</h2>
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
38
docs/content/index.html
Executable file
38
docs/content/index.html
Executable file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Content formatting</title>
|
||||
<link rel="stylesheet" href="../../css/all" />
|
||||
<script type="text/javascript" src="../../js/all"></script>
|
||||
<script type="text/javascript" src="../docs/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" data-theme="b">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Content formatting elements</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<p>The contents of the page can be anything you want and we designed the styes to respect standard HTML formatting.</p>
|
||||
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li data-role="list-divider">Documentation</li>
|
||||
<li><a href="docs-content.html">Content basics</a></li>
|
||||
<li><a href="api-content.html">API documentation</a></li>
|
||||
<li><a href="content-themes.html">Theming content</a></li>
|
||||
</ul>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li data-role="list-divider">Content formatting examples</li>
|
||||
<li><a href="content-html.html">Basic HTML styles</a></li>
|
||||
|
||||
<li><a href="content-all.html">Basic content formatting</a></li>
|
||||
</ul>
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -16,8 +16,20 @@
|
|||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>Button basics</h2>
|
||||
<p>To do...</p>
|
||||
<p>jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.</p>
|
||||
|
||||
<h2>Form setup</h2>
|
||||
<p>A form alwaysbegins with a standard <code>form</code> tag</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.</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><!-- /content -->
|
||||
|
|
|
|||
|
|
@ -18,25 +18,14 @@
|
|||
|
||||
<form action="#" method="get">
|
||||
|
||||
<div data-role="collapsible" data-state="collapsed" data-theme="b" data-icontheme="a">
|
||||
<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.</p>
|
||||
<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 browsers that don't support the custom controls, they will still have a usable experience because these are all based on native form elements.</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">
|
||||
<fieldset data-role="collapsible" data-state="collapsed">
|
||||
<legend>Text input controls</legend>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="name">Text Input:</label>
|
||||
|
|
@ -46,6 +35,10 @@
|
|||
<label for="password">Password Input:</label>
|
||||
<input type="password" name="password" id="password" value="" data-theme="b" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="search">Search Input:</label>
|
||||
<input type="search" name="password" id="search" value="" data-theme="b" />
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
|
|
@ -57,11 +50,6 @@
|
|||
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider1">Input slider:</label>
|
||||
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="b" />
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider2">Select slider:</label>
|
||||
<select name="slider2" id="slider2" data-role="slider">
|
||||
|
|
@ -70,18 +58,11 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider3">Themed select slider:</label>
|
||||
<select name="slider3" id="slider3" data-role="slider" data-theme="a">
|
||||
<option value="off">Off</option>
|
||||
<option value="on" selected="selected">On</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
||||
|
||||
<div id="radio-examples" data-role="collapsible">
|
||||
<div id="radio-examples" data-role="collapsible" data-state="collapsed">
|
||||
|
||||
<h2>Radio toggles</h2>
|
||||
|
||||
|
|
@ -101,22 +82,20 @@
|
|||
<label for="radio-choice-4">Choice 4</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
||||
|
||||
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
||||
<legend>Same with theme change:</legend>
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
|
||||
<label for="radio-choice-c">On</label>
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" data-theme="b" />
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
|
||||
<label for="radio-choice-d">Off</label>
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" data-theme="b" />
|
||||
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
|
||||
<label for="radio-choice-e">Other</label>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="checkbox-examples" data-role="collapsible">
|
||||
<div id="checkbox-examples" data-role="collapsible" data-state="collapsed">
|
||||
|
||||
<h2>Checkboxes</h2>
|
||||
|
||||
|
|
@ -154,10 +133,10 @@
|
|||
|
||||
|
||||
|
||||
<fieldset data-role="collapsible">
|
||||
<fieldset data-role="collapsible" data-state="collapsed">
|
||||
<legend>Select menus</legend>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="select-choice-1" class="select">Choose one:</label>
|
||||
<label for="select-choice-1" class="select">Few options:</label>
|
||||
<select name="select-choice-1" id="select-choice-1">
|
||||
<option value="Choice 1">Choice 1</option>
|
||||
<option value="Choice 2">Choice 2</option>
|
||||
|
|
@ -166,8 +145,8 @@
|
|||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="select-choice-3" class="select">Choose one:</label>
|
||||
<select name="select-choice-3" id="select-choice-3" data-theme="b">
|
||||
<label for="select-choice-3" class="select">Many options:</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>
|
||||
|
|
@ -193,8 +172,8 @@
|
|||
|
||||
|
||||
<fieldset class="ui-grid-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>
|
||||
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
|
||||
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview" data-theme="e">
|
||||
<ul data-role="listview">
|
||||
<li>Ajax
|
||||
<ul>
|
||||
<li><h3><a href="docs/jQuery.ajax/index.html">jQuery.ajax()</a></h3><p>Perform an asynchronous HTTP (Ajax) request.</p></li>
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@
|
|||
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
|
||||
<li data-role="list-divider">Demos</li>
|
||||
<li id="themeswitcher"><a href="#">Theme Switcher</a></li>
|
||||
<li><a href="experiments/api-browser/index.html">jQuery API browser</a></li>
|
||||
<li><a href="experiments/photos">Photo viewer</a></li>
|
||||
<li><a href="experiments/converter">Converter</a></li>
|
||||
<li><a href="experiments/api-viewer/index.html">jQuery API browser</a></li>
|
||||
<li><a href="experiments/photos/_photo1.html">Photo viewer</a></li>
|
||||
<li><a href="experiments/converter/index.html">Converter</a></li>
|
||||
</ul>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
|
||||
|
|
|
|||
Loading…
Reference in a new issue