mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-18 05:10:59 +00:00
re-vamping toolbar docs
This commit is contained in:
Todd Parker
parent
b23b083697
commit
6edca164ad
5 changed files with 134 additions and 113 deletions
|
|
@ -10,7 +10,7 @@
|
|||
<div data-role="page" data-fullscreen="true">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Fullscreen fixed toolbars</h1>
|
||||
<h1>Fullscreen fixed header</h1>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</div>
|
||||
|
||||
<div data-role="footer">
|
||||
<h1>Fixed Footer</h1>
|
||||
<h1>Fullscreen fixed footer</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,42 +15,29 @@
|
|||
|
||||
<div data-role="content">
|
||||
|
||||
|
||||
<h2>Toolbar types</h2>
|
||||
|
||||
<p>In jQuery Mobile, there are two standard types of toolbars: Headers and Footers. </p>
|
||||
|
||||
<p>The <a href="docs-headers.html"><strong>Header bar </strong></a> serves as the page title and is usually the first element inside each <a href="../pages/docs-pages.html">mobile page</a> and typically contains a page title and up to two buttons.</p>
|
||||
|
||||
<p>The <a href="docs-footers.html"><strong>Footer bar</strong></a> is usually the last element inside each mobile page and tend to be more freeform than headers in terms of content and functionality but typically contain combinations of text and buttons.</p>
|
||||
|
||||
|
||||
<p>The <code>footer</code> bar has the same structure as the header except for the <code>data-role</code> attribute and your choice of heading. Footers tend to be more freeform than headers in terms of content and functionality but they are designed to hold text and buttons, just like a header.</p>
|
||||
|
||||
<div class="highlight">
|
||||
<pre>
|
||||
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">></span>
|
||||
<span class="nt"><h4></span>Footer content<span class="nt"></h4></span>
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<a href="docs-footers.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Footer configuration options</a>
|
||||
<p>Inside the header and footer bars, it's common to have a horizontal list of links that serve as a navigation or tab bar. jQuery Mobile includes a <a href="docs-navbar.html"><strong>nav bar</strong></a> widget that turns a list of links into a horizontal navigation bar.</p>
|
||||
|
||||
|
||||
<h2>Positioning options</h2>
|
||||
<h2>Toolbar positioning options</h2>
|
||||
|
||||
<p>Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the "fixed" positioning mode. In this mode, the headers and footer are sitting in the natural document flow, which ensures that they are visible on all devices, regardless of JavaScript support.</p>
|
||||
<p>To achieve the convenience of static toolbars without the drawbacks of implementing faux-scrolling in JavaScript, the framework adds logic to detect when a bar has been scrolled out of view and animates them back into place by dynamically re-positioning the bar to the top or bottom of the viewport. At any time,tapping the screen will toggle the visibility of the toolbars: tapping when they aren't visible brings the toolbars into view, tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate.</p>
|
||||
<p>Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the <strong>"inline" positioning</strong> mode. In this mode, the headers and footer sit in the natural document flow (the default HTML behavior), which ensures that they are visible on all devices, regardless of JavaScript and CSS positioning support.</p>
|
||||
|
||||
<p>A <a href="bars-fixed.html"><strong>"fixed" positioning mode</strong></a> provides the convenience of static toolbars without the drawbacks of implementing faux-scrolling in JavaScript. The toolbars start in their natural positions on the page, like the "inline" mode, but when a bar scrolls out of the viewport, the framework animates the bar back into view by dynamically re-positioning the bar to the top or bottom of the viewport.</p>
|
||||
<p> At any time, tapping the screen will toggle the visibility of the fixed toolbars: tapping the page when the toolbars aren't visible brings them into view, tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate. </p>
|
||||
|
||||
<p>A <a href="bars-fullscreen.html"><strong>"fullscreen" position mode</strong></a> works just like the fixed mode except that the toolbars aren't shown at the top and bottom of the page and only appear when the page is clicked. This is useful for immersive apps like photo or video viewers where you want the content to full when whole screen and toolbars can be summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content so this is best used for specific situations.</p>
|
||||
|
||||
|
||||
<a href="bars-fixed.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed bar positioning example</a>
|
||||
|
||||
<p>In cases where the dynamically re-positioned "static" toolbar behavior isn't desired, you can simply turn off this feature by adding the <code>data-position="inline"</code> attribute on the header or footer container. This makes the toolbar stay in place in the page flow when the user scrolls, essentially the default HTML behavior.</p>
|
||||
|
||||
<a href="bars-inline.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inline bar positioning example</a>
|
||||
|
||||
<p>The third positioning option for bars is a "fullscreen" mode works just like the default <a href="bars-fixed.html">"fixed" toolbar mode</a> except that the toolbars aren't shown at the top and bottom of the page and only appear when the page is clicked. This is useful for immersive apps like photo or video viewers where you want the content to full when whole screen and toolbars can be summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content so this is best used for specific situations.</p>
|
||||
|
||||
<a href="bars-fullscreen.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fullscreeen bar positioning example</a>
|
||||
|
||||
<h2>Navbars</h2>
|
||||
|
||||
<p>A navbar plugin makes it easy to add a horizontal list of links to the header, footer or even main content body of the page. </p>
|
||||
|
||||
<a href="docs-navbar.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Navbar configuration</a>
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<h2>Footer bar structure</h2>
|
||||
|
||||
<p>The <code>footer</code> bar has the same structure as the header except for the <code>data-role</code> attribute and your choice of heading. Footers tend to be more freeform than headers in terms of content and functionality but they are designed to hold text and buttons, just like a header.</p>
|
||||
<p>The <code>footer</code> bar has the same basic structure as the header except it uses the <code>data-role</code> attribute value of <code>footer</code>. </p>
|
||||
|
||||
<div class="highlight">
|
||||
<pre>
|
||||
|
|
@ -26,54 +26,80 @@
|
|||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
|
||||
<p>The <code>footer</code> toolbar will be be themed with the "a" swatch by default (black in the default theme) but you can easily <a href="bars-themes.html">set the theme swatch color</a>.</p>
|
||||
|
||||
<div data-role="footer" data-position="inline">
|
||||
<h4>Footer content</h4>
|
||||
</div>
|
||||
|
||||
<p>The page footer is very similar to the header in terms of options and configuration. The primary differences are that the footer is designed to be less structured than the header to allow for more flexibility, so the framework doesn't automatically place buttons to the left or right based on source order as it does in the header. </p>
|
||||
|
||||
|
||||
<p>The page footer is very similar to the header in terms of options and configuration. The primary differences are that the footer is designed to be less structured than the header to allow for more flexibility, so the framework doesn't automatically place buttons to the left or right based on source order as it does in the header. A footer is identified with the <code>data-role="footer</code> attribute and can contain any markup.</p>
|
||||
|
||||
<div class="highlight">
|
||||
<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p><strong>Inline toolbar</strong> buttons</p>
|
||||
<h2>Adding buttons</h2>
|
||||
|
||||
<div data-role="footer" data-position="inline">
|
||||
<select name="select-choice-1" id="select-choice-1" data-theme="a">
|
||||
<option value="Choice 1">Choice 1</option>
|
||||
<option value="Choice 2">Choice 2</option>
|
||||
<option value="Choice 3">Choice 3</option>
|
||||
</select>
|
||||
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
|
||||
<a href="index.html" data-role="button" data-icon="plus">Add</a>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Theming options</h2>
|
||||
<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>
|
||||
<p>Any link added to the footer will be automatically turned into a button but any valid <a href="../buttons/buttons-types.html">button markup</a> will work.. To save space, buttons in toolbars are automatically set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons they contain. </p>
|
||||
|
||||
<p>By default, toolbars don't have any padding to accommodate nav bars and other widgets. To include padding on the bar, add a <code>class="ui-bar"</code> to the footer.</p>
|
||||
|
||||
|
||||
<div class="highlight">
|
||||
<pre>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><h4></span>Footer content goes here<span class="nt"></h4></span>
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
</div>
|
||||
<pre><code>
|
||||
<div data-role="footer" class="ui-bar">
|
||||
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
|
||||
<a href="index.html" data-role="button" data-icon="plus">Add</a>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<p>This creates this toolbar with buttons sitting in a row</p>
|
||||
|
||||
|
||||
<div data-role="footer" class="ui-bar" data-position="inline">
|
||||
<a href="index.html" data-icon="delete">Remove</a>
|
||||
<a href="index.html" data-icon="plus">Add</a>
|
||||
<a href="index.html" data-icon="arrow-u">Up</a>
|
||||
<a href="index.html" data-icon="arrow-d">Down</a>
|
||||
</div>
|
||||
|
||||
<p>To group the buttons together into a button set, wrap the links in a wrapper with <code>data-role="controlgroup" data-type="horizontal"</code> attributes.</p>
|
||||
|
||||
<code><div data-role="controlgroup" data-type="horizontal"></code>
|
||||
|
||||
<p>This creates a grouped set of buttons:</p>
|
||||
|
||||
<div data-role="footer" class="ui-bar" data-position="inline">
|
||||
<div data-role="controlgroup" data-type="horizontal">
|
||||
<a href="index.html" data-icon="delete">Remove</a>
|
||||
<a href="index.html" data-icon="plus">Add</a>
|
||||
<a href="index.html" data-icon="arrow-u">Up</a>
|
||||
<a href="index.html" data-icon="arrow-d">Down</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>Adding form elements</h2>
|
||||
|
||||
<p>Form elements and other content can also be added to toolbars. Here is an example of a select menu inside a footer bar:</p>
|
||||
|
||||
|
||||
<p>One common scenario is to have a few buttons in the footer. Just like the header, adding a set of anchor links inside the footer bar will trigger the <code>mobilize()</code> function to transform the links into the styled mobile buttons. In the footer, each button will be as wide as the text and icon contents and the buttons will sit side-by-side because each has the CSS <code>display:inline-block</code> property.</p>
|
||||
|
||||
<div class="highlight">
|
||||
<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">data-icon=</span><span class="s">"plus"</span><span class="nt">></span>New<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">data-icon=</span><span class="s">"delete"</span><span class="nt">></span>Delete<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">data-icon=</span><span class="s">"search"</span><span class="nt">></span>Search<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
</div>
|
||||
<div data-role="footer" class="ui-bar" data-position="inline">
|
||||
<label for="select-choice-1">Shipping:</label>
|
||||
<select name="select-choice-1" id="select-choice-1" data-theme="a">
|
||||
<option value="standard">Standard: 7 day</option>
|
||||
<option value="rush">Rush: 3 days</option>
|
||||
<option value="express">Express: next day</option>
|
||||
<option value="overnight">Overnight</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Persistent footers</h2>
|
||||
<p>In situations where the footer is being used as a global navigation element, you may want the footer to appear like it is fixed in place between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile. To make a footer appear to stay in place between transitions, simply add the <code>data-id</code> attribute to the footer of both pages and use the same <code>id</code> value for each. For example, by adding <code>data-id="myfooter"</code> to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. This effect will only work correctly if the header and footer toolbars are set to sticky so they are in view during the transition.</p>
|
||||
|
|
@ -81,7 +107,6 @@
|
|||
|
||||
<p>If you want the footer to appear persistent as you navigate between pages (especially useful if using a nav bar, see below), you can achieve this effect by adding a <code>data-id</code> attribute to each page that should have the persistent footer. Giving a set of pages the same <code>data-id</code> attribute value (like "foo"), tells the framework to use the persistent footer transition when animating.</p>
|
||||
|
||||
<a href="bars-persist.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Persistent footer example</a>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,13 +10,14 @@
|
|||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-position="inline">
|
||||
<h1>Header configuration</h1>
|
||||
<h1>Header bars</h1>
|
||||
<a href="index.html" class="ui-btn-right">Save</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<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>
|
||||
|
||||
<h2>Header structure</h2>
|
||||
<p>The <code>header</code> is an toolbar 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>
|
||||
|
||||
<div class="highlight">
|
||||
<pre>
|
||||
|
|
@ -26,57 +27,66 @@
|
|||
</pre>
|
||||
</div>
|
||||
|
||||
<p>The <code>header</code> toolbar will be be themed with the "a" swatch by default (black in the default theme).</p>
|
||||
<p>The <code>header</code> toolbar will be be themed with the "a" swatch by default (black in the default theme) but you can easily <a href="bars-themes.html">set the theme swatch color</a>.</p>
|
||||
|
||||
<div data-role="header" data-position="inline">
|
||||
<h1>Page title</h1>
|
||||
</div>
|
||||
<div data-role="header" data-position="inline">
|
||||
<h1>Page title</h1>
|
||||
</div>
|
||||
|
||||
<p><strong>See that "back" button?</strong> The framework automatically generates a "back" button for you to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header either add your own button to the left slot (see below) or, add this attribute: <code>data-nobackbtn="true"</code> to the header container.
|
||||
<p><strong>See that "back" button?</strong> The framework automatically generates a "back" button for you to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header either add your own button to the left slot (see below) or, add this attribute: <code>data-nobackbtn="true"</code> to the header container.
|
||||
|
||||
<h2>Header buttons</h2>
|
||||
|
||||
<p>In the standard header configuration, there are slots buttons on either side of the text heading. Each button is typically an <code>anchor</code> element but any valid <a href="../buttons/buttons-types.html">button markup</a> will work. To save space, buttons in toolbars are set to <a href="../buttons/buttons-inline.html">inline</a> so button is only as wide as the text and icons they contain. </p>
|
||||
<h2>Adding buttons</h2>
|
||||
|
||||
<p>In the standard header configuration, there are slots buttons on either side of the text heading. Each button is typically an <code>anchor</code> element but any valid <a href="../buttons/buttons-types.html">button markup</a> will work. To save space, buttons in toolbars are set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons they contain. </p>
|
||||
|
||||
|
||||
<h3>Default button positioning</h3>
|
||||
|
||||
<p>The header plugin looks for immediate children of the header container and will automatically set the first link found into the left button slot and the second link into the right button slot. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot because of their sequence in the source order. </p>
|
||||
|
||||
|
||||
<pre><code>
|
||||
<div data-role="header" data-position="inline">
|
||||
<a href="index.html" data-icon="delete">Cancel</a>
|
||||
<h1>Edit Contact</h1>
|
||||
<a href="index.html" data-icon="check" data-theme="b">Save</a>
|
||||
<a href="index.html" data-icon="check"</a>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<h3>Button positions</h3>
|
||||
|
||||
<p>The header plugin looks for immediate children of the header container and will automatically set the first link found into the left button slot and the second link into the right button slot. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot because of their sequence in the source order. </p>
|
||||
|
||||
|
||||
<div data-role="header" data-position="inline">
|
||||
<a href="index.html" data-icon="delete">Cancel</a>
|
||||
<h1>Edit Contact</h1>
|
||||
<a href="index.html" data-icon="check">Save</a>
|
||||
</div>
|
||||
<p>Buttons automatically adapt to the color of the bar they sit in so a link in a header bar with the "a" swatch color will also be styled as "a" colored buttons. To make the right button visually stand out, use add the <code>data-theme</code> attribute and set the color swatch for the button, "b" in this case.</p>
|
||||
|
||||
<p>Buttons automatically adapt to the color of the bar they sit in so a link in a header bar with the "a" swatch color will also be styled as "a" colored buttons. To make the right button stand out, use add the <code>data-theme</code> attribute and set the color swatch for the button, "b" in this case.</p>
|
||||
|
||||
<div data-role="header" data-position="inline">
|
||||
<a href="index.html" data-icon="delete">Cancel</a>
|
||||
<h1>Edit Contact</h1>
|
||||
<a href="index.html" data-icon="check" data-theme="b">Save</a>
|
||||
</div>
|
||||
|
||||
<div data-role="header" data-position="inline">
|
||||
<a href="index.html" data-icon="delete">Cancel</a>
|
||||
<h1>Edit Contact</h1>
|
||||
<a href="index.html" data-icon="check" data-theme="b">Save</a>
|
||||
</div>
|
||||
|
||||
<h3>Button position classes</h3>
|
||||
<h3>Controlling button position with classes</h3>
|
||||
|
||||
<p>The button position can also be controlled by adding classes to the button anchors instead of relying on source order. This is especially useful if there isn't a left button and you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p>
|
||||
|
||||
|
||||
|
||||
<div class="highlight">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"tools.php"</span> <span class="na">class=</span><span class="s">"ui-btn-right"</span><span class="nt">></span>Tools<span class="nt"></a></span>
|
||||
|
||||
</pre>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<p>If you want to add custom HTML markup (or embed a widget like Nav Bar) into the header bar, simply wrap the markup in a container <code>div</code> and the plugin won't apply the automatic button slot logic.</p>
|
||||
<div data-role="header" data-position="inline">
|
||||
<h1>Page Title</h1>
|
||||
<a href="index.html" class="ui-btn-right">Save</a>
|
||||
</div>
|
||||
|
||||
<h3>Back buttons</h3>
|
||||
|
||||
<p>If there isn't a user-defined button in the left slot, the framework will automatically generate a "back" button to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header in these situations, add this attribute: <code>data-nobackbtn="true"</code> to the header container.</p>
|
||||
<h2>Custom header configurations</h2>
|
||||
<p>If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container <code>div</code> inside the header container and the plugin won't apply the automatic button logic at all. This is especially useful if you want to embed a widget like <a href="navbar.html">Nav bar</a> into the header bar</p>
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
|
|
@ -20,11 +20,10 @@
|
|||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="docs-bars.html">Toolbar basics</a></li>
|
||||
<li><a href="docs-headers.html">Header configuration</a></li>
|
||||
<li><a href="docs-footers.html">Footer configuration</a></li>
|
||||
<li><a href="bars-fixed.html">Fixed toolbar example</a></li>
|
||||
<li><a href="bars-inline.html">Inline toolbar example</a></li>
|
||||
<li><a href="bars-fullscreen.html">Fullscreen toolbar example</a></li>
|
||||
<li><a href="docs-headers.html">Header bars</a></li>
|
||||
<li><a href="docs-footers.html">Footer bars</a></li>
|
||||
<li><a href="bars-fixed.html">Fixed positioning</a></li>
|
||||
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
|
||||
<li><a href="navbar.html">Nav bar in header example</a></li>
|
||||
<li><a href="footer-persist.html">Persistent footer nav bar</a></li>
|
||||
<li><a href="bars-themes.html">Theming toolbars</a></li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue