22 demos/panel/index.php
View file
@@ -21,7 +21,7 @@
<h3>Default panel options</h3>
<p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-icon-delete ui-button-icon-left ui-button-inline">Close panel</a>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-icon-delete ui-icon-beginning ui-button-inline">Close panel</a>

</div><!-- /default panel -->

@@ -30,13 +30,13 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

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

<h1>Panel <a href="http://api.jquerymobile.com/panel/" class="jqm-api-docs-link ui-button ui-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<h1>Panel <a href="http://api.jquerymobile.com/panel/" 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">Icon carat right</span></a></h1>

<p>Flexible by design, panels can be used for navigation, forms, inspectors and more.</p>

@@ -96,7 +96,7 @@

<p>To control a panel from a link, set the <code>href</code> to the <code>ID</code> of the panel you want to toggle (<code>mypanel</code> in the example above). This instructs the framework to bind the link to the panel. This link will toggle the visibility of the panel so tapping it will open the panel, and tapping it again will close it.</p>

<a href="#defaultpanel" class="ui-button ui-shadow ui-corner-all ui-button-inline ui-button-icon-left ui-icon-bars">Default panel</a>
<a href="#defaultpanel" class="ui-button ui-shadow ui-corner-all ui-button-inline ui-icon-beginning ui-icon-bars">Default panel</a>

<h2>Closing a panel</h2>

@@ -204,7 +204,7 @@
<h3>Left Panel: Reveal</h3>
<p>This panel is positioned on the left with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-button-icon-left ui-button-inline">Close panel</a>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-icon-beginning ui-button-inline">Close panel</a>

</div><!-- /leftpanel1 -->

@@ -214,7 +214,7 @@
<h3>Left Panel: Push</h3>
<p>This panel is positioned on the left with the push display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-button-icon-left ui-button-inline">Close panel</a>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-icon-beginning ui-button-inline">Close panel</a>

</div><!-- /leftpanel2 -->

@@ -226,7 +226,7 @@
<h3>Right Panel: Reveal</h3>
<p>This panel is positioned on the right with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-button-icon-left ui-button-inline">Close panel</a>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-icon-beginning ui-button-inline">Close panel</a>

</div><!-- /rightpanel1 -->

@@ -236,7 +236,7 @@
<h3>Right Panel: Push</h3>
<p>This panel is positioned on the right with the push display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-button-icon-left ui-button-inline">Close panel</a>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-icon-beginning ui-button-inline">Close panel</a>

</div><!-- /rightpanel2 -->

@@ -246,15 +246,15 @@
<h3>Right Panel: Overlay</h3>
<p>This panel is positioned on the right with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-button-icon-left ui-button-inline">Close panel</a>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-icon-beginning ui-button-inline">Close panel</a>

</div><!-- /rightpanel3 -->
<div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-theme="a">

<h3>Left Panel: Overlay</h3>
<p>This panel is positioned on the left with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-button-icon-left ui-button-inline">Close panel</a>
<a href="#demo-links" data-rel="close" class="ui-button ui-shadow ui-corner-all ui-button-a ui-icon-delete ui-icon-beginning ui-button-inline">Close panel</a>

</div><!-- /leftpanel3 -->

4 demos/popup-alignment/index.php
View file
@@ -47,8 +47,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
4 demos/popup-arrow-size/index.php
View file
@@ -161,8 +161,8 @@ function updateArrowSize() {
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
10 demos/popup-dynamic/index.php
View file
@@ -19,7 +19,7 @@
brand = target.find( "h2" ).html(),
model = target.find( "p" ).html(),
short = target.attr( "id" ),
closebutton = '<a href="#" data-rel="back" class="ui-button ui-corner-all ui-button-a ui-icon-delete ui-button-icon-notext ui-button-right">Close</a>',
closebutton = '<a href="#" data-rel="back" class="ui-button ui-corner-all ui-button-a ui-icon-delete ui-button-icon-only ui-button-right">Close</a>',
header = '<div data-role="header"><h2>' + brand + ' ' + model + '</h2></div>',
img = '<img src="../_assets/img/' + short + '.jpg" alt="' + brand + '" class="photo">',
popup = '<div data-role="popup" id="popup-' + short + '" data-short="' + short +'" data-theme="none" data-overlay-theme="a" data-corners="false" data-tolerance="15"></div>';
@@ -85,8 +85,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
@@ -96,7 +96,7 @@
<div data-demo-html="#demo-page" data-demo-js="true">
<p>This demo shows how you can dynamically create a popup. The popup contains images which means we have to set the image width and height to make sure the popup gets the right size and position. At client side we can only get the size when the image has been loaded in the DOM. In this demo we use the <code>load</code> event, but with a fallback because it has some caveats (see <a href="http://api.jquery.com/load-event/" rel="external">.load() - jQuery API</a>).</p>

<p><a href="#demo-page" data-transition="fade" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-mini ui-icon-arrow-r ui-button-icon-right">Open dynamic popup demo</a></p>
<p><a href="#demo-page" data-transition="fade" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-mini ui-icon-arrow-r ui-icon-end">Open dynamic popup demo</a></p>
</div><!--/demo-html -->

</div><!-- /content -->
@@ -115,7 +115,7 @@
<div data-role="page" id="demo-page" data-title="Cars">

<div data-role="header" data-theme="b">
<a href="#demo-intro" data-rel="back" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<a href="#demo-intro" data-rel="back" data-icon="arrow-l" data-iconpos="icon-only" data-shadow="false" data-icon-shadow="false">Back</a>
<h1>Cars</h1>
</div><!-- /header -->

6 demos/popup-iframe/index.php
View file
@@ -25,8 +25,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
@@ -65,7 +65,7 @@
<a href="#popupMap" data-rel="popup" data-position-to="window" class="ui-button ui-corner-all ui-shadow ui-button-inline">Open Map</a>

<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
<a href="#" data-rel="back" class="ui-button ui-button-b ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-notext ui-button-right">Close</a>
<a href="#" data-rel="back" class="ui-button ui-button-b ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-only ui-button-right">Close</a>
<iframe src="map.html" width="480" height="320" seamless=""></iframe>
</div>
</div>
8 demos/popup-image-scaling/index.php
View file
@@ -19,8 +19,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
@@ -36,11 +36,11 @@
<a href="#popupPhotoPortrait" data-rel="popup" data-position-to="window" class="ui-button ui-corner-all ui-shadow ui-button-inline" data-transition="fade">Photo portrait</a>

<div data-role="popup" id="popupPhotoLandscape" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-notext ui-button-right">Close</a><img src="../_assets/img/photo-landscape.jpg" alt="Photo landscape">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-only ui-button-right">Close</a><img src="../_assets/img/photo-landscape.jpg" alt="Photo landscape">
</div>

<div data-role="popup" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-notext ui-button-right">Close</a><img src="../_assets/img/photo-portrait.jpg" alt="Photo portrait">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-only ui-button-right">Close</a><img src="../_assets/img/photo-portrait.jpg" alt="Photo portrait">
</div>
</div><!--/demo-html -->

4 demos/popup-outside-multipage/index.php
View file
@@ -35,8 +35,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
34 demos/popup/index.php
View file
@@ -43,13 +43,13 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

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

<h1>Popup <a href="http://api.jquerymobile.com/popup/" class="jqm-api-docs-link ui-button ui-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<h1>Popup <a href="http://api.jquerymobile.com/popup/" 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">Icon carat right</span></a></h1>

<p>The popup widget can be used for various types of popups. From a small tooltip popup to a large photo lightbox.</p>

@@ -68,7 +68,7 @@
<h2>Tooltip</h2>
<p>A tooltip can be created by adding a theme swatch to a basic popup and adding padding via the <code>ui-content</code> class. Here we also show how you can custom style the tooltip button.</p>
<div data-demo-html="true" data-demo-css="#tooltip-button">
<p>A paragraph with a tooltip. <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-button ui-button ui-alt-icon ui-nodisc-icon ui-button-inline ui-icon-info ui-button-icon-notext" title="Learn more">Learn more</a></p>
<p>A paragraph with a tooltip. <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-button ui-button ui-alt-icon ui-nodisc-icon ui-button-inline ui-icon-info ui-button-icon-only" title="Learn more">Learn more</a></p>

<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
@@ -84,20 +84,20 @@
<a href="#popupNYC" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="../_assets/img/newyork.jpg" alt="New York, USA" style="width:30%"></a>

<div data-role="popup" id="popupParis" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-notext ui-button-right">Close</a><img class="popphoto" src="../_assets/img/paris.jpg" style="max-height:512px;" alt="Paris, France">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-only ui-button-right">Close</a><img class="popphoto" src="../_assets/img/paris.jpg" style="max-height:512px;" alt="Paris, France">
</div>
<div data-role="popup" id="popupSydney" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-notext ui-button-right">Close</a><img class="popphoto" src="../_assets/img/sydney.jpg" style="max-height:512px;" alt="Sydney, Australia">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-only ui-button-right">Close</a><img class="popphoto" src="../_assets/img/sydney.jpg" style="max-height:512px;" alt="Sydney, Australia">
</div>
<div data-role="popup" id="popupNYC" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-notext ui-button-right">Close</a><img class="popphoto" src="../_assets/img/newyork.jpg" style="max-height:512px;" alt="New York, USA">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-only ui-button-right">Close</a><img class="popphoto" src="../_assets/img/newyork.jpg" style="max-height:512px;" alt="New York, USA">
</div>
</div><!--/demo-html -->

<h2>Menu</h2>
<p>A menu can be created by adding a <a href="../listview/">listview</a> inside a popup.</p>
<div data-demo-html="true">
<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-gear ui-button-icon-left ui-button-a">Actions...</a>
<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-gear ui-icon-beginning ui-button-a">Actions...</a>

<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
@@ -113,7 +113,7 @@
<h2>Nested menu</h2>
<p>A nested menu can be created by placing <a href="../listview/">listview</a> into an <a href="../collapsible/">collapsible</a> inside a popup.</p>
<div data-demo-html="true">
<a href="#popupNested" data-rel="popup" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-bars ui-button-icon-left ui-button-b" data-transition="pop">Choose a creature...</a>
<a href="#popupNested" data-rel="popup" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-bars ui-icon-beginning ui-button-b" data-transition="pop">Choose a creature...</a>

<div data-role="popup" id="popupNested" data-theme="none">
<div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
@@ -160,7 +160,7 @@
<h2>Form</h2>
<p>You can place a form inside a popup. When it opens, focus will be restricted to elements inside the popup.</p>
<div data-demo-html="true">
<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-check ui-button-icon-left ui-button-a" data-transition="pop">Sign in</a>
<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-check ui-icon-beginning ui-button-a" data-transition="pop">Sign in</a>

<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<form>
@@ -172,7 +172,7 @@
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a">

<button type="submit" class="ui-button ui-corner-all ui-shadow ui-button-b ui-button-icon-left ui-icon-check">Sign in</button>
<button type="submit" class="ui-button ui-corner-all ui-shadow ui-button-b ui-icon-beginning ui-icon-check">Sign in</button>
</div>
</form>
</div>
@@ -181,7 +181,7 @@
<h2>Dialog</h2>
<p>Standard dialog markup can be placed into a popup. To create a modal style dialog, add the <code>data-dismissible="false"</code> attribute to the popup to prevent the click-outside-to-close behavior so people need to interact with popup buttons to close it.</p>
<div data-demo-html="true">
<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-delete ui-button-icon-left ui-button-b">Delete page...</a>
<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-delete ui-icon-beginning ui-button-b">Delete page...</a>

<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
@@ -216,17 +216,17 @@
<a href="#popupUndismissible" data-rel="popup" class="ui-button ui-corner-all ui-shadow ui-button-inline">Undismissible Popup</a>

<div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width:280px">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-notext ui-button-right">Close</a>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-only ui-button-right">Close</a>
<p>I have a close button at the top right corner with simple HTML markup.</p>
</div>

<div data-role="popup" id="popupCloseLeft" class="ui-content" style="max-width:280px">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-notext ui-button-left">Close</a>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-only ui-button-left">Close</a>
<p>I have a close button at the top left corner with simple HTML markup.</p>
</div>

<div data-role="popup" id="popupUndismissible" class="ui-content" style="max-width:280px" data-dismissible="false">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-notext ui-button-left">Close</a>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-only ui-button-left">Close</a>
<p>I have the <code>data-dismissible</code> attribute set to <code>false</code>. I'm not closeable by clicking outside of me.</p>
</div>
</div><!--/demo-html -->
@@ -284,7 +284,7 @@

<a href="#transparent" data-rel="popup" class="ui-button ui-corner-all ui-shadow ui-button-inline">Theme "none", no shadow</a>
<div id="transparent" data-role="popup" data-theme="none" data-shadow="false">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-notext ui-button-right">Close</a>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-icon-delete ui-button-icon-only ui-button-right">Close</a>
<img src="../_assets/img/firefox-logo.png" class="popphoto" alt="firefox logo on a transparent popup" height="300" width="300">
</div>

@@ -313,7 +313,7 @@
<h2>Pre-rendered markup</h2>
<p>You can supply pre-rendered popup markup to save startup time. The page in the example below contains a popup with pre-rendered markup supplied as part of the original page markup.</p>
<div data-demo-html="#pre-rendered-page">
<a href="#pre-rendered-page" class="ui-button ui-corner-all ui-shadow ui-icon-arrow-r ui-button-icon-right" data-mini="true" data-inline="true">Go to demo</a>
<a href="#pre-rendered-page" class="ui-button ui-corner-all ui-shadow ui-icon-arrow-r ui-icon-end" data-mini="true" data-inline="true">Go to demo</a>
</div>

</div><!-- /content -->
6 demos/rangeslider/index.php
View file
@@ -18,13 +18,13 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<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-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<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">Icon carat right</span></a></h1>

<p>Range slider offer two handles to set a min and max value along a numeric continuum.
</p>
4 demos/rwd/index.php
View file
@@ -18,8 +18,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
4 demos/selectmenu-custom-filter/index.php
View file
@@ -111,8 +111,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
4 demos/selectmenu-custom/index.php
View file
@@ -18,8 +18,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
6 demos/selectmenu/index.php
View file
@@ -18,13 +18,13 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<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-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<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">Icon carat right</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>
4 demos/slider-flipswitch/index.php
View file
@@ -18,8 +18,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
4 demos/slider-tooltip/index.php
View file
@@ -17,8 +17,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
6 demos/slider/index.php
View file
@@ -35,13 +35,13 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<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-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<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">Icon carat right</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>
8 demos/swipe-list/index.php
View file
@@ -136,8 +136,8 @@ function confirmAndDelete( listitem, transition ) {
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
@@ -167,8 +167,8 @@ function confirmAndDelete( listitem, transition ) {

<div data-role="header" data-position="fixed" data-theme="b">
<h1>Inbox</h1>
<a href="#demo-intro" data-rel="back" data-icon="carat-l" data-iconpos="notext">Back</a>
<a href="#" onclick="window.location.reload()" data-icon="back" data-iconpos="notext">Refresh</a>
<a href="#demo-intro" data-rel="back" data-icon="carat-l" data-iconpos="icon-only">Back</a>
<a href="#" onclick="window.location.reload()" data-icon="back" data-iconpos="icon-only">Refresh</a>
</div><!-- /header -->

<div role="main" class="ui-content">
10 demos/swipe-page/buenosaires.html
View file
@@ -17,15 +17,15 @@

<div id="header" data-role="header" data-id="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>Buenos Aires</h1>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="icon-only" data-shadow="false" data-icon-shadow="false">Back</a>
</div><!-- /header -->

<div data-role="page" id="buenosaires" class="demo-page" data-title="Buenos Aires" data-dom-cache="true" data-theme="b" data-prev="newyork" data-next="paris">

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

<div id="trivia-buenosaires" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-notext ui-icon-delete ui-corner-all">Close</a>
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-only ui-icon-delete ui-corner-all">Close</a>
<p>At 140 meters (16 lanes), Avenida 9 de Julio in Buenos Aires is the world’s widest avenue. Its name honors Argentina’s birthdate. (July 9, 1816). The avenue runs roughly one kilometer to the west of the Río de la Plata waterfront, from the Retiro district in the north to Constitución station in the south. <small>source:&nbsp;inautonews.com</small></p>
</div>

@@ -35,11 +35,11 @@ <h1>Buenos Aires</h1>

<div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-button-left" data-type="horizontal" data-mini="true">
<a href="#" class="prev ui-button ui-button-icon-notext ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-notext ui-icon-carat-r">Next</a>
<a href="#" class="prev ui-button ui-button-icon-only ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-only ui-icon-carat-r">Next</a>
</div>

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

</body>
10 demos/swipe-page/capetown.html
View file
@@ -17,15 +17,15 @@

<div id="header" data-role="header" data-id="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>Cape Town</h1>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="icon-only" data-shadow="false" data-icon-shadow="false">Back</a>
</div><!-- /header -->

<div data-role="page" id="capetown" class="demo-page" data-title="Cape Town" data-dom-cache="true" data-theme="b" data-prev="paris" data-next="seoul">

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

<div id="trivia-capetown" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-notext ui-icon-delete ui-corner-all">Close</a>
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-only ui-icon-delete ui-corner-all">Close</a>
<p> Although it’s the youngest official language in the world, Afrikaans is most widely spoken and is home language for 40% of the Cape's population. The remainder of the population speaks either Xhosa or English as a home language. <small>source:&nbsp;gotravel24.com</small></p>
</div>

@@ -35,11 +35,11 @@ <h1>Cape Town</h1>

<div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-button-left" data-type="horizontal" data-mini="true">
<a href="#" class="prev ui-button ui-button-icon-notext ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-notext ui-icon-carat-r">Next</a>
<a href="#" class="prev ui-button ui-button-icon-only ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-only ui-icon-carat-r">Next</a>
</div>

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

</body>
14 demos/swipe-page/index.php
View file
@@ -26,8 +26,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
@@ -61,15 +61,15 @@

<div id="_header" data-role="header" data-id="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>City</h1>
<a href="./" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<a href="./" data-direction="reverse" data-icon="delete" data-iconpos="icon-only" data-shadow="false" data-icon-shadow="false">Back</a>
</div><!-- /header -->

<div data-role="page" id="city" class="demo-page" data-dom-cache="true" data-theme="b" data-prev="prevCity" data-next="nextCity">

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

<div id="trivia-city" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-notext ui-icon-delete ui-corner-all">Close</a>
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-only ui-icon-delete ui-corner-all">Close</a>
<p>Here some text.</p>
</div><!-- /popup -->

@@ -79,11 +79,11 @@

<div id="_footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-button-left" data-type="horizontal" data-mini="true">
<a href="#" class="prev ui-button ui-button-icon-notext ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-notext ui-icon-carat-r">Next</a>
<a href="#" class="prev ui-button ui-button-icon-only ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-only ui-icon-carat-r">Next</a>
</div>

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

</body>
10 demos/swipe-page/newyork.html
View file
@@ -17,15 +17,15 @@

<div id="header" data-role="header" data-id="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>New York</h1>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="icon-only" data-shadow="false" data-icon-shadow="false">Back</a>
</div><!-- /header -->

<div data-role="page" id="newyork" class="demo-page" data-title="New York" data-dom-cache="true" data-theme="b" data-next="buenosaires">

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

<div id="trivia-newyork" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-notext ui-icon-delete ui-corner-all">Close</a>
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-only ui-icon-delete ui-corner-all">Close</a>
<p>Although many legends exist about the origin of New York City's nickname, the Big Apple, most historians agree that it can be traced back to a writer who covered horse racing in the 1920s. In The Morning Telegraph, he wrote that stable hands often referred to New York as the Big Apple, meaning that any thoroughbred that raced in New York had reached the pinnacle of racing. <small>source:&nbsp;nylady.hubpages.com</small></p>
</div>

@@ -35,11 +35,11 @@ <h1>New York</h1>

<div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-button-left" data-type="horizontal" data-mini="true">
<a href="#" class="prev ui-button ui-button-icon-notext ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-notext ui-icon-carat-r">Next</a>
<a href="#" class="prev ui-button ui-button-icon-only ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-only ui-icon-carat-r">Next</a>
</div>

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

</body>
10 demos/swipe-page/paris.html
View file
@@ -17,15 +17,15 @@

<div id="header" data-role="header" data-id="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>Paris</h1>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="icon-only" data-shadow="false" data-icon-shadow="false">Back</a>
</div><!-- /header -->

<div data-role="page" id="paris" class="demo-page" data-title="Paris" data-dom-cache="true" data-theme="b" data-prev="buenosaires" data-next="capetown">

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

<div id="trivia-paris" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-notext ui-icon-delete ui-corner-all">Close</a>
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-only ui-icon-delete ui-corner-all">Close</a>
<p>Each year, 44 million tourists visit Paris and the surrounding Ile de France region. Paris is year after year the most visited city in the world. <small>source:&nbsp;parisdigest.com</small></p>
</div>

@@ -35,11 +35,11 @@ <h1>Paris</h1>

<div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-button-left" data-type="horizontal" data-mini="true">
<a href="#" class="prev ui-button ui-button-icon-notext ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-notext ui-icon-carat-r">Next</a>
<a href="#" class="prev ui-button ui-button-icon-only ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-only ui-icon-carat-r">Next</a>
</div>

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

</body>
10 demos/swipe-page/seoul.html
View file
@@ -17,15 +17,15 @@

<div id="header" data-role="header" data-id="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>Seoul</h1>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="icon-only" data-shadow="false" data-icon-shadow="false">Back</a>
</div><!-- /header -->

<div data-role="page" id="seoul" class="demo-page" data-title="Seoul" data-dom-cache="true" data-theme="b" data-prev="capetown" data-next="sydney">

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

<div id="trivia-seoul" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-notext ui-icon-delete ui-corner-all">Close</a>
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-only ui-icon-delete ui-corner-all">Close</a>
<p>Seoul, officially the Seoul Special City, is the capital and largest city of South Korea. With a population of over 10 million, it is one of the world's largest cities. The Seoul National Capital Area, which includes the Incheon metropolis and most of Gyeonggi province, has 24.5 million inhabitants. <small>source:&nbsp;bezbrige.com</small></p>
</div>

@@ -35,11 +35,11 @@ <h1>Seoul</h1>

<div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-button-left" data-type="horizontal" data-mini="true">
<a href="#" class="prev ui-button ui-button-icon-notext ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-notext ui-icon-carat-r">Next</a>
<a href="#" class="prev ui-button ui-button-icon-only ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-only ui-icon-carat-r">Next</a>
</div>

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

</body>
10 demos/swipe-page/sydney.html
View file
@@ -17,15 +17,15 @@

<div id="header" data-role="header" data-id="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>Sydney</h1>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="icon-only" data-shadow="false" data-icon-shadow="false">Back</a>
</div><!-- /header -->

<div data-role="page" id="sydney" class="demo-page" data-title="Sydney" data-dom-cache="true" data-theme="b" data-prev="seoul">

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

<div id="trivia-sydney" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-notext ui-icon-delete ui-corner-all">Close</a>
<a href="#" data-rel="back" class="ui-button ui-button-right ui-button-b ui-button-icon-only ui-icon-delete ui-corner-all">Close</a>
<p>The Sydney Opera House provides 45,000 square metres (11 acres) of usable office space out of 18,000 square metres (4.5 acres) of land. It is 183 metres (600 feet) tall and about 120 metres (388 feet) wide at its widest point. It is supported on 580 concrete piers sunk up to 25 metres below sea level. It has about 1000 rooms. It has five theatres, five rehearsal studios, two main halls, four restaurants, six bars and numerous souvenir shops. <small>source:&nbsp;sheppardsoftware.com</small></p>
</div>

@@ -35,11 +35,11 @@ <h1>Sydney</h1>

<div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-button-left" data-type="horizontal" data-mini="true">
<a href="#" class="prev ui-button ui-button-icon-notext ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-notext ui-icon-carat-r">Next</a>
<a href="#" class="prev ui-button ui-button-icon-only ui-icon-carat-l">Previous</a>
<a href="#" class="next ui-button ui-button-icon-only ui-icon-carat-r">Next</a>
</div>

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

</body>
4 demos/table-column-toggle-example/index.php
View file
@@ -83,8 +83,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
4 demos/table-column-toggle-heading-groups/index.php
View file
@@ -82,8 +82,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
4 demos/table-column-toggle-options/index.php
View file
@@ -18,8 +18,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
6 demos/table-column-toggle/index.php
View file
@@ -18,13 +18,13 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<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-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<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">Icon carat right</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>

4 demos/table-reflow-heading-groups/index.php
View file
@@ -79,8 +79,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
4 demos/table-reflow-stripes-strokes/index.php
View file
@@ -39,8 +39,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
4 demos/table-reflow-styling/index.php
View file
@@ -126,8 +126,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">
6 demos/table-reflow/index.php
View file
@@ -18,13 +18,13 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<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-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<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">Icon carat right</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>
6 demos/tabs/index.php
View file
@@ -30,13 +30,13 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<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-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<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">Icon carat right</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>
10 demos/textinput/index.php
View file
@@ -18,13 +18,13 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<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-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<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">Icon carat right</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>
@@ -316,13 +316,13 @@
<label for="text-enhanced">Text input:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
<input type="text" data-enhanced="true" data-clear-button="true" name="text-enhanced" id="text-enhanced" value="">
<a href="#" class="ui-input-clear ui-button ui-icon-delete ui-button-icon-notext ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a>
<a href="#" class="ui-input-clear ui-button ui-icon-delete ui-button-icon-only ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a>
</div>

<label for="search-enhanced">Search:</label>
<div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
<input type="text" data-type="search" data-enhanced="true" name="search-enhanced" id="search-enhanced" value="">
<a href="#" class="ui-input-clear ui-button ui-icon-delete ui-button-icon-notext ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a>
<a href="#" class="ui-input-clear ui-button ui-icon-delete ui-button-icon-only ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a>
</div>

<label for="textarea-enhanced">Textarea:</label>
14 demos/theme-classic/index.php
View file
@@ -83,8 +83,8 @@
<div data-role="header">
<h1>Classic theme</h1>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-icon-back ui-button-icon-notext">Back</a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-gear ui-button-icon-left">Button</a>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-icon-back ui-button-icon-only">Back</a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-gear ui-icon-beginning">Button</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-carat-r ui-button-icon-right">We</a>
<button class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-carat-r ui-button-icon-right">are</button>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-carat-r ui-icon-end">We</a>
<button class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-carat-r ui-icon-end">are</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-home ui-button-icon-right">One</button>
<button class="ui-button ui-corner-all ui-shadow ui-icon-home ui-icon-end">One</button>
<input type="button" data-icon="back" data-iconpos="right" value="Two">
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-grid ui-button-icon-right">Three</a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-grid ui-icon-end">Three</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-gear ui-button-icon-left ui-button-active">Active button</a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-gear ui-icon-beginning ui-button-active">Active button</a>
<p>Form inside static list:</p>
14 demos/theme-classic/theme-classic.css
View file
@@ -105,8 +105,8 @@ label.ui-button {
border-radius: .3125em /*{global-radii-buttons}*/;
}
/* Icon-only buttons */
.ui-button-icon-notext.ui-button-corner-all,
.ui-button-icon-notext.ui-corner-all {
.ui-button-icon-only.ui-button-corner-all,
.ui-button-icon-only.ui-corner-all {
-webkit-border-radius: 1em;
border-radius: 1em;
}
@@ -146,11 +146,11 @@ label.ui-button {
/* Icons
-----------------------------------------------------------------------------------------------------------*/

.ui-button-icon-left:after,
.ui-button-icon-right:after,
.ui-button-icon-top:after,
.ui-button-icon-bottom:after,
.ui-button-icon-notext:after,
.ui-icon-beginning:after,
.ui-icon-end:after,
.ui-icon-top:after,
.ui-icon-bottom:after,
.ui-button-icon-only:after,
html .ui-button.ui-checkbox-off:after,
html .ui-button.ui-radio-off:after {
background-color: #666 /*{global-icon-color}*/;
16 demos/theme-default/index.php
View file
@@ -59,9 +59,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-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-icon-back ui-button-icon-left ui-button-icon-notext">Back</a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-button-icon-left ui-icon-gear">Button</a>
<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">Icon carat right</span></a></h1>
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-icon-back ui-icon-beginning ui-button-icon-only">Back</a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-beginning ui-icon-gear">Button</a>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-button-active ui-state-persist">Menu item 1</a></li>
@@ -125,8 +125,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-carat-r ui-button-icon-right">We</a>
<button class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-carat-r ui-button-icon-right">are</button>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-carat-r ui-icon-end">We</a>
<button class="ui-button ui-corner-all ui-shadow ui-button-inline ui-icon-carat-r ui-icon-end">are</button>
<input type="button" value="buttons" data-inline="true" data-icon="carat-r" data-iconpos="right">
<ul data-role="listview" data-inset="true">
@@ -209,9 +209,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-home ui-button-icon-right">One</button>
<button class="ui-button ui-corner-all ui-shadow ui-icon-home ui-icon-end">One</button>
<input type="button" data-icon="back" data-iconpos="right" value="Two">
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-grid ui-button-icon-right">Three</a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-grid ui-icon-end">Three</a>
</fieldset>
</div>
<div class="ui-field-contain">
@@ -229,7 +229,7 @@
</div>
</form>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-gear ui-button-icon-left ui-button-active">Active button</a>
<a href="#" class="ui-button ui-corner-all ui-shadow ui-icon-gear ui-icon-beginning ui-button-active">Active button</a>
<p>Form inside static list:</p>
2 demos/toolbar-external/index.php
View file
@@ -19,7 +19,7 @@
</head>
<body>
<div data-role="header" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>External header</h1>
</div><!-- /header -->
2 demos/toolbar-external/index2.php
View file
@@ -19,7 +19,7 @@
</head>
<body>
<div data-role="header" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>External header</h1>
</div><!-- /header -->
2 demos/toolbar-fixed-external/index.php
View file
@@ -19,7 +19,7 @@
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>External fixed header</h1>
</div><!-- /header -->
4 demos/toolbar-fixed-forms/index.php
View file
@@ -34,7 +34,7 @@
<div data-role="page" class="jqm-demos">
<div data-role="header" data-position="fixed">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>2,146 Songs</h1>
<div class="ui-bar ui-bar-b">
<form action="#" method="get">
@@ -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-button-icon-left ui-icon-check" data-rel="back">Buy: $10.99</a>
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow ui-icon-beginning ui-icon-check" data-rel="back">Buy: $10.99</a>
<a href="#" class="ui-button ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a>
</div>
2 demos/toolbar-fixed-fullscreen/index.php
View file
@@ -17,7 +17,7 @@
<div data-role="page" class="jqm-demos">
<div data-role="header" data-position="fixed" data-fullscreen="true">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>Fullscreen fixed header</h1>
</div><!-- /header -->
2 demos/toolbar-fixed-persistent-optimized/index.php
View file
@@ -21,7 +21,7 @@
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>Fixed external header</h1>
</div><!-- /header -->
<?php } ?>
2 demos/toolbar-fixed-persistent-optimized/page-b.php
View file
@@ -21,7 +21,7 @@
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>Fixed external header</h1>
</div><!-- /header -->
<?php } ?>
4 demos/toolbar-fixed-persistent-optimized/page-c.php
View file
@@ -21,7 +21,7 @@
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>Fixed external header</h1>
</div><!-- /header -->
<?php } ?>
@@ -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-button-icon-left ui-icon-check" data-rel="back">Buy: $10.99</a>
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow ui-icon-beginning ui-icon-check" data-rel="back">Buy: $10.99</a>
<a href="#" class="ui-button ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a>
</div>

2 demos/toolbar-fixed-persistent-optimized/page-d.php
View file
@@ -21,7 +21,7 @@
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>Fixed external header</h1>
</div><!-- /header -->
<?php } ?>
2 demos/toolbar-fixed-persistent/index.php
View file
@@ -37,7 +37,7 @@
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>Info</h1>
</div><!-- /header -->
2 demos/toolbar-fixed-persistent/page-b.php
View file
@@ -37,7 +37,7 @@
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>Friends</h1>
</div><!-- /header -->
4 demos/toolbar-fixed-persistent/page-c.php
View file
@@ -37,7 +37,7 @@
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>Albums</h1>
</div><!-- /header -->
@@ -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-button-icon-left ui-icon-check" data-rel="back">Buy: $10.99</a>
<a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow ui-icon-beginning ui-icon-check" data-rel="back">Buy: $10.99</a>
<a href="#" class="ui-button ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a>
</div>
2 demos/toolbar-fixed-persistent/page-d.php
View file
@@ -37,7 +37,7 @@
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>Emails</h1>
</div><!-- /header -->
2 demos/toolbar-fixed/index.php
View file
@@ -16,7 +16,7 @@
<div data-role="page" class="jqm-demos" data-quicklinks="true">

<div data-role="header" data-position="fixed">
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-notext ui-icon-carat-l">Back</a>
<a href="../toolbar/" data-rel="back" class="ui-button ui-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only ui-icon-carat-l">Back</a>
<h1>Fixed header</h1>
</div><!-- /header -->

24 demos/toolbar/index.php
View file
@@ -33,13 +33,13 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<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-button-icon-right ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-carat-r">Icon carat right</span></a></h1>
<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">Icon carat right</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-button-icon-left ui-icon-delete">Cancel</a>
<a href="#" class="ui-button-left ui-button ui-button-inline ui-mini ui-corner-all ui-icon-beginning ui-icon-delete">Cancel</a>
<h1>My App</h1>
<button class="ui-button-right ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-button-icon-right ui-icon-check">Save</button>
<button class="ui-button-right ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-icon-end ui-icon-check">Save</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-button-icon-right ui-icon-gear">Options</a>
<a href="#" class="ui-button-right ui-button ui-button-inline ui-mini ui-corner-all ui-icon-end ui-icon-gear">Options</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-button-icon-left ui-icon-grid">View</a>
<a href="#" class="ui-button-left ui-button ui-button-inline ui-mini ui-corner-all ui-icon-beginning ui-icon-grid">View</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-button-icon-left ui-icon-power">Quit</a>
<a href="#" class="ui-button ui-corner-all ui-button-inline ui-mini footer-button-right ui-button-icon-right ui-icon-carat-r">Next</a>
<a href="#" class="ui-button ui-corner-all ui-button-inline ui-mini footer-button-left ui-icon-beginning ui-icon-power">Quit</a>
<a href="#" class="ui-button ui-corner-all ui-button-inline ui-mini footer-button-right ui-icon-end ui-icon-carat-r">Next</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-button-icon-right ui-icon-plus">Add</a>
<a href="#" class="ui-button ui-button-icon-right ui-icon-arrow-u">Up</a>
<a href="#" class="ui-button ui-button-icon-right ui-icon-arrow-d">Down</a>
<a href="#" class="ui-button ui-icon-end ui-icon-plus">Add</a>
<a href="#" class="ui-button ui-icon-end ui-icon-arrow-u">Up</a>
<a href="#" class="ui-button ui-icon-end ui-icon-arrow-d">Down</a>
</div>
<h6>My header</h6>
</div>
4 demos/transitions/index.php
View file
@@ -26,8 +26,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars">Menu icon</span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search">Search icon</span></a>
</div><!-- /header -->

<div role="main" class="jqm-content ui-content">
182 js/widgets/controlgroup.js
View file

This file was deleted.