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

RubyApp 0.6.59 → 0.6.60

Files changed (870) hide show

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/forms/textinputs/methods.html ADDED

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Text Input 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="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<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>Text inputs</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>Text inputs</h2>
+			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
+				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
+				<li><a href="methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+			</ul>
+			<p>The text input plugin has the following methods:</p>
+		<dl>
+			<dt><code>enable</code> enable a disabled text input</dt>
+			<dd>
+				<pre><code>
+$('.selector').textinput('enable');
+				</code></pre>
+			</dd>
+			<dt><code>disable</code> disable a text input</dt>
+			<dd>
+				<pre><code>
+$('.selector').textinput('disable');
+				</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">Form elements</li>
+					<li><a href="../docs-forms.html">Form basics</a></li>
+					<li><a href="../forms-all.html">Form element gallery</a></li>
+					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+					<li data-theme="a"><a href="index.html">Text inputs</a></li>
+					<li><a href="../search/">Search input</a></li>
+					<li><a href="../slider/">Slider</a></li>
+					<li><a href="../switch/">Flip toggle switch</a></li>
+					<li><a href="../radiobuttons/">Radio buttons</a></li>
+					<li><a href="../checkboxes/">Checkboxes</a></li>
+					<li><a href="../selects/">Select menus</a></li>
+					<li><a href="../forms-themes.html">Theming forms</a></li>
+					<li><a href="../forms-all-native.html">Native form elements</a></li>
+					<li><a href="../forms-sample.html">Submitting forms</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/forms/textinputs/options.html ADDED

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Text Input 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="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<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>Text inputs</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>Text inputs</h2>
+			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
+				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
+				<li><a href="options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
+				<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
+			</ul>
+			<p>The text input plugin has the following options:</p>
+		<dl>
+			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
+			<dd>
+				<p class="default">default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</p>
+				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as textinputs. 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.textinput.prototype.options.initSelector = ".myInputs";</strong>
+});
+</code></pre>
+			</dd>
+			<dt><code>mini</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: false</p>
+				<p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>
+				<pre><code>$('.selector').textinput(<strong>{ mini: "true" }</strong>);</code></pre>
+			</dd>
+			<dt><code>preventFocusZoom</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: true on iOS platforms</p>
+				<p>This option disables page zoom temporarily when a custom input is focused, which prevents iOS devices from zooming the page into the input. By default, iOS often zooms into form controls, and the behavior is often unnecessary and intrusive in mobile-optimized layouts. This option is also exposed as a data attribute: <code>data-prevent-focus-zoom=&quot;true&quot;</code></p>
+				<pre><code>$('input').textinput(<strong>{ preventFocusZoom: true }</strong>);</code></pre>
+			</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>$('.selector').textinput(<strong>{ theme: "a" }</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">Form elements</li>
+					<li><a href="../docs-forms.html">Form basics</a></li>
+					<li><a href="../forms-all.html">Form element gallery</a></li>
+					<li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
+					<li data-theme="a"><a href="index.html">Text inputs</a></li>
+					<li><a href="../search/">Search input</a></li>
+					<li><a href="../slider/">Slider</a></li>
+					<li><a href="../switch/">Flip toggle switch</a></li>
+					<li><a href="../radiobuttons/">Radio buttons</a></li>
+					<li><a href="../checkboxes/">Checkboxes</a></li>
+					<li><a href="../selects/">Select menus</a></li>
+					<li><a href="../forms-themes.html">Theming forms</a></li>
+					<li><a href="../forms-all-native.html">Native form elements</a></li>
+					<li><a href="../forms-sample.html">Submitting forms</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/index.html ADDED

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery UI Mobile Framework - Documentation</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>
+	<!-- Need to get a proper redirect hooked up. Blech. -->
+	<meta http-equiv="refresh" content="0;url=../index.html">
+</head>
+<body>
+	<div data-role="page" class="type-index">
+<div data-role="header" data-theme="f">
+	<h1>jQuery Mobile Docs</h1>
+	<a href="../index.html" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>
+</div>
+<div data-role="content">
+<p>Nothing to see here folks.</p>
+<a href="../index.html" data-role="button">View the documentation home page</a>
+</div>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - Lists Overview</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>Lists</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>List views</h2>
+			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
+				<li><a href="docs-lists.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+				<li><a href="lists-options.html" data-role="button" data-transition="fade">Options</a></li>
+				<li><a href="lists-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+				<li><a href="lists-events.html" data-role="button" data-transition="fade">Events</a></li>
+			</ul>
+			<h2>Basic linked lists</h2>
+			<p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p>
+			<p>Here is the HTML markup for a basic linked list.</p>
+<pre><code>
+&lt;ul data-role=&quot;listview&quot; data-theme=&quot;g&quot;&gt;
+	&lt;li&gt;&lt;a href=&quot;acura.html&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;audi.html&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;bmw.html&quot;&gt;BMW&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+			<a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Basic list example</a>
+			<p><strong>Style note on non-inset lists</strong>: all standard, non-inset lists have a -15px margin to negate the 15px of padding on the content area to make lists fill to the edges of the screen. If you add other widgets above or below a list, the negative margin may make these elements overlap so you'll need to add additional spacing in your custom CSS.</p>
+			<h2>Nested lists</h2>
+			<p>By nesting child <code>ul</code> or <code>ol</code> inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework.</p>
+			<p>To <a href="../lists/lists-themes.html">set the swatch color</a> of the child list views, set the <code>data-theme</code> attribute on each list inside.</p>
+			<a href="lists-nested.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nested list example</a>
+			<h2>Numbered lists</h2>
+			<p>Lists can also be created from ordered lists (<code>ol</code>) which is useful when presenting items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the list view, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.</p>
+			<a href="lists-ol.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Numbered list example</a>
+			<h2>Read-only lists</h2>
+			<p>List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch and sets the text size to a smaller size than the clickable lists to save a bit of space.</p>
+			<a href="lists-readonly-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Read-only list example</a>
+			<h2>Split button lists</h2>
+			<p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and set the <code>title</code> attribute of the link to the text the link for accessibility. </p>
+			<p>You can set the icon for the right split icon by specifying a <code>data-split-icon</code> attribute with the <a href="../buttons/buttons-themes.html">icon name</a> you want. The theme swatch color of the split button can be set by specifying a swatch letter in the <code>data-split-theme</code> attribute</p>
+			<a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Split list example</a>
+			<h2>List dividers</h2>
+			<p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code> data-role="list-divider"</code> to any list item. These items are styled with the bar swatch "b" by default (blue in the default theme) but you can specify a theme for dividers by adding the <code>data-dividertheme</code> attribute to the list element (<code>ul</code> or <code>ol</code>) and specifying a theme swatch letter.</p>
+			<a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
+			<h2>Search filter</h2>
+			<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either <a href="../api/globalconfig.html">bind to the <code>mobileinit</code> event</a> and set the <code>$.mobile.listview.prototype.options.filterPlaceholder</code> option to a string of your choosing, or use the data-attribute <code>data-filter-placeholder</code> on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data-attribute <code>data-filter-theme</code> on your listview.</p>
+			<a href="lists-search.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Search filter example</a>
+      <p>If you want to change the way in which list items are filtered, ie fuzzy search or matching from the beginning of the string, you can configure the callback used internally by defining <code>$.mobile.listview.prototype.options.filterCallback</code> during <code>mobileinit</code> or after the widget has been created with <code>$("#mylist").listview('option', 'filterCallback', yourFilterFunction)</code>. Any function defined for the callback will be provided two arguments. First, the text of the current list item and second, the value being searched for. A truthy value will result in a hidden list item. The default callback which filters entries without the <code>searchValue</code> as a substring is described below:
+      </p>
+<pre><code>function( text, searchValue ){
+  return text.toLowerCase().indexOf( searchValue ) === -1;
+};</code></pre>
+			<p>To filter list items by values other than the text, add a <code>data-filtertext</code> attribute to the list item.  The value of this attribute will be passed as the first argument to the <code>filterCallback</code> function instead of the text.</p>
+			<a href="lists-search-filtertext.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Hidden data filter example</a>
+			<h2>Text formatting &amp; counts</h2>
+			<p>The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information and counts through semantic HTML markup.</p>
+			<ul>
+				<li>To add a count indicator to the right of the list item, wrap the number in an element with a class of <code>ui-li-count</code></li>
+				<li>To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis. </li>
+				<li>Supplemental information can be added to the right of each list item by wrapping content in an element with a class of <code>ui-li-aside</code></li>
+			</ul>
+			<a href="lists-count.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with count bubbles</a>
+			<a href="lists-formatting.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with text formatting</a>
+			<h2>Thumbnails &amp; icons</h2>
+			<p>To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square. To use standard 16x16 pixel icons in list items, add the class of <code>ui-li-icon</code> to the image element.</p>
+			<a href="lists-thumbnails.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with thumbnail images</a>
+		 	<a href="lists-icons.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with icon images</a>
+			<h2>Inset lists</h2>
+			<p>If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the <code> data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance.</p>
+			<a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>
+			<h2>Calling the listview plugin</h2>
+			<p>You can directly call the listview plugin on any selector, just like any jQuery plugin:</p>
+			<code>$('#mylist').listview();</code>
+			<h2>Updating lists</h2>
+			<p>If you add items to a listview, you'll need to call the <code>refresh()</code> method on it to update the styles and create any nested lists that are added. For example:</p>
+			<code>$('#mylist').listview('refresh');</code>
+			<p>Note that the <code>refresh()</code> method only affects <strong>new nodes</strong> appended to a list. This is done for performance reasons.  Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh. </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">List views</li>
+							<li data-theme="a"><a href="docs-lists.html">List basics &amp; API</a></li>
+							<li><a href="lists-ul.html">Basic linked list</a></li>
+							<li><a href="lists-nested.html">Nested list</a></li>
+							<li><a href="lists-ol.html">Numbered list</a></li>
+							<li><a href="lists-split.html">Split button list</a></li>
+							<li><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-count.html">Count bubble</a></li>
+							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
+							<li><a href="lists-icons.html">Icons</a></li>
+							<li><a href="lists-formatting.html">Content formatting</a></li>
+							<li><a href="lists-search.html">Search filter bar</a></li>
+							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+							<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+							<li><a href="lists-readonly.html">Read-only lists</a></li>
+							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+							<li><a href="lists-forms.html">Lists with forms</a></li>
+							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+							<li><a href="lists-inset.html">Inset styled lists</a></li>
+							<li><a href="lists-performance.html">List performance test</a></li>
+							<li><a href="lists-themes.html">Theming lists</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>