mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-27 17:34:45 +00:00
updated theme docs
This commit is contained in:
Todd Parker
parent
f240788f94
commit
801d441f3f
2 changed files with 49 additions and 18 deletions
|
|
@ -20,7 +20,9 @@
|
|||
|
||||
<p>jQuery Mobile has a rich <a href="../themes.html">theming system</a> that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.</p>
|
||||
|
||||
<p>The <code>data-theme</code> attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. The <code>data-theme</code> attribute could be added to the content container but we recommend adding it instead to the <code>data-role="page"</code> container to ensure that the background colors are applied to the full page </p>
|
||||
<p>The <code>data-theme</code> attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. The <code>data-theme</code> attribute could be added to the content container but we recommend adding it instead to the <code>data-role="page"</code> container to ensure that the background colors are applied to the full page.</p>
|
||||
|
||||
<p>Below are examples of theme swatches applied consistently across all page elements. Typically, you would mix and match swatches on various parts of the page to create visual texture but this shows how each theme swatch looks on various elements. To see theme swatches combined for better texture, check out the typical themed page example on the <a href="../themes.html">theming overview</a> page.</p>
|
||||
|
||||
|
||||
|
||||
|
|
@ -44,8 +46,9 @@
|
|||
<a href="#" data-role="button" data-inline="true">Button</a>
|
||||
</div>
|
||||
<div class="ui-bar ui-bar-a">
|
||||
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
||||
<h1>Footer A</h1>
|
||||
<div data-role="controlgroup" data-type="horizontal" >
|
||||
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
||||
</div><!-- /controlgroup -->
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -69,8 +72,9 @@
|
|||
<a href="#" data-role="button" data-inline="true">Button</a>
|
||||
</div>
|
||||
<div class="ui-bar ui-bar-b">
|
||||
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
||||
<h1>Footer B</h1>
|
||||
<div data-role="controlgroup" data-type="horizontal" >
|
||||
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
||||
</div><!-- /controlgroup -->
|
||||
</div>
|
||||
|
||||
<h2>Swatch C</h2>
|
||||
|
|
@ -93,8 +97,9 @@
|
|||
<a href="#" data-role="button" data-inline="true">Button</a>
|
||||
</div>
|
||||
<div class="ui-bar ui-bar-c">
|
||||
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
||||
<h1>Footer C</h1>
|
||||
<div data-role="controlgroup" data-type="horizontal" >
|
||||
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
||||
</div><!-- /controlgroup -->
|
||||
</div>
|
||||
|
||||
<h2>Swatch D</h2>
|
||||
|
|
@ -117,8 +122,34 @@
|
|||
<a href="#" data-role="button" data-inline="true">Button</a>
|
||||
</div>
|
||||
<div class="ui-bar ui-bar-d">
|
||||
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
||||
<h1>Footer B</h1>
|
||||
<div data-role="controlgroup" data-type="horizontal" >
|
||||
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
||||
</div><!-- /controlgroup -->
|
||||
</div>
|
||||
|
||||
<h2>Swatch E</h2>
|
||||
<div class="ui-bar ui-bar-e">
|
||||
<a href="#" data-icon="arrow-l">Back</a>
|
||||
<h1>Header E</h1>
|
||||
</div>
|
||||
<div class="ui-body ui-body-e">
|
||||
<h3>Header</h3>
|
||||
<p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p>
|
||||
<label for="slider1">Input slider:</label>
|
||||
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="e" />
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
||||
<legend>Cache settings:</legend>
|
||||
<input type="radio" name="radio-choice-a5" id="radio-choice-a5" value="on" checked="checked" />
|
||||
<label for="radio-choice-a5">On</label>
|
||||
<input type="radio" name="radio-choice-a5" id="radio-choice-b5" value="off" />
|
||||
<label for="radio-choice-b5">Off</label>
|
||||
</fieldset>
|
||||
<a href="#" data-role="button" data-inline="true">Button</a>
|
||||
</div>
|
||||
<div class="ui-bar ui-bar-e">
|
||||
<div data-role="controlgroup" data-type="horizontal" >
|
||||
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
||||
</div><!-- /controlgroup -->
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@
|
|||
<p>The key to the theme system used in jQuery UI is separation of color and texture (theme) from structural styles that define things like padding and dimensions. This allows the theme colors and textures to be defined once in the stylesheet as color "swatches", that can be mixed and matched. Within a jQuery Mobile theme, there are multiple color "swatches" for bars, content blocks and buttons that can be combined to achieve a wide range of visual effects.
|
||||
</p>
|
||||
|
||||
<p>Themes include at 5 swatches each for bars, content blocks and buttons. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level and "e" as an accent swatch.</p>
|
||||
<p>Themes include at 5 swatches each for bars, content blocks and buttons that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level and "e" as an accent swatch.</p>
|
||||
|
||||
<p> Themes may have additional swatches for accent colors or specific situations within an app or site. For example, you could </p>
|
||||
<p> Themes may have additional swatches for accent colors or specific situations within an app or site. For example, you could add a new theme swatch named with the letter "f" that has a red bar and button for use in error situations. This will be done directly in the ThemeRoller tool when it is launched in 2011. For the time being, it's pretty easy to manually add additional swatches by editing the theme css file - copy a block of swatch styles, rename the classes with the new swatch letter name and tweak colors.</p>
|
||||
|
||||
<h2>Typical themed page</h2>
|
||||
|
||||
|
|
@ -142,9 +142,9 @@
|
|||
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
||||
<legend>Active is used for the on state of these toggles:</legend>
|
||||
<input type="radio" name="radio-choice-a" id="radio-choice-a" value="on" checked="checked" />
|
||||
<input type="radio" name=" radio-choice-a" id="radio-choice-a" value="on" checked="checked" />
|
||||
<label for="radio-choice-a">On</label>
|
||||
<input type="radio" name="radio-choice-a" id="radio-choice-b" value="off" />
|
||||
<input type="radio" name=" radio-choice-a" id="radio-choice-b" value="off" />
|
||||
<label for="radio-choice-b">Off</label>
|
||||
</fieldset>
|
||||
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
<p>To add visual emphasis of certain buttons in a toolbar, the theme swatch color for a button can be set by adding a <code>data-theme="a"</code> to the anchor to make it stand out visually from it's parent. If the theme is set on a button in the markup, the framework won't override the theme swatch color when the parent theme is changed because you made a conscious decision to set the color.</p>
|
||||
|
||||
<div class="swatch-bars">
|
||||
<div data-role="header" data-theme="a" data-nobackbtn="true">
|
||||
<div data-role="header" data-theme="a" class="ui-bar" 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>
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
<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">
|
||||
<div data-role="header" data-theme="b" class="ui-bar" 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>
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
<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">
|
||||
<div data-role="header" data-theme="c" class="ui-bar" 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>
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
<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">
|
||||
<div data-role="header" data-theme="d" class="ui-bar" 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>
|
||||
|
|
@ -211,7 +211,7 @@
|
|||
<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 data-role="header" data-theme="e" class="ui-bar" 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue