Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-01 11:24:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

removed the class="ui-body" wrappers on pages, added to content div. hopefully, we can remove the class completely and have the framework add it for you.

Browse source
This commit is contained in:
Todd Parker 2010-10-11 15:51:59 -04:00
parent 2a481b5e90
commit 8f34e4166b
30 changed files with 110 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/buttons.html
View file

@ -14,10 +14,8 @@
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
</div><!-- /ui-body wrapper -->
<div data-role="content" class="ui-body">
</div><!-- /content -->
</div><!-- /page -->

7
docs/buttons/buttons-grouped.html
View file

@ -14,8 +14,7 @@
<h1>Grouped buttons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<p><strong>Vertical</strong> grouped buttons (default)</p>
@ -42,10 +41,6 @@
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

5
docs/buttons/buttons-icons.html
View file

@ -14,8 +14,7 @@
<h1>Button icons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<h2>Icon position options</h2>
<p><strong>No icon</strong></p>
@ -43,8 +42,6 @@
<p><strong>Minus</strong> - data-icon="minus"</p>
<a href="index.html" data-role="button" data-icon="minus">My button</a>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

7
docs/buttons/buttons-inline.html
View file

@ -14,9 +14,7 @@
<h1>Inline buttons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<p><strong>Inline</strong> buttons (default)</p>
<div data-inline="true" >
@ -34,8 +32,7 @@
</div>
</div>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

31
docs/buttons/buttons-themes.html
View file

@ -14,8 +14,33 @@
<h1>Theming buttons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<h2>Theming</h2>
<p>jQuery Mobile has a rich <a href="../themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
<div data-role="content" data-theme="a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div>
<h2>Assigning theme swatches</h2>
<p>Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code>data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot;&gt;Theme a&lt;/a&gt;
</pre></code>
<p>Here are 4 buttons with icons that have a different swatch letter assigned via the <code>data-theme</code> attribute.</p>
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Theme d</a>
<h2>Theme variations</h2>
<p><strong>"a" theme</strong> on container with themed buttons inside</p>
<div data-role="content" data-theme="a">
@ -49,8 +74,6 @@
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Theme d</a>
</div>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

5
docs/buttons/buttons-types.html
View file

@ -14,8 +14,7 @@
<h1>Button markup options</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<p><strong>Link</strong> based button</p>
<a href="index.html" data-role="button">Link element</a>
@ -35,8 +34,6 @@
<p><strong>Input type="image"</strong> based button</p>
<input type="image" value="Input type=image" />
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

26
docs/buttons/docs-buttons.html
View file

@ -13,8 +13,7 @@
<h1>Buttons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<h2>Button basics</h2>
<p>in jQuery Mobile, buttons that are used for navigation are coded as links and those that submit forms are coded as <code>button</code> elements. </p>
@ -99,34 +98,11 @@
<a href="index.html" data-role="button">Maybe</a>
</div>
<h2>Theming</h2>
<p>jQuery Mobile has a rich <a href="../themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
<div data-role="content" data-theme="a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div>
<p>Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code>data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot;&gt;Theme a&lt;/a&gt;
</pre></code>
<p>Here are 4 buttons with icons that have a different swatch letter assigned via the <code>data-theme</code> attribute.</p>
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Theme d</a>
<h2>Buttons in bars</h2>
<p>When buttons are placed inside header or footer bars, they are styled a bit differently than in the body. To save space, buttons in bars are styled with a smaller text size, less padding and only enough width to fit the text and icons inside. The <a href="../toolbars/docs-bars.html">toolbar documentation</a> has full details on the styling options of button in bars.</p>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

11
docs/buttons/index.html
View file

@ -13,8 +13,7 @@
<h1>Buttons</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ">
<div data-role="content" class="ui-body">
<p>Buttons are one of the core widgets in jQuery Mobile and are used within a wide range of other plugins.</p>
</div><!-- /ui-body wrapper -->
@ -22,6 +21,7 @@
<li data-role="list-divider">Documentation</li>
<li><a href="docs-buttons.html">Button basics</a></li>
<li><a href="api-buttons.html">API documentation</a></li>
<li><a href="buttons-themes.html">Theming buttons</a></li>
</ul>
<ul data-role="listview" data-inset="true">
@ -31,14 +31,7 @@
<li><a href="buttons-inline.html">Inline buttons</a></li>
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Styles & theming</li>
<li><a href="buttons-themes.html">Applying themes</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>

6
docs/forms.html
View file

@ -14,10 +14,8 @@
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
</div><!-- /ui-body wrapper -->
<div data-role="content" class="ui-body">
</div><!-- /content -->
</div><!-- /page -->

2
docs/index.html
View file

@ -12,7 +12,7 @@
<h1>jQuery Mobile - Getting Started Guide</h1>
</div>
<div data-role="content" class=" ui-body-b">
<div data-role="content" class="ui-body-b">
<ul data-role="listview" data-fill-width="false">
<li><a href="intro.html">Introduction to jQuery Mobile</a></li>
<li><a href="themes.html">Theme system</a></li>

18
docs/intro.html
View file

@ -14,8 +14,7 @@
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<p>All pages in jQuery Mobile are built with clean, semantic HTML to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies progressive enhancement techniques to unobtrusively transform the page into a rich, interactive experience that leverages the power of jQuery and CSS3. The jQuery Mobile framework is designed to be easy enough to allow designers to build complex mobile-optimized web sites and apps with minimal JavaScript knowledge, yet powerful and extensible enough for experienced developers to build highly customized experiences.Key features include:</p>
<ul>
@ -30,21 +29,8 @@
<h2>Markup-driven configuration: Mobilize()</h2>
<p>The jQuery Mobile library uses a <code>mobilize()</code> function that automatically initializes plugins for all the jQuery Mobile widgets found on a page. HTML5 <code>data-role</code> attributes in HTML markup act as the trigger for the mobilize function. For example, a <code>data-role="listview"</code> attribute on an simple unordered list tells the <code>mobilize()</code> function to apply all the CSS classes and JavaScript behaviors required to transform a list of links into a finger-friendly mobile list view widget. Developers can choose to omit the <code>mobilize()</code> function and write their own tools to trigger the jQuery Mobile plugins, but it is a convenient way to unobtrusively apply the plugins in consistent way.</p>
<a href="themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">jQery Mobile core & mobilize</a>
<h2>Theming framework</h2>
<p>Every layout and widget is designed around a new object-oriented CSS framework to support rich theming of sites and applications built with jQuery Mobile. Theming works similarly to the jQuery UI ThemeRoller system but with a few important improvements:</p>
<ul>
<li>Richer designs are now possible because themes now include multiple color "swatches": 4 bars with matching buttons for each, 3 content areas that can be freely mixed and matched to create visual texture</li>
<li>Open-ended theming allows for additional theme swatches can be added to a theme to add almost unlimited more variety to designs</li>
<li>All backgrounds now use CSS3 gradients to dramatically reduce file size and number of server requests</li>
<li>A simplified icon set only includes the most commonly used icons in either black or white colors to reduce image weight</li>
</ul>
<a href="themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Theming documentation</a>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

6
docs/links.html
View file

@ -14,10 +14,8 @@
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
</div><!-- /ui-body wrapper -->
<div data-role="content" class="ui-body">
</div><!-- /content -->
</div><!-- /page -->

19
docs/lists/api-lists.html
View file

@ -13,24 +13,9 @@
<h1>List API</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="content" class="ui-body">
<div class="ui-body ui-body-c">
<h2>Dependencies</h2>
<p>To be documented</p>
<h2>Options</h2>
<p>To be documented</p>
<h2>Methods</h2>
<p>To be documented</p>
<h2>Known Issues</h2>
<p>To be documented</p>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

13
docs/lists/docs-lists.html
View file

@ -13,8 +13,7 @@
<h1>Lists</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<h2>Basic linked lists</h2>
<p>A list view is coded as a simple unordered list containing linked list items with a <code>data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. Here is the HTML markup for a basic linked list.</p>
@ -79,15 +78,7 @@
<p>If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the <code>data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance.</p>
<a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>
<h2>List theming</h2>
<p>Themes contain two list theme swatch styles. The default theme is "f" (silver in the default theme). The list appearance can be changed to any other color theme swatch by adding the <code>data-theme="e"</code> attribute to the list, where the letter is the name of any list swatch in the theme. The theme for list dividers can be set by adding the <code>data-groupingtheme</code> to the list and specifying a swatch letter.</p>
<a href="lists-themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Themed list example</a>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

11
docs/lists/index.html
View file

@ -13,8 +13,8 @@
<h1>Lists</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ">
<div data-role="content" class="ui-body">
<p>Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns.</p>
</div><!-- /ui-body wrapper -->
@ -22,7 +22,7 @@
<li data-role="list-divider">Documentation</li>
<li><a href="docs-lists.html">List view basics</a></li>
<li><a href="api-lists.html">API documentation</a></li>
<li><a href="lists-themes.html">Theming lists</a></li>
</ul>
<ul data-role="listview" data-inset="true">
@ -37,12 +37,7 @@
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-formatting.html">Content formatting</a></li>
<li><a href="lists-search.html">Search filter bar</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Styles & theming</li>
<li><a href="lists-inset.html">Inset styled lists</a></li>
<li><a href="lists-themes.html">Applying themes</a></li>
</ul>

2
docs/lists/lists-divider.html
View file

@ -14,7 +14,7 @@
<h1>List dividers</h1>
</div><!-- /header -->
<div data-role="content" data-filter="true">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>

26
docs/lists/lists-themes.html
View file

@ -14,12 +14,19 @@
<h1>List themes</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="content" class="ui-body">
<div class="ui-body ui-body-a">
<h2>Theme swatch "a" applied to body, "e" to lists, "a" for dividers</h2>
<h2>Assigning theme swatches to lists</h2>
<p>All the standard button swatches can be applied to lists. The default theme is "f" (silver in the default theme). </p>
<p>The list item color scheme can be changed to any button color theme swatch by adding the <code>data-theme="e"</code> attribute to the list, and setting the letter theme swatch. </p>
<p>The theme for list dividers can be set by adding the <code>data-groupingtheme</code> to the list and specifying a swatch letter.</p>
<h2>Theme variation: "a" body, "e" lists, "a" dividers</h2>
<div class="ui-body-a">
<ul data-role="listview" data-inset="true" data-theme="e" data-groupingtheme="a">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
@ -73,9 +80,9 @@
</div><!-- / body wrapper -->
<div class="ui-body ui-body-b">
<h2>Theme swatch "b" applied to body, "f" to lists, "b" for dividers</h2>
<h2>Theme variation: "b" body, "f" lists, "b" dividers</h2>
<div class="ui-body-b">
<ul data-role="listview" data-inset="true" data-theme="f" data-groupingtheme="b">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
@ -130,9 +137,9 @@
</div><!-- / body wrapper -->
<div class="ui-body ui-body-c">
<h2>Theme swatch "c" applied to body, "g" to lists, "b" for dividers</h2>
<h2>Theme variation: "c" body, "g" lists, "b" dividers</h2>
<div class="ui-body-c">
<ul data-role="listview" data-inset="true" data-theme="g" data-groupingtheme="b">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
@ -184,7 +191,6 @@
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
</ul>
</div><!-- / body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

3
docs/lists/lists-thumbnails.html
View file

@ -15,9 +15,8 @@
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-filter="true">
<ul data-role="listview">
<li>
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>

6
docs/page.html
View file

@ -13,8 +13,7 @@
<h1>Page structure</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<p>Following HTML markup conventions is essential to this approach because markup is the primary mechanism used to configure the mobile experience in jQuery Mobile. Validate your code and always avoid the use of inline styles or inline JavaScript event handlers to ensure the best results.</p>
@ -110,8 +109,7 @@
&lt;/html&gt;
</code></pre>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

19
docs/themes.html
View file

@ -13,12 +13,22 @@
<h1>Themes</h1>
</div>
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<h2 id="overview">Theming overview</h2>
<p>The jQuery Mobile theme framework contains multiple color "swatches" for bars, content blocks and buttons. 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 then re-used throughout the interface as configurable color swatches that can be mixed and matched. We also take advantage of CSS3 properties to add rounded corners, box and text shadow and gradients to make the theme styles very lightweight and reduce server requests.</p>
<p>Every layout and widget is in jQuery Mobile designed around a new object-oriented CSS framework to support rich theming of complete sites and applications. The theming system is similiar to the ThemeRoller system in jQuery UI but with a few important improvements:</p>
<ul>
<li>Richer designs are now possible because themes now include multiple color "swatches": 4 bars with matching buttons for each, 3 content areas that can be freely mixed and matched to create visual texture</li>
<li>Open-ended theming allows for additional theme swatches can be added to a theme to add almost unlimited more variety to designs</li>
<li>All backgrounds now use CSS3 gradients to dramatically reduce file size and number of server requests</li>
<li>A simplified icon set only includes the most commonly used icons in either black or white colors to reduce image weight</li>
</ul>
<h3 id="bars">Themes &amp; swatches</h3>
<p>In jQuery Mobile, there is a single theme CSS file that contains multiple color "swatches" for bars, content blocks and buttons that can be combined to achieve a wide range of visual effects. 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. We also take advantage of CSS3 properties to add rounded corners, box and text shadow and gradients to make the theme styles very lightweight and reduce server requests.</p>
<p>Themes include at least 3 swatches 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. Themes may have additional swatches but these are used for accents colors or specific situations within an app or site.</p>
@ -141,7 +151,6 @@
<p>The powerful thing about the new jQuery Mobile theme system is that you can now add as many color swatches as you like within a single theme. In the future ThemeRoller tool, you will be able to add new swatches through an easy-to-use web interface. Until then, you can add new swatches manually by copying the block of theme style rules for an existing swatch, renaming the rules a new letter (e) and changing colors.</p>
<p>You can then you can reference the new theme by adding the <code>data-theme="e"</code> attribute to your markup. If you set a theme swatch letter, the framework simply applies classes that include the letter you specify so it's critical that your active theme file include rules for the letters specified in your markup.</p>
</div><!-- end body wrapper -->
</div><!-- end content -->
</div><!-- end page -->

6
docs/toolbars/api-bars.html
View file

@ -13,8 +13,7 @@
<h1>Toolbar API</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<h2>Dependencies</h2>
<p>To be documented</p>
@ -28,9 +27,6 @@
<h2>Known Issues</h2>
<p>To be documented</p>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

12
docs/toolbars/bars-themes.html
View file

@ -17,6 +17,17 @@
<div data-role="content" class="ui-body">
<p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. To set the header or footer bars to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
<div class="highlight">
<pre>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
</div>
<h2>Demo description</h2>
<p>This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.</p>
<h3>Headers</h3>
@ -84,7 +95,6 @@
</div>
</div>
</div>
</body>

15
docs/toolbars/docs-bars.html
View file

@ -13,8 +13,7 @@
<h1>Toolbar basics</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<h2>Header &amp; footer bar structure</h2>
<p>The <code>header</code> is an bar at the top of the page that usually contains the page title text and optional buttons positioned in the the left or right of the title for navigation or actions. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p>
@ -41,17 +40,6 @@
<a href="docs-footers.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Footer configuration options</a>
<p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. To set the header or footer bars to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
<div class="highlight">
<pre>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
</div>
<a href="../themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Theming documentation</a>
<h2>Bar positioning and behavior</h2>
@ -74,7 +62,6 @@
<a href="docs-navbar.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Navbar configuration</a>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

6
docs/toolbars/docs-footers.html
View file

@ -13,8 +13,7 @@
<h1>Footer configuration</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<h2>Footer bar structure</h2>
@ -71,8 +70,7 @@
<a href="bars-persist.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Persistent footer example</a>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

6
docs/toolbars/docs-headers.html
View file

@ -13,8 +13,7 @@
<h1>Header configuration</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<h2>Header bar structure</h2>
<p>The <code>header</code> is an bar at the top of the page that usually contains the page title text and optional buttons positioned in the the left or right of the title for navigation or actions. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p>
@ -79,8 +78,7 @@
<a href="bars-themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Themed header examples</a>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

4
docs/toolbars/docs-navbars.html
View file

@ -13,14 +13,12 @@
<h1>Navbar basics</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<div data-role="content" class="ui-body">
<p>The Nav Bar widget can be added to the page to provide a navigation bar that accommodates an unlimited number of options in a compact element that placed inside a header, content, or footer region of the page. It displays up to 4 items in a horizontal bar with out without icons. If more than 4 items are in the navigation list, the 4th slot is used for a "more" link that opens a separate overlay with the full list of items. </p>
<p>The markup for a nav bar is identical to a basic linked list view: an unordered list with a link in each item and an optional icon. This markup is transformed into a nav bar by adding a <code>data-role="navbar" attribute to the list.</code></p>
<a href="navbar.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nav bar examples</a>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->

2
docs/toolbars/footer-persist-result.html
View file

@ -14,7 +14,7 @@
</div>
<div data-role="content" class="ui-body">
<div data-role="content" class="ui-body">
<h2>Demo description</h2>
<p>The footer on this page should have persisted. </p>

2
docs/toolbars/footer-persist.html
View file

@ -14,7 +14,7 @@
</div>
<div data-role="content" class="ui-body">
<div data-role="content" class="ui-body">
<h2>Demo description</h2>
<p>This is a demo of a persistent footer. The footer on this page should stick when transitioning to the next page, because they have the same data-id attributes. </p>

13
docs/toolbars/index.html
View file

@ -13,8 +13,8 @@
<h1>Toolbars</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ">
<div data-role="content" class="ui-body">
<p>Toolbars are used for headers, footers and utility bars throughout a mobile app so jQuery Mobile provides a standard set of bars and navigation tools to cover most standard scenarios.</p>
</div><!-- /ui-body wrapper -->
@ -25,7 +25,7 @@
<li><a href="docs-footers.html">Footer configuration</a></li>
<li><a href="docs-navbars.html">Navbar configuration</a></li>
<li><a href="api-bars.html">API documentation</a></li>
<li><a href="bars-themes.html">Theming toolbars</a></li>
</ul>
<ul data-role="listview" data-inset="true">
@ -36,12 +36,7 @@
<li><a href="navbar.html">Nav bars</a></li>
<li><a href="footer-persist.html">Persistent footer</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Styles & theming</li>
<li><a href="bars-themes.html">Applying themes</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

2
index.html
View file

@ -13,7 +13,7 @@
</div>
<div data-role="content">
<ul data-role="listview" data-fill-width="false">
<ul data-role="listview">
<li><a href="docs/index.html">Documentation</a></li>
<li><a href="_containers-states.html">Containers &amp; states</a></li>
<li><a href="_fixed.html">Fixed Toolbars</a></li>