Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-19 22:00:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added new theme classes

Browse source
This commit is contained in:
Todd Parker 2010-10-12 17:19:22 -04:00
parent 3fa947ab15
commit c83c10f5bf
1 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
docs/themes.html
View file

@ -37,7 +37,7 @@
<p> Themes may have additional swatches for accent colors or specific situations within an app or site. For example, you could </p>
<h2>Theme swatch example</h2>
<h2>Typical themed page</h2>
<div data-role="header" data-position="inline">
<a href="index.html" data-icon="arrow-l">Button A</a>
@ -156,6 +156,7 @@
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Button B</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Button C</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Button D</a>
<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l">Button E</a>
</div><!-- end swatch-bars -->
<h2 id="context">Context-aware button theming</h2>
@ -166,6 +167,7 @@
<div data-role="header" data-theme="b"><h1>Bar B</h1><a href="index.html" data-icon="arrow-l">Button B</a></div>
<div data-role="header" data-theme="c"><h1>Bar C</h1><a href="index.html" data-icon="arrow-l">Button C</a></div>
<div data-role="header" data-theme="d"><h1>Bar D</h1><a href="index.html" data-icon="arrow-l">Button D</a></div>
<div data-role="header" data-theme="e"><h1>Bar E</h1><a href="index.html" data-icon="arrow-l">Button D</a></div>
</div><!-- end swatch-bars -->
<p>This makes it really easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container too. Learn more about <a href="buttons/buttons-themes.html">button theming</a>.</p>
@ -179,6 +181,7 @@
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="b" data-nobackbtn="true">
@ -187,6 +190,7 @@
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="c" data-nobackbtn="true">
@ -195,6 +199,7 @@
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="d" data-nobackbtn="true">
@ -203,6 +208,16 @@
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="e" data-nobackbtn="true">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>