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/toolbars/docs-bars.html ADDED

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Toolbar Basics</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>Toolbar 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">
+	<h2>Toolbar types</h2>
+	<p>In jQuery Mobile, there are two standard types of toolbars: Headers and Footers. </p>
+<ul>	<li>The <a href="docs-headers.html"><strong>Header bar </strong></a> serves as the page title, is usually the first element inside each <a href="../pages/page-anatomy.html">mobile page</a>, and typically contains a page title and up to two buttons.</li>
+	<li>The <a href="docs-footers.html"><strong>Footer bar</strong></a> is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.</li>
+</ul>
+	<p>It's very common to have a horizontal navigation or tab bar inside the header or footer; jQuery Mobile includes a <a href="docs-navbar.html"><strong>navbar widget </strong></a> that turns an unordered list of links into a horizontal button bar, which works well in these instances.</p>
+	<p>View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to toolbars.</p>
+			<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 <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> fixes the toolbars to either the top or bottom of the viewport on browsers that support CSS fixed positioning (which includes most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others). In browsers that don't support fixed positioning, the toolbars will fall back to static, inline position in the page.</p>
+			<p> When tap-toggling is enabled, 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. One caveat is that fixed toolbars never truly hide, but toggle between fixed and static positioning. This means that if you're at the top of a page, you can't tap-toggle a header toolbar out of view, as it instead toggles into its spot in the document flow at the top of the page. The same goes for fixed footers when scrolled to the very bottom of a document.</p>
+			<p>To set this behavior on a header or footer, add the <code> data-position="fixed"</code> attribute to the header or footer element.</p>
+			<p>A <a href="bars-fullscreen.html"><strong>"fullscreen" position mode</strong></a> works just like the fixed mode except that the toolbars overlay the page content, rather than reserving a place in the document when not in fixed mode. This is useful for immersive apps like photo or video viewers where you want the content to fill the whole screen and toolbars can be hidden or 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>
+				</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">Toolbars</li>
+								<li data-theme="a"><a href="docs-bars.html">Toolbar basics</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="docs-navbar.html">Navbars</a></li>
+								<li><a href="bars-fixed.html">Fixed positioning</a></li>
+								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+								<li><a href="bars-themes.html">Theming toolbars</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/toolbars/docs-footers.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 - Footer Configuration</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>Footers</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>Footer bar structure</h2>
+			<p>The <code>footer</code> bar has the same basic structure as the <a href="docs-headers.html">header</a> except it uses the <code> data-role</code> attribute value of <code>footer</code>. </p>
+<div class="highlight">
+<pre>
+<span class="nt">&lt;div</span> <strong><span class="na">data-role=</span><span class="s">"footer"</span></strong><span class="nt">&gt;</span>
+	<span class="nt">&lt;h4&gt;</span>Footer content<span class="nt">&lt;/h4&gt;</span>
+<span class="nt">&lt;/div&gt;</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">
+				<h4>Footer content</h4>
+			</div>
+			<p>The page footer is very similar to the header in terms of options and configuration. The primary difference is 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>Since footers do not have the same prescriptive markup conventions as headers, we recommend using layout <a href="../content/content-grids.html">grids</a> or writing custom styles to achieve the design you want.</p>
+			<h2>Adding buttons</h2>
+			<p>Any link or valid <a href="../buttons/buttons-types.html">button markup</a> added to the footer will automatically be turned into a button. 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 it contains.  </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>
+<pre><code>
+&lt;div data-role=&quot;footer&quot; class=&quot;ui-bar&quot;&gt;
+	&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;plus&quot;&gt;Add&lt;/a&gt;
+	&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-u&quot;&gt;Up&lt;/a&gt;
+	&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-d&quot;&gt;Down&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+			<p>This creates this toolbar with buttons sitting in a row</p>
+			<div data-role="footer" class="ui-bar">
+				<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>Note that <code>.ui-bar</code> should not be added to header or footer bars that span the full width of the page, as the additional padding will cause a full-width element to break out of its parent container. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and apply the padding to that element.</p>
+			<p>To group buttons together into a button set, wrap the links in a wrapper with <code> data-role=&quot;controlgroup&quot;</code> and <code>data-type=&quot;horizontal&quot;</code> attributes.</p>
+<code>&lt;div data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot;&gt;</code>
+			<p>This creates a grouped set of buttons:</p>
+			<div data-role="footer" class="ui-bar">
+				<div data-role="controlgroup" data-type="horizontal">
+					<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><a href="../forms/forms-all.html">Forms</a> elements and other content can also be added to toolbars. Here is an example of a <a href="../forms/selects/index.html">select</a> menu inside a footer bar. We recommend using <a href="../forms/forms-all-mini.html" >mini-sized</a> form elements in toolbars by adding the <code>data-mini="true"</code> attribute:</p>
+			<div data-role="footer" class="ui-bar">
+				<label for="select-choice-1">Shipping:</label>
+				<select name="select-choice-1" id="select-choice-1" data-theme="a" data-mini="true">
+					<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>Fixed &amp; Persistent footers</h2>
+					<p>In situations where the footer is a global navigation element, you may want it to appear <a href="bars-fixed.html">fixed</a> so it doesn't scroll out of view. It's also possible to make a fixed toolbar <a href="footer-persist-d.html">persistent</a> so it appears to not move between <a href="../pages/page-transitions.html">page transitions</a>. This can be accomplished by using the persistent footer feature included in jQuery Mobile.</p>
+					<p>To make a footer persistent between transitions, add the <code>data-id</code> attribute to the footer of all relevant 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. <strong>This effect will only work correctly if the header and footer toolbars are set to <code>data-position="fixed"</code> so they are in view during the transition.</strong></p>
+						</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">Toolbars</li>
+										<li><a href="docs-bars.html">Toolbar basics</a></li>
+										<li><a href="docs-headers.html">Header bars</a></li>
+										<li data-theme="a"><a href="docs-footers.html">Footer bars</a></li>
+										<li><a href="docs-navbar.html">Navbars</a></li>
+										<li><a href="bars-fixed.html">Fixed positioning</a></li>
+										<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+										<li><a href="bars-themes.html">Theming toolbars</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/toolbars/docs-headers.html ADDED

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Header Bars</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>Headers</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>Header structure</h2>
+			<p>The <code>header</code> is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the the left and/or right of the title for navigation or actions. Headers can optionally be positioned as <a href="bars-fixed.html">fixed</a> so they remain at the top of the screen at all times instead of scrolling with the page.</p>
+			<p>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>
+<span class="nt">&lt;div</span> <strong><span class="na">data-role=</span><span class="s">"header"</span></strong><span class="nt">&gt;</span>
+	<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+</pre>
+</div>
+			<h2>Default header features</h2>
+			<p>The <code>header</code> toolbar is 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">
+				<h1>Page title</h1>
+			</div>
+			<h2>Adding buttons</h2>
+			<p>In the standard header configuration, there are slots for 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 it contains. </p>
+			<h3>Default button positioning</h3>
+			<p>The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order. </p>
+<pre><code>
+&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;&gt;
+	&lt;a href=&quot;index.html&quot; data-icon=&quot;delete&quot;&gt;Cancel&lt;/a&gt;
+	&lt;h1&gt;Edit Contact&lt;/h1&gt;
+	&lt;a href=&quot;index.html&quot; data-icon=&quot;check&quot;&gt;Save&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+			<div data-role="header">
+				<a href="index.html" data-icon="delete">Cancel</a>
+				<h1>Edit Contact</h1>
+				<a href="index.html" data-icon="check">Save</a>
+			</div>
+			<h3>Making buttons visually stand out</h3>
+			<p>Buttons automatically adopt the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out. Here, we add the <code> data-theme</code> attribute and set the color swatch for the button to "b" to make the "Save" button pop.</p>
+			<pre><code>
+&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;&gt;
+	&lt;a href=&quot;index.html&quot; data-icon=&quot;delete&quot;&gt;Cancel&lt;/a&gt;
+	&lt;h1&gt;Edit Contact&lt;/h1&gt;
+	&lt;a href=&quot;index.html&quot; data-icon=&quot;check&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+			<div data-role="header">
+				<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>Controlling button position with classes</h3>
+			<p>The button position can also be controlled by adding classes to the button anchors, rather than relying on source order. This is especially useful if 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><code>
+&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;&gt;
+	&lt;h1&gt;Page Title&lt;/h1&gt;
+	&lt;a href=&quot;index.html&quot; data-icon=&quot;gear&quot; class=&quot;ui-btn-right&quot;&gt;Options&lt;/a&gt;
+&lt;/div&gt;
+</code></pre>
+</div>
+			<div data-role="header" >
+				<h1>Page Title</h1>
+				<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
+			</div>
+				<h3>Adding buttons to toolbars without heading</h3>
+			<p>The heading in the header bar has some margin that will give the bar its height. If you choose not to use a heading, you will need to add an element with <code>class="ui-title"</code> so that the bar can get the height and display correctly.</p>
+<div class="highlight">
+<pre><code>
+&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;&gt;
+	&lt;a href=&quot;index.html&quot; data-icon=&quot;gear&quot; class=&quot;ui-btn-right&quot;&gt;Options&lt;/a&gt;
+	&lt;span class=&quot;ui-title&quot; /&gt;
+&lt;/div&gt;
+</code></pre>
+</div>
+			<div data-role="header" >
+				<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
+				<span class="ui-title" />
+			</div>
+		<h2>Adding Back buttons</h2>
+		<p>jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app webview. The framework automatically generates a "back" button on a header when the page plugin's <code>addBackBtn</code> option is true. This can also be set via markup if the page div has a <code>data-add-back-btn="true"</code> attribute. </p>
+		<p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page. This will allow the feature to work for users in C-Grade browsers.</strong></p>
+                <p>If you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute.</p>
+		<h2>Customizing the back button text</h2>
+		<p>If you'd like to configure the back button text, you can either use the <code>data-back-btn-text="previous"</code> attribute on your page element, or set it programmatically via the page plugin's options: <br /><code>$.mobile.page.prototype.options.backBtnText = "previous";</code></p>
+		<h3>Default back button style</h3>
+		<p>If you'd like to configure the back button role-theme, you can use: <br /><code>$.mobile.page.prototype.options.backBtnTheme = "a";</code><br />
+		If you're doing this programmatically, set this option inside the mobileinit event handler.</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 any container, such as <code>div</code>. The plugin won't apply the automatic button logic to the wrapped content inside the header container so you can write custom styles for laying out the content in your header.</p>
+			<p>It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the <code>ui-bar</code> class to apply standard bar padding and add the <code>ui-bar-b</code> class to assign the bar swatch styles from your theme. (The "b" can be any swatch letter.)</p>
+			<pre><code>
+&lt;div <strong>class=&quot;ui-bar ui-bar-b&quot;</strong>&gt;
+	&lt;h3&gt;I&#x27;m just a div with bar classes and a &lt;a href=&quot;#&quot; data-role=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/h3&gt;
+&lt;/div&gt;
+			</code></pre>
+			<p>This will produce this bar:</p>
+				<div class="ui-bar ui-bar-b">
+					<h3>I'm just a div with bar classes and a mini inline <a href="#" data-role="button" data-inline="true" data-mini="true">Button</a></h3>
+				</div>
+				<p>Note that <code>.ui-bar</code> should not be added to header or footer bars that span the full width of the page, as the additional padding will cause a full-width element to break out of its parent container. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and apply the padding to that element instead.</p>
+				<p>By writing some simple styles, it's easy to build message bars like this:</p>
+					<!-- Yes, the inline styles aren't recommended in a real system but they are used to simply illustrate how to tweak CSS -->
+					<div class="ui-bar ui-bar-e">
+						<h3 style="display:inline-block; width:92%; margin-top:5px;">This is an alert message. </h3><div style="display:inline-block; width:8%; margin-top:0px;"><a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Dismiss</a></div><p style="font-size:85%; margin:-.3em 0 1em;">And here's some additional text in a paragraph.</p>
+					</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">Toolbars</li>
+								<li><a href="docs-bars.html">Toolbar basics</a></li>
+								<li data-theme="a"><a href="docs-headers.html">Header bars</a></li>
+								<li><a href="docs-footers.html">Footer bars</a></li>
+								<li><a href="docs-navbar.html">Navbars</a></li>
+								<li><a href="bars-fixed.html">Fixed positioning</a></li>
+								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+								<li><a href="bars-themes.html">Theming toolbars</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>