mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-13 10:51:02 +00:00
Merge branch 'master' of github.com:jquery/jquery-mobile
This commit is contained in:
scottjehl
commit
202bf58f47
9 changed files with 184 additions and 63 deletions
|
|
@ -15,27 +15,44 @@
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<p>To visually group a set of buttons together to form a single block of buttons that look contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code>data-role="controlgroup"</code> attribute and the framework will create a vertical button group. This removes all margins and drop shadows between the buttons and only rounds the top and bottom buttons to get the effect that they are group together. </p>
|
||||
<pre><code>
|
||||
<div data-role="controlgroup">
|
||||
<a href="index.html" data-role="button">Yes</a>
|
||||
<a href="index.html" data-role="button">No</a>
|
||||
<a href="index.html" data-role="button">Maybe</a>
|
||||
</div>
|
||||
</pre></code>
|
||||
|
||||
<p>By default, grouped buttons are presented as a vertical list:</p>
|
||||
|
||||
<div data-role="controlgroup">
|
||||
<a href="index.html" data-role="button">Yes</a>
|
||||
<a href="index.html" data-role="button">No</a>
|
||||
<a href="index.html" data-role="button">Maybe</a>
|
||||
</div>
|
||||
|
||||
<p><strong>Vertical</strong> grouped buttons (default)</p>
|
||||
<div data-role="controlgroup" data-type="vertical" >
|
||||
<p>By adding the <code>data-type="horizontal"</code> attribute to the control group container, you can swap this to a horizontal style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. Be aware that these will wrap to multiple lines if the button number of text length is to wide for the screen.
|
||||
|
||||
<p><strong>Horizontal</strong> grouped buttons</p>
|
||||
<div data-role="controlgroup" data-type="horizontal">
|
||||
<a href="index.html" data-role="button">Yes</a>
|
||||
<a href="index.html" data-role="button">No</a>
|
||||
<a href="index.html" data-role="button">Maybe</a>
|
||||
</div>
|
||||
|
||||
<p><strong>Horizontal</strong> grouped buttons</p>
|
||||
<p><strong>Horizontal</strong> grouped buttons with icons</p>
|
||||
<div data-role="controlgroup" data-type="horizontal" >
|
||||
<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>
|
||||
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
|
||||
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
|
||||
</div>
|
||||
|
||||
<p><strong>Horizontal</strong> grouped buttons, icon only</p>
|
||||
<div data-role="controlgroup" data-type="horizontal" >
|
||||
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Remove</a>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,33 +15,74 @@
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<p>There a core set of standard icons included in the framework. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and black colored sprites and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>
|
||||
|
||||
|
||||
|
||||
<h2>Adding icons</h2>
|
||||
|
||||
<h2>Icon position options</h2>
|
||||
<p><strong>No icon</strong></p>
|
||||
<a href="index.html" data-role="button">My button</a>
|
||||
<p><strong>Left icon</strong> (default) - data-iconpos="left"</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete">My button</a>
|
||||
<p><strong>Right icon</strong> - data-iconpos="right"</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">My button</a>
|
||||
<p><strong>Icon only</strong> - data-iconpos="notext"</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">My button</a>
|
||||
<p>Icons can be added to buttons by adding a <code>data-icon</code> attribute on the anchor to specify the icon to display.</p>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-role="button" <strong>data-icon="delete"</strong>>Delete</a>
|
||||
</code>
|
||||
|
||||
<p>Creates this button with an icon:</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
|
||||
|
||||
<h2>Icon set</h2>
|
||||
|
||||
<p>This is a reference for the icon names you can specify in the <code>data-icon</code> attribute.</p>
|
||||
|
||||
<p><strong>Left arrow</strong> - data-icon="arrow-u"</p>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
|
||||
<p><strong>Right arrow</strong> - data-icon="arrow-d"</p>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-r">My button</a>
|
||||
<p><strong>Up arrow</strong> - data-icon="arrow-u"</p>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-u">My button</a>
|
||||
<p><strong>Down arrow</strong> - data-icon="arrow-d"</p>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-d">My button</a>
|
||||
<p><strong>Delete</strong> - data-icon="delete"</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete">My button</a>
|
||||
<p><strong>Plus</strong> - data-icon="plus"</p>
|
||||
<a href="index.html" data-role="button" data-icon="plus">My button</a>
|
||||
<p><strong>Minus</strong> - data-icon="minus"</p>
|
||||
<a href="index.html" data-role="button" data-icon="minus">My button</a>
|
||||
|
||||
<h2>Icon glyphs</h2>
|
||||
<p><strong>Left arrow</strong> - data-icon="arrow-u"</p>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
|
||||
<p><strong>Right arrow</strong> - data-icon="arrow-d"</p>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-r">My button</a>
|
||||
<p><strong>Up arrow</strong> - data-icon="arrow-u"</p>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-u">My button</a>
|
||||
<p><strong>Down arrow</strong> - data-icon="arrow-d"</p>
|
||||
<a href="index.html" data-role="button" data-icon="arrow-d">My button</a>
|
||||
<p><strong>Delete</strong> - data-icon="delete"</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete">My button</a>
|
||||
<p><strong>Plus</strong> - data-icon="plus"</p>
|
||||
<a href="index.html" data-role="button" data-icon="plus">My button</a>
|
||||
<p><strong>Minus</strong> - data-icon="minus"</p>
|
||||
<a href="index.html" data-role="button" data-icon="minus">My button</a>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-role="button" <strong>data-icon="delete"</strong>>Delete</a>
|
||||
</code>
|
||||
|
||||
<p>Creates this button with an icon:</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
|
||||
|
||||
<h2>Icon positioning</h2>
|
||||
<p>By default, icons in buttons are added to the left of the text, but the <code>data-iconpos</code> attribute specifies the icon position: <code>left</code> or <code>right</code> of the text.</p>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="right"</strong>>Delete</a>
|
||||
</code>
|
||||
|
||||
<p>Creates this button with right-aligned icon:</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
|
||||
|
||||
<p>To create an icon-only button that has an icon but no text, set the <code>data-iconpos</code> attribute to <code>notext</code> and the button plugin will hide the text and add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. In this example, we're adding a plus (+) icon and positioning it to the right of the text with our <code>data-</code> attributes on the link.</p>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-role="button" data-icon="delete"<strong> data-iconpos="notext"</strong>>Delete</a>
|
||||
</code>
|
||||
|
||||
<p>Creates this icon-only button:</p>
|
||||
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
|
||||
|
||||
|
||||
<p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code>data-icon</code> value and apply it to the button. You can then write a CSS rule that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
|
|
|
|||
|
|
@ -16,25 +16,23 @@
|
|||
|
||||
<div data-role="content">
|
||||
|
||||
<p>If you have multiple buttons that should sit side-by-side on the same line instead of stacked like the default buttons, wrap the buttons in a container that has a <code>data-inline="true"</code> attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
|
||||
|
||||
<pre><code>
|
||||
<div data-inline="true">
|
||||
<a href="index.html" data-role="button">Cancel</a>
|
||||
<a href="index.html" data-role="button">Save</a>
|
||||
</div>
|
||||
</pre></code>
|
||||
|
||||
<p><strong>Inline</strong> buttons</p>
|
||||
|
||||
<a href="index.html" data-role="button" data-inline="true">Cancel</a>
|
||||
<a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>
|
||||
|
||||
|
||||
<p><strong>Inline toolbar</strong> buttons</p>
|
||||
|
||||
<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>
|
||||
<p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the <a href="content/content-grids.html">content column grids</a> to put normal full-width buttons into 2- or 3-columns.</p>
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
|
|
|
|||
|
|
@ -15,10 +15,22 @@
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<h2>Styling links as buttons</h2>
|
||||
|
||||
<p>In the main content block of a page, you can style any link as a button by adding the <code>data-role="button"</code> to the link. The framework will add the necessary classes to style the link as a button. </p>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-role="button">Link button</a>
|
||||
</code>
|
||||
|
||||
<p><strong>Link</strong> based button example:</p>
|
||||
<a href="index.html" data-role="button">Link button</a>
|
||||
|
||||
<p><strong>Link</strong> based button</p>
|
||||
<a href="index.html" data-role="button">Link element</a>
|
||||
|
||||
<h2>Form buttons</h2>
|
||||
<p>A <code>button</code> element or an <code>input</code> with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> will all be automatically transformed into a custom styled button, no need to add the <code>data-role="button"</code> attribute. </p>
|
||||
<p>Because it's not possible to consistently form buttons consistently across platforms, the framework actually generates a new link-based button for each form button button and hides the original. When a click event fires on a link button, it triggers a click on the original form button.</p>
|
||||
|
||||
|
||||
<p><strong>Button</strong> based button</p>
|
||||
<button>Button element</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -67,10 +67,12 @@
|
|||
|
||||
<p>If you have multiple buttons that should sit side-by-side on the same line instead of stacked like the default buttons, wrap the buttons in a container that has a <code>data-inline="true"</code> attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
|
||||
|
||||
<div data-inline="true">
|
||||
<a href="index.html" data-role="button">Cancel</a>
|
||||
<a href="index.html" data-role="button">Save</a>
|
||||
</div>
|
||||
<pre><code>
|
||||
<div data-inline="true">
|
||||
<a href="index.html" data-role="button">Cancel</a>
|
||||
<a href="index.html" data-role="button">Save</a>
|
||||
</div>
|
||||
</pre></code>
|
||||
|
||||
<h2>Grouping</h2>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,22 +15,16 @@
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<p>Buttons are one of the core widgets in jQuery Mobile and are used within a wide range of other plugins.</p>
|
||||
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<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>
|
||||
<p>Buttons are one of the core widgets in jQuery Mobile and are used within a wide range of other plugins. Buttons that are used for navigation should be coded as links and those that submit forms are coded as <code>button</code> elements -- each will be styled identically by the framework.</p>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li data-role="list-divider">Button examples</li>
|
||||
<li data-role="list-divider">Documentation & examples</li>
|
||||
<li><a href="buttons-types.html">Button markup</a></li>
|
||||
<li><a href="buttons-icons.html">Button icons</a></li>
|
||||
<li><a href="buttons-inline.html">Inline buttons</a></li>
|
||||
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
|
||||
<li><a href="buttons-themes.html">Theming buttons</a></li>
|
||||
<li><a href="api-buttons.html">API documentation</a></li>
|
||||
</ul>
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
|
|
@ -18,7 +18,12 @@
|
|||
|
||||
<div data-role="content">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
table { width:100%; }
|
||||
table caption { text-align:left; font-weight:bold; }
|
||||
table thead th { border-bottom:1px solid #999; border-top:1px solid #999; }
|
||||
table th, td { border-bottom:1px solid #ccc; padding:6px;}
|
||||
</style>
|
||||
|
||||
|
||||
<p>Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. Here is what standard HTML markup looks like by default:</p>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
<p>Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. We don't use CSS resets or a lot of custom styles because standard HTML markup is provides a lot of visual texture out of the box. By taking a light hand with content styling, it gives designers and developers a clean slate to work with instead of fighting against a lot of complex styles. Here is what standard HTML markup looks like by default:</p>
|
||||
|
||||
<a href="content-html.html">View default HTML rendering</a>
|
||||
<a href="content-html.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Default HTML rendering example</a>
|
||||
|
||||
<h2>Collapsible panels</h2>
|
||||
|
||||
|
|
@ -40,13 +40,13 @@
|
|||
</pre></code>
|
||||
|
||||
|
||||
<p>By default, the content will be expaneded. To collapse the content when the page loads, add the <code>data-state="collapsed"</code> attribute to the wrapper.</p>
|
||||
<p>By default, the content will be expanded. To collapse the content when the page loads, add the <code>data-state="collapsed"</code> attribute to the wrapper.</p>
|
||||
|
||||
<code>
|
||||
<div data-role="collapsible" <strong>data-state="collapsed"></strong>
|
||||
</code>
|
||||
|
||||
<p>This will create this widget:</p>
|
||||
<p>This code will create a collapsible widget like this:</p>
|
||||
|
||||
|
||||
<div data-role="collapsible" data-state="collapsed">
|
||||
|
|
@ -56,9 +56,47 @@
|
|||
|
||||
<p>The collapsible content is minimally styled -- we just add a bit of margin between the bar and content but you can add custom styles to tweak the appearance of the collapsible container or heading button.</p>
|
||||
|
||||
<a href="content-collapsible.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Collapsible examples</a>
|
||||
|
||||
|
||||
<h2>Multi-column grids</h2>
|
||||
|
||||
<p>On a mobile device, using multiple column layouts isn't generally recommended because of the narrow screen width but there are times where you may need to place buttons or other small elements side-by-side.The framework provides a simple way to build CSS based columns through the <code>grid</code> block styles. Grids have preset configurations for 2- and 3-column layouts that can be used in any situation that requires columns. The grids don't have any padding, margins, borders or background colors -- they are invisible.</p>
|
||||
|
||||
<p>To build a 2 column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code> and add two child containers inside that are classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second.</p>
|
||||
|
||||
<pre><code>
|
||||
<div class="ui-grid-a">
|
||||
<div class="ui-block-a">Block A</div>
|
||||
<div class="ui-block-b">Block B</div>
|
||||
</div><!-- /grid-a -->
|
||||
</code></pre>
|
||||
<p>This will produce a 50/50% grid for our content. (Note that we've added color swatches to the boxes so you can see them)</p>
|
||||
|
||||
<div class="ui-grid-a">
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-c">Block A</div></div>
|
||||
<div class="ui-block-b"><div class="ui-bar ui-bar-c">Block B</div></div>
|
||||
</div><!-- /grid-a -->
|
||||
|
||||
<p>There is a second grid for a 3 column layout (33/33/33%) that is similar in structure but uses <code>class=grid-b</code> on the parent and 3 child wrappers, each with <code>block-a/b/c</code> for the column child containers.</p>
|
||||
|
||||
<pre><code>
|
||||
<div class="ui-grid-a">
|
||||
<div class="ui-block-a">Block A</div>
|
||||
<div class="ui-block-b">Block B</div>
|
||||
<div class="ui-block-c">Block C</div>
|
||||
</div><!-- /grid-a -->
|
||||
</code></pre>
|
||||
|
||||
<p>This will produce a 33/33/33% grid for our content.</p>
|
||||
|
||||
<div class="ui-grid-b">
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-c">Block A</div></div>
|
||||
<div class="ui-block-b"><div class="ui-bar ui-bar-c">Block B</div></div>
|
||||
<div class="ui-block-c"><div class="ui-bar ui-bar-c">Block C</div></div>
|
||||
</div><!-- /grid-a -->
|
||||
|
||||
<a href="content-collapsible.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Grid examples</a>
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
|
|
@ -36,6 +36,20 @@
|
|||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p><strong>Inline toolbar</strong> buttons</p>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue