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/buttons/buttons-icons.html ADDED

@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Button icons</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 icons</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>Adding Icons to Buttons</h2>
+		<p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p>
+			<p>An icon can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display.  For example, the following markup:</p>
+			<code>
+			&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; <strong> data-icon=&quot;delete&quot;</strong>&gt;Delete&lt;/a&gt;
+			</code>
+			<p>Creates this button with an icon:</p>
+			<a href="index.html" data-role="button" data-icon="delete">Delete</a>
+			<p>A more compact button with the <code> data-inline="true"</code> attribute added to the button:</p>
+			<a href="index.html" data-role="button" data-icon="delete" data-mini="true">Delete</a>
+			<h2>Icon set</h2>
+			<p>The following <code> data-icon</code> attributes can be referenced to create the icons shown below:</p>
+			<p><strong>Left arrow</strong> - data-icon="arrow-l"</p>
+			<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
+			<p><strong>Right arrow</strong> - data-icon="arrow-r"</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>
+			<p><strong>Check</strong> - data-icon="check"</p>
+			<a href="index.html" data-role="button" data-icon="check">My button</a>
+			<p><strong>Gear</strong> - data-icon="gear"</p>
+			<a href="index.html" data-role="button" data-icon="gear">My button</a>
+			<p><strong>Refresh</strong> - data-icon="refresh"</p>
+			<a href="index.html" data-role="button" data-icon="refresh">My button</a>
+			<p><strong>Forward</strong> - data-icon="forward"</p>
+			<a href="index.html" data-role="button" data-icon="forward">My button</a>
+			<p><strong>Back</strong> - data-icon="back"</p>
+			<a href="index.html" data-role="button" data-icon="back">My button</a>
+			<p><strong>Grid</strong> - data-icon="grid"</p>
+			<a href="index.html" data-role="button" data-icon="grid">My button</a>
+			<p><strong>Star</strong> - data-icon="star"</p>
+			<a href="index.html" data-role="button" data-icon="star">My button</a>
+			<p><strong>Alert</strong> - data-icon="alert"</p>
+			<a href="index.html" data-role="button" data-icon="alert">My button</a>
+			<p><strong>Info</strong> - data-icon="info"</p>
+			<a href="index.html" data-role="button" data-icon="info">My button</a>
+			<p><strong>Home</strong> - data-icon="home"</p>
+			<a href="index.html" data-role="button" data-icon="home">My button</a>
+			<p><strong>Search</strong> - data-icon="search"</p>
+			<a href="index.html" data-role="button" data-icon="search">My button</a>
+		<h2>Icon positioning</h2>
+		<p>By default, all icons in buttons are placed to the left of the button text. </p>
+		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Delete</a>
+		<p>This default may be overridden using the <code> data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p>
+<code>
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;right&quot;</strong>&gt;Delete&lt;/a&gt;
+</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>Icons can also be positioned above the text by specifying <code> data-iconpos="top"</code></p>
+		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Delete</a>
+		<p>Or icons can also be positioned below the text by specifying <code> data-iconpos="bottom"</code></p>
+		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Delete</a>
+		<p>You can also create an icon-only button, by setting the <code> data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code> data-iconpos="right"</code> on the previous example with <code> data-iconpos="notext"</code>:</p>
+<code>
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;notext&quot;</strong>&gt;Delete&lt;/a&gt;
+</code>
+		<p>Creates this icon-only button:</p>
+			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
+			<h2>Mini &amp; Inline</h2>
+			<p>The <a href="../forms/forms-all-mini.html">mini</a> and <a href="buttons-inline.html">inline</a> attributes can be added to produce more compact buttons:<p>
+			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="left" data-mini="true" data-inline="true">Delete</a>
+			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right" data-mini="true" data-inline="true">Delete</a>
+			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top" data-mini="true" data-inline="true">Delete</a>
+			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom" data-mini="true" data-inline="true">Delete</a>
+			<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-mini="true" data-inline="true">Delete</a>
+		<h2>Custom Icons</h2>
+		<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: <code>ui-icon-myapp-email</code>. </p>
+		<p>You can then write a CSS rule in your stylesheet that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
+		<p> In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.</p>
+<pre><code>.ui-icon-myapp-email {
+	background-image: url("app-icon-email.png");
+}</code></pre>
+		<p>This will create the standard resolution icon, but many devices now have very high resolution displays, like the retina display on the iPhone 4. To add a HD icon, create an icon that is 36x36 pixels (exactly double the 18 pixel size), and add second rule that uses the <code>-webkit-min-device-pixel-ratio: 2</code> media query to target a rule only to high resolution displays. Specify the background image for the HD icon file and set the background size to 18x18 pixels which will fit the 36 pixel icon into the same 18 pixel space. The media query block can wrap multiple icon rules:</p>
+<pre><code>
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+	.ui-icon-myapp-email {
+		background-image: url("app-icon-email-highres.png");
+		background-size: 18px 18px;
+	}
+	...more HD icon rules go here...
+}
+</code></pre>
+		<h2>Icons and themes</h2>
+		<p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches with <a href="buttons-themes.html">themed buttons</a>.</p>
+		<!-- A themed -->
+		<p><strong>Swatch "A"</strong> themed buttons</p>
+		<div data-role="controlgroup"  data-type="horizontal">
+		<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+		</div>
+		<!-- B themed -->
+		<p><strong>Swatch "B"</strong> themed buttons</p>
+		<div data-role="controlgroup"  data-type="horizontal">
+		<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+		</div>
+		<!-- C themed -->
+		<p><strong>Swatch "C"</strong> themed buttons</p>
+		<div data-role="controlgroup"  data-type="horizontal">
+		<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">My button</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 data-theme="a"><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-inline.html ADDED

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Inline 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>Inline buttons</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>Inline buttons</h2>
+		<p>By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:</p>
+		<a href="index.html" data-role="button">Button</a>
+		<p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code> data-inline="true"</code> attribute to the button:</p>
+		<a href="index.html" data-role="button" data-inline="true">Button</a>
+		<p>If you have multiple buttons that should sit side-by-side on the same line, add the <code> data-inline="true"</code> attribute to each button. 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>
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Cancel&lt;/a&gt;
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
+</code></pre>
+		<p>The result is this:</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>Adding the <code>data-mini="true"</code> to the inline buttons creates a more compact version:</p>
+			<a href="index.html" data-role="button" data-inline="true" data-mini="true">Cancel</a>
+			<a href="index.html" data-role="button" data-theme="b" data-inline="true" data-mini="true">Save</a>
+		<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>
+		<h2>Icon example</h2>
+		<p>When an <a href="buttons-icons.html">icon</a> is added to an inline button, the button will grow wider to accommodate the icon:<p>
+			<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>
+			<a href="index.html" data-role="button" data-icon="check" data-theme="b" data-inline="true">Save</a>
+			<p>A mini version of the same:<p>
+			<a href="index.html" data-role="button" data-icon="delete" data-inline="true" data-mini="true">Cancel</a>
+			<a href="index.html" data-role="button" data-icon="check" data-theme="b" data-inline="true" data-mini="true">Save</a>
+		</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 data-theme="a"><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-methods.html ADDED

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Button methods</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" class="ui-btn-active">Methods</a></li>
+			<li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
+		</ul>
+			<p>The following methods apply only to <strong>form buttons</strong>.  Link-based buttons do not have any associated methods.</p>
+		<dl>
+			<dt><code>enable</code> enable a disabled form button</dt>
+			<dd>
+				<pre><code>
+$('[type='submit']').button('enable');
+				</code></pre>
+			</dd>
+			<dt><code>disable</code> disable a form button</dt>
+			<dd>
+				<pre><code>
+$('[type='submit']').button('disable');
+				</code></pre>
+			</dd>
+			<dt><code>refresh</code> update the form button</dt>
+			<dd>
+			<p>If you manipulate a form button via JavaScript, you must call the refresh method on it to update the visual styling.</p>
+			<pre><code>
+$('[type='submit']').button('refresh');
+				</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-options.html ADDED

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Button options</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" class="ui-btn-active">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">Events</a></li>
+   		</ul>
+			<p>The following options apply to <strong>all buttons</strong>:</p>
+		<dl>
+			<dt><code>corners</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: true</p>
+				<p>Applies the theme button border-radius if set to true. This option is also exposed as a data attribute: <code>data-corners=&quot;false&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ corners: "false" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-corners="false">No rounded corners</a>
+			</dd>
+			<dt><code>icon</code> <em>string</em></dt>
+			<dd>
+				<p class="default">default: null</p>
+				<p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a>. This option is also exposed as a data attribute: <code>data-icon=&quot;star&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ icon: "star" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-icon="star">Star icon</a>
+			</dd>
+			<dt><code>iconpos</code> <em>string</em></dt>
+			<dd>
+				<p class="default">default: "left"</p>
+				<p>Positions the icon in the button. Possible values: left, right, top, bottom, none, notext. The notext value will display an icon-only button with no text feedback. This option is also exposed as a data attribute: <code>data-iconpos=&quot;left&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ iconpos: "right" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-icon="star" data-iconpos="right">Star icon</a>
+			</dd>
+			<dt><code>iconshadow</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: true</p>
+				<p>Applies the theme shadow to the button's icon if set to true. This option is also exposed as a data attribute: <code>data-iconshadow=&quot;false&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ iconshadow: "false" }</strong>);</code></pre>
+				<a href="#" data-role="button"  data-icon="star" data-iconshadow="false">No icon shadow</a>
+			</dd>
+			<dt><code>inline</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: null (false)</p>
+				<p>If set to true, this will make the button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the button is full width, regardless of the feedback content. Possible values: true, false. This option is also exposed as a data attribute: <code>data-inline=&quot;true&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ inline: "true" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-inline="true">Inline</a>
+			</dd>
+			<dt><code>mini</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: null (false)</p>
+				<p>If set to true, this will display a more compact version of the button that uses less vertical height. Possible values: true, false. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ mini: "true" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-mini="true">Inline</a>
+			</dd>
+			<dt><code>shadow</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: true</p>
+				<p>Applies the drop shadow style to the button if set to true. This option is also exposed as a data attribute: <code>data-shadow=&quot;false&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ shadow: "false" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-shadow="false">No button shadow</a>
+			</dd>
+			<dt><code>theme</code> <em>string</em></dt>
+			<dd>
+				<p class="default">default: null, inherited from parent</p>
+				<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ theme: "a" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-theme="a">Theme A</a>
+			</dd>
+		</dl>
+		<div class="ui-body ui-body-e">
+		<p>The following option applies only to <strong>form buttons</strong>, which are automatically initialized by the framework:</p>
+		</div>
+		<dl>
+			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
+			<dd>
+				<p class="default">default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"</p>
+				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as form buttons. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+   <strong>$.mobile.button.prototype.options.initSelector = ".myButtons";</strong>
+});
+</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>