Permalink
Browse files

Demos: Changed theme C, D, and E to A or B.

  • Loading branch information...
jaspermdegroot committed Jul 24, 2013
1 parent e9801b6 commit 38d8b72a25417002cdd42b78f8d5e783f576faea
Showing with 165 additions and 249 deletions.
  1. +13 −13 demos/widgets/accordions/index.php
  2. +1 −1 demos/widgets/autocomplete/autocomplete-remote.php
  3. +20 −23 demos/widgets/buttons/index.php
  4. +13 −13 demos/widgets/collapsibles/index.php
  5. +4 −4 demos/widgets/dialog/dialog-alt.html
  6. +4 −4 demos/widgets/dialog/dialog-overlay.html
  7. +2 −2 demos/widgets/dialog/dialog-success.html
  8. +3 −3 demos/widgets/dialog/dialog-with-select.html
  9. +3 −3 demos/widgets/dialog/dialog.html
  10. +4 −4 demos/widgets/fixed-toolbars/bars-fixed-forms.php
  11. +1 −1 demos/widgets/fixed-toolbars/footer-persist-b.php
  12. +2 −2 demos/widgets/fixed-toolbars/footer-persist-c.php
  13. +1 −1 demos/widgets/fixed-toolbars/footer-persist-d.php
  14. +4 −4 demos/widgets/forms/index.php
  15. +1 −1 demos/widgets/grids/grid-buttons.php
  16. +1 −1 demos/widgets/headers/footer-persist-b.php
  17. +2 −2 demos/widgets/headers/footer-persist-c.php
  18. +1 −1 demos/widgets/headers/footer-persist-d.php
  19. +1 −1 demos/widgets/headers/optimized-persistant-toolbars-b.php
  20. +2 −2 demos/widgets/headers/optimized-persistant-toolbars-c.php
  21. +1 −1 demos/widgets/headers/optimized-persistant-toolbars-d.php
  22. +20 −95 demos/widgets/icons/index.php
  23. +1 −1 demos/widgets/links/index.php
  24. +18 −18 demos/widgets/listviews/index.php
  25. +4 −7 demos/widgets/loader/index.php
  26. +1 −4 demos/widgets/navbar/index.php
  27. +3 −3 demos/widgets/pages/multipage-template.html
  28. +4 −4 demos/widgets/panels/index.php
  29. +1 −1 demos/widgets/panels/panel-fixed.php
  30. +20 −20 demos/widgets/popup/index.php
  31. +4 −4 demos/widgets/popup/popup-iframes.php
  32. +1 −1 demos/widgets/sliders/index.php
  33. +2 −2 demos/widgets/transitions/page-transitions-dialog.php
  34. +2 −2 demos/widgets/transitions/page-transitions-page.php
@@ -34,7 +34,7 @@
<p>Collapsible sets start with the same markup as <a href="../collapsibles/" data-ajax="false">individual collapsibles</a> which have a heading followed by the collapsible content. By adding a parent wrapper with a <code>data-role="collapsible-set"</code> attribute to the collapsibles they will be visually grouped and they will behave like an accordion so only one section can be open at a time.</p>
<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible-set" data-theme="a" data-content-theme="a">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
@@ -92,7 +92,7 @@
<p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the set. </p>
<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
<div data-role="collapsible-set" data-theme="a" data-content-theme="a" data-mini="true">
<div data-role="collapsible">
<h3>I'm a mini collapsible</h3>
<p>This is good for tight spaces.</p>
@@ -114,7 +114,7 @@
<p>The default icons of collapsible headings can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes, either at the <code>collapsible-set</code> level or on any of its collapsibles individually.</p>
<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<div data-role="collapsible-set" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<div data-role="collapsible">
<h3>Icon set on the set</h3>
<p>Specify the open and close icons on the set to apply it to all the collapsibles within.</p>
@@ -135,7 +135,7 @@
<p>The default icon positioning of collapsible headings can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on any of its collapsibles individually.</p>
<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-iconpos="right">
<div data-role="collapsible-set" data-theme="a" data-content-theme="a" data-iconpos="right">
<div data-role="collapsible">
<h3>Right</h3>
<p>Inherits icon positioning from <code>data-iconpos="right"</code> attribute on set.</p>
@@ -159,7 +159,7 @@
<p>Add the <code>data-corners="false"</code> attribute to get an inset collapsible set without rounded corners.</p>
<div data-demo-html="true">
<div data-role="collapsible-set" data-corners="false" data-theme="c" data-content-theme="d">
<div data-role="collapsible-set" data-corners="false" data-theme="a" data-content-theme="a">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>Collapsible content</p>
@@ -196,18 +196,18 @@
<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>
<div data-demo-html="true">
<div data-role="collapsible-set" data-content-theme="c">
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<div data-role="collapsible-set" data-content-theme="a">
<div data-role="collapsible" data-theme="b" data-content-theme="a">
<h3>Section header, swatch B</h3>
<p>Collapsible content, swatch "b"</p>
<p>Collapsible content, swatch "a"</p>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<div data-role="collapsible" data-theme="a" data-content-theme="b">
<h3>Section header, swatch A</h3>
<p>Collapsible content, swatch "a"</p>
<p>Collapsible content, swatch "b"</p>
</div>
<div data-role="collapsible" data-theme="e" data-content-theme="d">
<h3>Section header, swatch E</h3>
<p>Collapsible content, swatch "d"</p>
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h3>Section header, swatch B</h3>
<p>Collapsible content, swatch "b"</p>
</div>
</div>
</div><!--/demo-html -->
@@ -70,7 +70,7 @@
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
<h3>Cities worldwide</h3>
<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d"></ul>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="a"></ul>
</div><!--/demo-html -->
<a href="index.php" class="jqm-button" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">Back to autocomplete</a>
@@ -62,9 +62,6 @@
<p>
<a href="#" data-role="button" data-theme="a" data-inline="true">A</a>
<a href="#" data-role="button" data-theme="b" data-inline="true">B</a>
<a href="#" data-role="button" data-theme="c" data-inline="true">C</a>
<a href="#" data-role="button" data-theme="d" data-inline="true">D</a>
<a href="#" data-role="button" data-theme="e" data-inline="true">E</a>
</p>
</div><!--/demo-html -->
@@ -84,26 +81,26 @@
<p>An <a href="../icons/">icon</a> can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display.</p>
<div data-demo-html="true">
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Plus</a>
<a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Minus</a>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">Delete</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">Arrow left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">Arrow right</a>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">Arrow up</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">Arrow down</a>
<a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">Check</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">Gear</a>
<a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">Refresh</a>
<a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">Forward</a>
<a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">Back</a>
<a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">Grid</a>
<a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">Star</a>
<a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">Alert</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">Info</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">Home</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">Search</a>
<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true">Bars</a>
<a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="c" data-inline="true">Edit</a>
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true">Plus</a>
<a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-inline="true">Minus</a>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">Delete</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true">Arrow left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true">Arrow right</a>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-inline="true">Arrow up</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-inline="true">Arrow down</a>
<a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-inline="true">Check</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-inline="true">Gear</a>
<a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-inline="true">Refresh</a>
<a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-inline="true">Forward</a>
<a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-inline="true">Back</a>
<a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-inline="true">Grid</a>
<a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-inline="true">Star</a>
<a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-inline="true">Alert</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-inline="true">Info</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true">Home</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true">Search</a>
<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true">Bars</a>
<a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-inline="true">Edit</a>
</div><!--/demo-html -->
<h2 id="button-icon-position">Icon position</h2>
@@ -48,9 +48,9 @@
<p>Add the <code>data-content-theme</code> attribute to set a theme for the content of the collapsible. To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This applies the swatch's border and <em>flat</em> background color (not the gradient) to the content block, removes the rounded corners from the bottom of the header, and gives the bottom of the content block rounded corners to visually group these elements.</p>
<div data-demo-html="true">
<div data-role="collapsible" data-theme="b" data-content-theme="d">
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h4>Heading</h4>
<p>I'm the collapsible content with a themed content block set to "d".</p>
<p>I'm the collapsible content with a themed content block set to "a".</p>
</div>
</div><!--/demo-html -->
@@ -59,7 +59,7 @@
<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
<div data-demo-html="true">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
<div data-role="collapsible" data-collapsed="false" data-theme="a" data-content-theme="a">
<h4>Heading</h4>
<ul data-role="listview">
<li><a href="#">List item 1</a></li>
@@ -86,10 +86,10 @@
<h2>Icons</h2>
<p>The default icons of collapsible headings can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes. In the example below, <code>data-collapsed-icon="arrow-d"</code> and <code>data-expanded-icon="arrow-u"</code>.</p>
<p>The default icons of collapsible headings can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes. In the example below, <code>data-collapsed-icon="carat-d"</code> and <code>data-expanded-icon="carat-u"</code>.</p>
<div data-demo-html="true">
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
<h4>Heading</h4>
<ul data-role="listview" data-inset="false">
<li>Read-only list item 1</li>
@@ -102,7 +102,7 @@
<h2>Icon positioning</h2>
<p>The default icon positioning of collapsible headings can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
<div data-role="collapsible" data-iconpos="right" data-theme="b" data-content-theme="d">
<div data-role="collapsible" data-iconpos="right" data-theme="a" data-content-theme="a">
<h3>I'm a header</h3>
<p><code>data-iconpos="right"</code></p>
</div>
@@ -112,7 +112,7 @@
<p>For forms, use a <code>fieldset</code> and <code>legend</code> for the collapsible.</p>
<div data-demo-html="true">
<form>
<fieldset data-role="collapsible" data-theme="a" data-content-theme="d">
<fieldset data-role="collapsible" data-theme="a" data-content-theme="a">
<legend>Legend</legend>
<label for="textinput-f">Text Input:</label>
@@ -135,7 +135,7 @@
<p>By default collapsibles have an inset appearance. To make them full width without corner styling add the <code>data-inset="false"</code> attribute to the element.</p>
<div data-demo-html="true">
<div data-role="collapsible" data-inset="false" data-theme="c" data-content-theme="d">
<div data-role="collapsible" data-inset="false" data-content-theme="a">
<h4>Heading</h4>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
@@ -146,7 +146,7 @@
<p>This is an example of a series of individual collapsibles. The difference with a "Collapsible Set" is that multiple collapsible rows can be open at once.</p>
<div data-demo-html="true">
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
<div data-role="collapsible" data-theme="b" data-content-theme="a" data-inset="false">
<h3>Pets</h3>
<ul data-role="listview">
<li><a href="#">Canary</a></li>
@@ -157,7 +157,7 @@
<li><a href="#">Mouse</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
<div data-role="collapsible" data-theme="b" data-content-theme="a" data-inset="false">
<h3>Farm animals</h3>
<ul data-role="listview">
<li><a href="#">Chicken</a></li>
@@ -168,7 +168,7 @@
<li><a href="#">Sheep</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
<div data-role="collapsible" data-theme="b" data-content-theme="a" data-inset="false">
<h3>Wild Animals</h3>
<ul data-role="listview">
<li><a href="#">Aardvark</a></li>
@@ -186,7 +186,7 @@
<div data-demo-html="true" data-demo-css="#negateDoubleBorder">
<div id="demo-borders">
<div data-role="collapsible" data-theme="e" data-content-theme="d" data-inset="false">
<div data-role="collapsible" data-theme="b" data-content-theme="b" data-inset="false">
<h3>Pets</h3>
<ul data-role="listview">
<li><a href="#">Canary</a></li>
@@ -197,7 +197,7 @@
<li><a href="#">Mouse</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="e" data-content-theme="d" data-inset="false">
<div data-role="collapsible" data-theme="b" data-content-theme="b" data-inset="false">
<h3>Farm animals</h3>
<ul data-role="listview">
<li><a href="#">Chicken</a></li>
@@ -14,16 +14,16 @@
<body>
<div data-role="page">
<div data-role="header" data-theme="e">
<div data-role="header" data-theme="a">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="e">
<h1>I'm colorful</h1>
<div data-role="content" data-theme="b">
<h1>I'm themed</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
<a href="docs-dialogs.php" data-role="button" data-rel="back" data-theme="a">Good for you</a>
<a href="docs-dialogs.php" data-role="button" data-rel="back" data-theme="c">Don't care, really</a>
<a href="docs-dialogs.php" data-role="button" data-rel="back" data-theme="a">Don't care, really</a>
</div>
</div>
@@ -13,14 +13,14 @@
</head>
<body>
<div data-role="page" data-overlay-theme="e">
<div data-role="header" data-theme="b">
<div data-role="page" data-overlay-theme="b">
<div data-role="header" data-theme="a">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="d">
<div data-role="content" data-theme="a">
<h1>Custom overlay</h1>
<p>This dialog adds <code>data-overlay-theme="e"</code> to the page container to set the overlay swatch color.</p>
<p>This dialog adds <code>data-overlay-theme="b"</code> to the page container to set the overlay swatch color.</p>
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a" data-inline="true">I like it</a>
</div>
@@ -23,8 +23,8 @@
<div data-role="content" data-theme="b">
<h3>Photos posted successfully</h3>
<a href="./" data-role="button" data-theme="b">View photo page</a>
<a href="./" data-role="button" data-theme="c">Done</a>
<a href="./" data-role="button" data-theme="a">View photo page</a>
<a href="./" data-role="button" data-theme="a">Done</a>
</div>
</div>
@@ -32,7 +32,7 @@ <h1>Dialog select test</h1>
<div data-role="page" id="bar">
<div data-role="header" data-theme="d">
<div data-role="header" data-theme="b">
<h1>Sample Dialogs</h1>
</div>
@@ -105,9 +105,9 @@ <h1>Sample Dialogs</h1>
</select>
</div>
<a href="#foo" data-role="button" data-rel="back" data-theme="c">Real Submit Would go here</a>
<a href="#foo" data-role="button" data-rel="back">Real Submit Would go here</a>
</form>
<a href="#foo" data-role="button" data-rel="back" data-theme="c">Cancel</a>
<a href="#foo" data-role="button" data-rel="back">Cancel</a>
</div>
</div>
Oops, something went wrong.

0 comments on commit 38d8b72

Please sign in to comment.