RubyGems - RubyApp - Versions diffs - 0.6.59 → 0.6.60 - Mend

RubyApp 0.6.59 → 0.6.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (870) hide show

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/api/themes.html ADDED

@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Framework - Static Containers, States</title>
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+<div data-role="page" class="type-interior">
+	<div data-role="header" data-theme="f">
+		<h1>Themes</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div>
+	<div data-role="content">
+	<div class="content-primary">
+		<h2>Theming overview</h2>
+			<p>The theming system used in jQuery Mobile is similar to the ThemeRoller system in jQuery UI with a few important improvements:</p>
+			<ul>
+				<li>It takes advantage of <strong>CSS3 properties</strong> to add rounded corners, box and text shadow and gradients instead of images, allowing the theme file to be very lightweight and reducing server requests.</li>
+				<li>Themes include multiple <strong>color "swatches"</strong> &mdash; each consisting of a header bar, content body, and button states that can be freely mixed and matched to create visual texture &mdash; to make richer designs possible.</li>
+				<li><strong>Open-ended theming</strong> allows for up to 26 unique swatches per theme, to add almost unlimited variety to designs.</li>
+				<li>All backgrounds now use <strong>CSS3 gradients</strong> to dramatically reduce file size and number of server requests.</li>
+				<li>There is a <strong>simplified icon set</strong> in a sprite to reduce image weight.</li>
+			</ul>
+		<h2>ThemeRoller</h2>
+		<a href="http://www.jquerymobile.com/themeroller" rel="external"><img src="../_assets/images/themroller-mobile-logo.png" width="250" style="float:right; margin-left:25px;" alt="Themroller Mobile Logo"></a>
+		The easiest way to create custom themes is with the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller tool</a>. It allows you to build a theme, then download a custom CSS file, ready to be dropped into your project.
+		<h2>Themes &amp; swatches</h2>
+		<p>The theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects. </p>
+		<p>Each theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font <code>text-shadow</code>. </p>
+		<p>The default theme includes 5 swatches 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.  Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations. </p>
+		<p>Most theme changes can be done using ThemeRoller, but it's also simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors as you see fit.</p>
+		<h3>Bars</h3>
+		<p>The default theme contains the following five bar styles:</p>
+		<div class="swatch-preview">
+			<div class="ui-bar ui-bar-a">Bar A - <a href="#" data-role="none" class="ui-link">Link</a></div>
+			<div class="ui-bar ui-bar-b">Bar B - <a href="#" data-role="none" class="ui-link">Link</a></div>
+			<div class="ui-bar ui-bar-c">Bar C - <a href="#" data-role="none" class="ui-link">Link</a></div>
+			<div class="ui-bar ui-bar-d">Bar D - <a href="#" data-role="none" class="ui-link">Link</a></div>
+			<div class="ui-bar ui-bar-e">Bar E - <a href="#" data-role="none" class="ui-link">Link</a></div>
+		</div><!-- end swatch-bars -->
+		<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about <a href="../toolbars/bars-themes.html">toolbar theming</a>.</p>
+		<h3>Content Blocks</h3>
+		<p>The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme. </p>
+		<div class="swatch-preview">
+			<div class="ui-body ui-body-a">Block A - <a href="#">Link</a></div>
+			<div class="ui-body ui-body-b">Block B - <a href="#">Link</a></div>
+			<div class="ui-body ui-body-c">Block C - <a href="#">Link</a></div>
+			<div class="ui-body ui-body-d">Block D - <a href="#">Link</a></div>
+			<div class="ui-body ui-body-e">Block E - <a href="#">Link</a></div>
+		</div><!-- end swatch-bars -->
+		<p>If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the default header "a", as shown here:</p>
+			<div data-role="header">
+				<a href="#" data-icon="arrow-l">Back</a>
+				<h1>Default Header</h1>
+			</div>
+			<div class="ui-body ui-body-c">
+				<h3>Default Theme Content Header</h3>
+				<p>This is the default content color swatch 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" />
+				     <fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
+				     	<legend>Cache settings:</legend>
+				         	<input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
+				         	<label for="radio-choice-a1">On</label>
+				         	<input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off"  />
+				         	<label for="radio-choice-b1">Off</label>
+				    </fieldset>
+				<a href="#" data-role="button" data-inline="true">Button</a>
+			</div>
+			<div class="ui-bar ui-bar-a">
+				<div data-role="controlgroup" data-type="horizontal" >
+					<a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a>
+				</div><!-- /controlgroup -->
+			</div>
+		<p>Learn more about <a href="../content/content-themes.html">content theming</a>.</p>
+		<h2>Lists &amp; Buttons</h2>
+		<p>Each swatch also includes default styles for interactive elements like list items and buttons.</p>
+		<ul data-role="listview" data-inset="true" data-theme="a">
+			<li><a href="index.html">List item</a></li>
+			<li><a href="index.html">List item</a></li>
+		</ul>
+		<ul data-role="listview" data-inset="true" data-theme="b">
+			<li><a href="index.html">List item</a></li>
+			<li><a href="index.html">List item</a></li>
+		</ul>
+		<ul data-role="listview" data-inset="true" data-theme="c">
+			<li><a href="index.html">List item</a></li>
+			<li><a href="index.html">List item</a></li>
+		</ul>
+		<ul data-role="listview" data-inset="true" data-theme="d">
+			<li><a href="index.html">List item</a></li>
+			<li><a href="index.html">List item</a></li>
+		</ul>
+		<ul data-role="listview" data-inset="true" data-theme="e">
+			<li><a href="index.html">List item</a></li>
+			<li><a href="index.html">List item</a></li>
+		</ul>
+		<p>A button is included for each swatch in the theme. Each button has styles for normal, hover/focus and pressed states.</p>
+		<div class="swatch-preview">
+			<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Button A</a>
+			<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 -->
+		<p>By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box. Thus, the button is visually integrated into the parent theme as shown here:</p>
+		<div class="swatch-preview">
+			<div data-role="header" data-theme="a"><h1>Bar A</h1><a href="index.html" data-icon="arrow-l">Button A</a></div>
+			<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 E</a></div>
+		</div><!-- end swatch-bars -->
+		<p>This default behavior makes it 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.</p>
+		<p>If you want to add visual emphasis to a button, an alternate swatch color can be set by adding a <code> data-theme="a"</code> to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.</p>
+		<div class="swatch-bars">
+			<div data-role="header" data-theme="a" class="ui-bar" >
+				<div><!-- wrapper div to have control over butttons -->
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
+				</div>
+			</div>
+			<div data-role="header" data-theme="b" class="ui-bar" >
+				<div><!-- wrapper div to have control over butttons -->
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
+				</div>
+			</div>
+			<div data-role="header" data-theme="c" class="ui-bar" >
+				<div><!-- wrapper div to have control over butttons -->
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
+				</div>
+			</div>
+			<div data-role="header" data-theme="d" class="ui-bar" >
+				<div><!-- wrapper div to have control over butttons -->
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
+				</div>
+			</div>
+			<div data-role="header" data-theme="e" class="ui-bar" >
+				<div><!-- wrapper div to have control over butttons -->
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
+				</div>
+			</div>
+		</div><!-- end swatch-bars -->
+<p>Learn more about <a href="../lists/lists-themes.html">list theming</a> and <a href="../buttons/buttons-themes.html">button theming</a>.</p>
+		<h3>Global "Active" state</h3>
+		<p>The jQuery Mobile framework uses a swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the <code>ui-btn-active</code> style rules.</p>
+		<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" />
+	         	<label for="radio-choice-a">On</label>
+	         	<input type="radio" name=" radio-choice-a" id="radio-choice-b" value="off"  />
+	         	<label for="radio-choice-b">Off</label>
+	    </fieldset>
+		<h3>Icons</h3>
+		<p>There is a core set of <a href="../buttons/buttons-icons.html">standard icons</a> included in the framework that can be assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>
+		<h3>Theme classes</h3>
+		<p>Assigning color swatches through the <code> data-theme</code> attribute is one way to leverage the theme system, but it's also possible to apply any of the theme swatches directly to your markup through classes to apply the colors, textures and font formatting of your theme to any markup. This is especially useful when creating your own custom layout elements or UI widgets. Here are a few common theme classes, but many more are available in the theme stylesheet:</p>
+		<dl>
+			<dt><code>ui-bar-(a-z)</code></dt>
+			<dd>Applies the toolbar theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-bar</code> structural class to add the standard bar padding styles.</dd>
+			<dt><code>ui-body-(a-z)</code></dt>
+			<dd>Applies the content body theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-body</code> structural class to add the standard content block padding styles. </dd>
+			<dt><code>ui-btn-up-(a-z)</code></dt>
+			<dd>Applies the button/clickable element theme styles for the selected swatch letter. Commonly used in with the <code>ui-btn-hover-(a-z)</code> and <code>ui-btn-down-(a-z)</code> interaction class states to provide visual feedback and <code>ui-btn-active</code> to indicate the selected or "on" state.</dd>
+			<dt><code>ui-corner-all</code></dt>
+			<dd>Applies the theme's global border-radius for rounded corners and is used for container or grouped items in the framework (inset lists, radiobutton sets). There are additional classes for all the possible combinations of rounded corners, for example: <code>ui-corner-tl</code> (top left only), <code>-top</code> (both top corners), <code>-left</code> (both left corners),  etc. A second full set of corner classes is provided for buttons so these can have a different corner radius. These use classes with a similar naming convention, but with "btn-corner" instead of "corner", like this: <code>.ui-<strong>btn-corner</strong>-all</code>.</dd>
+			<dt><code>ui-shadow</code></dt>
+			<dd>Applies the theme's global drop shadow to any element using CSS <code>box-shadow</code> property. </dd>
+			<dt><code>ui-disabled</code></dt>
+			<dd>Applies the disabled look and feel which essentially reduces the opacity of any element with this class to 30%, hides the cursor, and sets <code>pointer-events: none;</code> which prevents any interaction in many modern browsers.</dd>
+		</dl>
+			<h3>Overriding themes</h3>
+			<p>The themes are meant as a solid starting point, but are meant to be customized. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify. The set of of theme classes (global) and semantic structural classes (widget-specific) added to elements provide a rich set of possible selectors to target style overrides against. We recommend adding an external stylesheet to the <code>head</code>, placed <strong>after</strong> the structure and theme stylesheet references, that contain all your style overrides. This allows you to easily update to newer versions of the library because overrides are kept separate from the library code.</p>
+		<p><strong>Learn more</strong> about theming individual components:</p>
+		<ul data-role="listview" data-inset="true">
+			<li><a href="../pages/pages-themes.html">Page theming</a></li>
+			<li><a href="../toolbars/bars-themes.html">Toolbar theming</a></li>
+			<li><a href="../content/content-themes.html">Content theming</a></li>
+			<li><a href="../buttons/buttons-themes.html">Button theming</a></li>
+            <li><a href="../forms/forms-themes.html">Form theming</a></li>
+            <li><a href="../lists/lists-themes.html">List theming</a></li>
+		</ul>
+	</div><!--/content-secondary -->
+	<div class="content-secondary ui-body-d">
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				<h3>More in this section</h3>
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+					<li data-role="list-divider">API</li>
+					<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
+					<li><a href="../../docs/api/events.html">Events</a></li>
+					<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
+					<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
+					<li data-theme="a"><a href="../../docs/api/themes.html">Theme framework</a></li>
+					</ul>
+		</div>
+	</div>
+</div><!-- /content -->
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011-12 The jQuery Foundation</p>
+</div>
+</div><!-- /page -->
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/buttons/api-buttons.html ADDED

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Buttons</title>
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+<div data-role="page" class="type-interior">
+	<div data-role="header" data-theme="f">
+		<h1>Button API</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div><!-- /header -->
+	<div data-role="content" data-theme="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><!-- /content -->
+</div><!-- /page -->
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/buttons/buttons-events.html ADDED

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Button events</title>
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+	<div data-role="page" class="type-interior">
+		<div data-role="header" data-theme="f">
+		<h1>Button basics</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div><!-- /header -->
+	<div data-role="content">
+		<div class="content-primary">
+		<form action="#" method="get">
+			<h2>Button basics</h2>
+      <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+			<li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
+			<li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
+			<li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+			<li><a href="buttons-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+		</ul>
+			<p>Bind events directly to the <code>a</code>, <code>input</code>, or <code>button</code> element.  Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+			<pre><code>
+$( ".myButton" ).bind( "click", function(event, ui) {
+  ...
+});
+</code></pre>
+			<p>The <strong>form button</strong> plugin has the following custom events:</p>
+	<dl>
+		<dt><code>create</code> triggered when a form button is created</dt>
+		<dd>
+			<pre><code>
+$('[type='submit']').button({
+   create: function(event, ui) { ... }
+});
+			</code></pre>
+			</dd>
+	</dl>
+	</form>
+	</div><!--/content-primary -->
+	<div class="content-secondary">
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				<h3>More in this section</h3>
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+					<li data-role="list-divider">Buttons</li>
+					<li data-theme="a"><a href="buttons-types.html">Button basics</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>
+				</ul>
+		</div>
+	</div>
+</div><!-- /content -->
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011-12 The jQuery Foundation</p>
+</div>
+</div><!-- /page -->
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/buttons/buttons-grouped.html ADDED

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Grouped Buttons</title>
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.0.css" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../docs/_assets/js/jqm-docs.js"></script>
+	<script src="../../js/jquery.mobile-1.1.0.js"></script>
+</head>
+<body>
+<div data-role="page" class="type-interior">
+	<div data-role="header" data-theme="f">
+		<h1>Grouped</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+	</div><!-- /header -->
+	<div data-role="content">
+		<div class="content-primary">
+		<h2>Grouped buttons</h2>
+		<p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks 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 &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
+<pre><code>
+&lt;div data-role=&quot;controlgroup&quot;&gt;
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Yes&lt;/a&gt;
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;No&lt;/a&gt;
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Maybe&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+		<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>By adding the <code>data-type="horizontal"</code> attribute to the <code>controlgroup</code> container, you can swap 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 number of buttons or the overall text length is too wide for the screen.)
+		<p>Horizontal 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>Mini horizontal grouped buttons by adding <code>data-mini="true</code> to the controlgroup:</p>
+		<div data-role="controlgroup" data-type="horizontal" data-mini="true">
+			<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>Horizontal grouped buttons with icons:</p>
+		<div data-role="controlgroup" data-type="horizontal" >
+			<a href="index.html" data-role="button" data-icon="plus">Add</a>
+			<a href="index.html" data-role="button" data-icon="delete">Delete</a>
+		</div>
+		<p>Mini horizontal grouped buttons with icons by adding <code>data-mini="true</code> to the controlgroup::</p>
+		<div data-role="controlgroup" data-type="horizontal" data-mini="true">
+			<a href="index.html" data-role="button" data-icon="plus">Add</a>
+			<a href="index.html" data-role="button" data-icon="delete">Delete</a>
+		</div>
+		<p>Horizontal 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">Delete</a>
+		</div>
+	</div><!--/content-primary -->
+	<div class="content-secondary">
+		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				<h3>More in this section</h3>
+				<ul data-role="listview" data-theme="c" data-dividertheme="d">
+					<li data-role="list-divider">Buttons</li>
+					<li><a href="buttons-types.html">Button basics</a></li>
+					<li><a href="buttons-icons.html">Button icons</a></li>
+					<li><a href="buttons-inline.html">Inline buttons</a></li>
+					<li data-theme="a"><a href="buttons-grouped.html">Grouped buttons</a></li>
+					<li><a href="buttons-themes.html">Theming buttons</a></li>
+				</ul>
+		</div>
+	</div>
+</div><!-- /content -->
+<div data-role="footer" class="footer-docs" data-theme="c">
+		<p>&copy; 2011-12 The jQuery Foundation</p>
+</div>
+</div><!-- /page -->
+</body>
+</html>