@@ -24,7 +24,7 @@

<div role="main" class="ui-content jqm-content">

<h1>Range slider <a href="http://api.jquerymobile.com/rangeslider/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-carat-r"></span></a></h1>
<h1>Range slider <a href="http://api.jquerymobile.com/rangeslider/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r"></span></a></h1>

<p>Range slider offer two handles to set a min and max value along a numeric continuum.
</p>
@@ -24,7 +24,7 @@

<div role="main" class="ui-content jqm-content">

<h1>Select menu <a href="http://api.jquerymobile.com/selectmenu/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-carat-r"></span></a></h1>
<h1>Select menu <a href="http://api.jquerymobile.com/selectmenu/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r"></span></a></h1>

<p>The select menu is based on a native select element, which is hidden from view and replaced with a custom-styled select button. Tapping it opens the native menu. There is also a <a href="../selectmenu-custom/">custom select menu</a> widget, which also replaces the native dropdown.
</p>
@@ -41,7 +41,7 @@

<div role="main" class="ui-content jqm-content">

<h1>Slider <a href="http://api.jquerymobile.com/slider/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-carat-r"></span></a></h1>
<h1>Slider <a href="http://api.jquerymobile.com/slider/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r"></span></a></h1>

<p>Sliders are used to enter numeric values along a continuum and can also be dual handle <a href="../rangeslider/">range sliders</a> or <a href="../slider-flipswitch/">flip switches</a>.
</p>
@@ -39,7 +39,7 @@ <h1>Buenos Aires</h1>
<a href="#" class="next ui-button ui-button-icon-only">Next<span class="ui-icon ui-icon-carat-r"></span></a>
</div>

<a href="#trivia-buenosaires" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-icon-beginning ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
<a href="#trivia-buenosaires" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
</div><!-- /footer -->

</body>
@@ -39,7 +39,7 @@ <h1>Cape Town</h1>
<a href="#" class="next ui-button ui-button-icon-only">Next<span class="ui-icon ui-icon-carat-r"></span></a>
</div>

<a href="#trivia-capetown" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-icon-beginning ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
<a href="#trivia-capetown" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
</div><!-- /footer -->

</body>
@@ -83,7 +83,7 @@
<a href="#" class="next ui-button ui-button-icon-only">Next<span class="ui-icon ui-icon-carat-r"></span></a>
</div>

<a href="#" data-rel="popup" class="trivia-button ui-button ui-button-right ui-icon-beginning ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
<a href="#" data-rel="popup" class="trivia-button ui-button ui-button-right ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
</div><!-- /footer -->

</body>
@@ -39,7 +39,7 @@ <h1>New York</h1>
<a href="#" class="next ui-button ui-button-icon-only">Next<span class="ui-icon ui-icon-carat-r"></span></a>
</div>

<a href="#trivia-newyork" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-icon-beginning ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
<a href="#trivia-newyork" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
</div><!-- /footer -->

</body>
@@ -39,7 +39,7 @@ <h1>Paris</h1>
<a href="#" class="next ui-button ui-button-icon-only">Next<span class="ui-icon ui-icon-carat-r"></span></a>
</div>

<a href="#trivia-paris" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-icon-beginning ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
<a href="#trivia-paris" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
</div><!-- /footer -->

</body>
@@ -39,7 +39,7 @@ <h1>Seoul</h1>
<a href="#" class="next ui-button ui-button-icon-only">Next<span class="ui-icon ui-icon-carat-r"></span></a>
</div>

<a href="#trivia-seoul" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-icon-beginning ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
<a href="#trivia-seoul" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
</div><!-- /footer -->

</body>
@@ -39,7 +39,7 @@ <h1>Sydney</h1>
<a href="#" class="next ui-button ui-button-icon-only">Next<span class="ui-icon ui-icon-carat-r"></span></a>
</div>

<a href="#trivia-sydney" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-icon-beginning ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
<a href="#trivia-sydney" id="trivia-button" data-rel="popup" class="trivia-button ui-button ui-button-right ui-mini ui-corner-all">Trivia<span class="ui-icon ui-icon-info"></span></a>
</div><!-- /footer -->

</body>
@@ -24,7 +24,7 @@

<div role="main" class="ui-content jqm-content">

<h1>Table: Column Toggle <a href="http://api.jquerymobile.com/table-columntoggle/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-carat-r"></span></a></h1>
<h1>Table: Column Toggle <a href="http://api.jquerymobile.com/table-columntoggle/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r"></span></a></h1>

<p>The column toggle table mode selectively hides columns at narrower widths as a sensible default but also offers a menu to let users manually control which columns they want to see.</p>

@@ -24,7 +24,7 @@

<div class="ui-content jqm-content" role="main">

<h1>Table: Reflow <a href="http://api.jquerymobile.com/table-reflow/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-carat-r"></span></a></h1>
<h1>Table: Reflow <a href="http://api.jquerymobile.com/table-reflow/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r"></span></a></h1>

<p>The reflow table mode works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row.
</p>
@@ -36,7 +36,7 @@

<div role="main" class="ui-content jqm-content">

<h1>Tabs <a href="http://api.jquerymobile.com/tabs/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-carat-r"></span></a></h1>
<h1>Tabs <a href="http://api.jquerymobile.com/tabs/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r"></span></a></h1>

<p>The jQuery mobile tabs widget is actually just an extension of the jQuery ui tabs widget and takes all the same options and methods.</p>
<h2>Use navbar for tabs</h2>
@@ -24,7 +24,7 @@

<div role="main" class="ui-content jqm-content">

<h1>Text inputs <a href="http://api.jquerymobile.com/textinput/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-carat-r"></span></a></h1>
<h1>Text inputs <a href="http://api.jquerymobile.com/textinput/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r"></span></a></h1>

<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>
@@ -84,7 +84,7 @@
<div data-role="header">
<h1>Classic theme</h1>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-icon-only">Back<span class="ui-icon ui-icon-back"></span></a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-beginning">Button<span class="ui-icon ui-icon-gear"></span></a>
<a href="#" class="ui-button ui-corner-all ui-shadow">Button<span class="ui-icon ui-icon-gear"></span></a>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-button-active ui-state-persist">Menu item 1</a></li>
@@ -176,8 +176,8 @@
<p>I am a div with classes ui-bar, ui-bar-<span class="theme">a</span> and ui-corner-all. <a href="#">I am a link</a></p>
</div>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-end">We<span class="ui-icon ui-icon-carat-r"></span></a>
<button class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-end">are<span class="ui-icon ui-icon-carat-r"></span></button>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-button-inline">We<span class="ui-icon ui-icon-carat-r"></span></a>
<button class="ui-button ui-corner-all ui-shadow ui-button-inline">are<span class="ui-icon ui-icon-carat-r"></span></button>
<input type="button" value="buttons" data-inline="true" data-icon="carat-r" data-iconpos="right">
<ul data-role="listview" data-inset="true" data-counttheme="c">
@@ -260,9 +260,9 @@
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Controlgroup:</legend>
<button class="ui-button ui-corner-all ui-shadow ui-icon-end">One<span class="ui-icon ui-icon-home"></span></button>
<button class="ui-button ui-corner-all ui-shadow">One<span class="ui-icon ui-icon-home"></span></button>
<input type="button" data-icon="back" data-iconpos="right" value="Two">
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-end">Three<span class="ui-icon ui-icon-grid"></span></a>
<a href="#" class="ui-button ui-corner-all ui-shadow">Three<span class="ui-icon ui-icon-grid"></span></a>
</fieldset>
</div>
<div class="ui-field-contain">
@@ -280,7 +280,7 @@
</div>
</form>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-beginning ui-button-active">Active button<span class="ui-icon ui-icon-gear"></span></a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-button-active">Active button<span class="ui-icon ui-icon-gear"></span></a>
<p>Form inside static list:</p>
@@ -52,9 +52,9 @@
<div data-role="page" id="testpage">
<div data-role="header">
<h1>Default theme <a href="http://api.jquerymobile.com/theme/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-carat-r"></span></a></h1>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-icon-beginning ui-button-icon-only">Back<span class="ui-icon ui-icon-back"></span></a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-beginning">Button<span class="ui-icon ui-icon-gear"></span></a>
<h1>Default theme <a href="http://api.jquerymobile.com/theme/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r"></span></a></h1>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-icon-only">Back<span class="ui-icon ui-icon-back"></span></a>
<a href="#" class="ui-button ui-corner-all ui-shadow">Button<span class="ui-icon ui-icon-gear"></span></a>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-button-active ui-state-persist">Menu item 1</a></li>
@@ -109,8 +109,8 @@
<p>I am a div with classes ui-bar, ui-bar-<span class="theme">a</span> and ui-corner-all. <a href="#">I am a link</a></p>
</div>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-end">We<span class="ui-icon ui-icon-carat-r"></span></a>
<button class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-end">are<span class="ui-icon ui-icon-carat-r"></span></button>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-button-inline">We<span class="ui-icon ui-icon-carat-r"></span></a>
<button class="ui-button ui-corner-all ui-shadow ui-button-inline">are<span class="ui-icon ui-icon-carat-r"></span></button>
<input type="button" value="buttons" data-inline="true" data-icon="carat-r" data-iconpos="right">
<ul data-role="listview" data-inset="true">
@@ -193,9 +193,9 @@
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Controlgroup:</legend>
<button class="ui-button ui-corner-all ui-shadow ui-icon-end">One<span class="ui-icon ui-icon-home"></span></button>
<button class="ui-button ui-corner-all ui-shadow">One<span class="ui-icon ui-icon-home"></span></button>
<input type="button" data-icon="back" data-iconpos="right" value="Two">
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-end">Three<span class="ui-icon ui-icon-grid"></span></a>
<a href="#" class="ui-button ui-corner-all ui-shadow">Three<span class="ui-icon ui-icon-grid"></span></a>
</fieldset>
</div>
<div class="ui-field-contain">
@@ -213,7 +213,7 @@
</div>
</form>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-beginning ui-button-active">Active button<span class="ui-icon ui-icon-gear"></span></a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-button-active">Active button<span class="ui-icon ui-icon-gear"></span></a>
<p>Form inside static list:</p>
@@ -111,7 +111,7 @@
<div data-role="popup" id="purchase" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
<h3>Purchase Album?</h3>
<p>Your download will begin immediately on your mobile device when you purchase.</p>
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow ui-icon-beginning" data-rel="back">Buy: $10.99<span class="ui-icon ui-icon-check"></span></a>
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Buy: $10.99<span class="ui-icon ui-icon-check"></span></a>
<a href="#" class="ui-button ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a>
</div>
@@ -103,7 +103,7 @@
<div data-role="popup" id="purchase" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
<h3>Purchase Album?</h3>
<p>Your download will begin immediately on your mobile device when you purchase.</p>
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow ui-icon-beginning" data-rel="back">Buy: $10.99<span class="ui-icon ui-icon-check"></span></a>
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Buy: $10.99<span class="ui-icon ui-icon-check"></span></a>
<a href="#" class="ui-button ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a>
</div>

@@ -118,7 +118,7 @@
<div data-role="popup" id="purchase" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
<h3>Purchase Album?</h3>
<p>Your download will begin immediately on your mobile device when you purchase.</p>
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow ui-icon-beginning" data-rel="back">Buy: $10.99<span class="ui-icon ui-icon-check"></span></a>
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Buy: $10.99<span class="ui-icon ui-icon-check"></span></a>
<a href="#" class="ui-button ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a>
</div>
@@ -39,7 +39,7 @@

<div role="main" class="ui-content jqm-content">

<h1>Toolbar <a href="http://api.jquerymobile.com/toolbar/" class="jqm-api-docs-link ui-button ui-icon-end ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API<span class="ui-icon ui-icon-carat-r"></span></a></h1>
<h1>Toolbar <a href="http://api.jquerymobile.com/toolbar/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r"></span></a></h1>

<p>The toolbar widget is used to enhance headers and footers.</p>

@@ -109,16 +109,16 @@

<div data-demo-html="true">
<div data-role="header">
<a href="#" class="ui-button-left ui-button ui-button-inline ui-mini ui-corner-all ui-icon-beginning">Cancel<span class="ui-icon ui-icon-delete"></span></a>
<a href="#" class="ui-button-left ui-button ui-button-inline ui-mini ui-corner-all">Cancel<span class="ui-icon ui-icon-delete"></span></a>
<h1>My App</h1>
<button class="ui-button-right ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-icon-end">Save<span class="ui-icon ui-icon-check"></span></button>
<button class="ui-button-right ui-button ui-button-b ui-button-inline ui-mini ui-corner-all">Save<span class="ui-icon ui-icon-check"></span></button>
</div>
</div><!-- /demo-html -->

<div data-demo-html="true">
<div data-role="header">
<h1>Page Title</h1>
<a href="#" class="ui-button-right ui-button ui-button-inline ui-mini ui-corner-all ui-icon-end">Options<span class="ui-icon ui-icon-gear"></span></a>
<a href="#" class="ui-button-right ui-button ui-button-inline ui-mini ui-corner-all">Options<span class="ui-icon ui-icon-gear"></span></a>
</div>
</div><!-- /demo-html -->

@@ -128,7 +128,7 @@

<div data-demo-html="true">
<div data-role="header">
<a href="#" class="ui-button-left ui-button ui-button-inline ui-mini ui-corner-all ui-icon-beginning">View<span class="ui-icon ui-icon-grid"></span></a>
<a href="#" class="ui-button-left ui-button ui-button-inline ui-mini ui-corner-all">View<span class="ui-icon ui-icon-grid"></span></a>
<span class="ui-title"></span>
</div>
</div><!-- /demo-html -->
@@ -140,8 +140,8 @@
<div data-demo-html="true" data-demo-css="#footer-abs-buttons">
<div data-role="footer">
<h2>Footer</h2>
<a href="#" class="ui-button ui-corner-all ui-button-inline ui-mini footer-button-left ui-icon-beginning">Quit<span class="ui-icon ui-icon-power"></span></a>
<a href="#" class="ui-button ui-corner-all ui-button-inline ui-mini footer-button-right ui-icon-end">Next<span class="ui-icon ui-icon-carat-r"></span></a>
<a href="#" class="ui-button ui-corner-all ui-button-inline ui-mini footer-button-left">Quit<span class="ui-icon ui-icon-power"></span></a>
<a href="#" class="ui-button ui-corner-all ui-button-inline ui-mini footer-button-right">Next<span class="ui-icon ui-icon-carat-r"></span></a>
</div>
</div>

@@ -174,9 +174,9 @@
<div data-demo-html="true">
<div data-role="header">
<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-button-left">
<a href="#" class="ui-button ui-icon-end">Add<span class="ui-icon ui-icon-plus"></span></a>
<a href="#" class="ui-button ui-icon-end">Up<span class="ui-icon ui-icon-arrow-u"></span></a>
<a href="#" class="ui-button ui-icon-end">Down<span class="ui-icon ui-icon-arrow-d"></span></a>
<a href="#" class="ui-button">Add<span class="ui-icon ui-icon-plus"></span></a>
<a href="#" class="ui-button">Up<span class="ui-icon ui-icon-arrow-u"></span></a>
<a href="#" class="ui-button">Down<span class="ui-icon ui-icon-arrow-d"></span></a>
</div>
<h6>My header</h6>
</div>