RubyGems - RubyApp - Versions diffs - 0.6.67 → 0.6.68 - Mend

RubyApp 0.6.67 → 0.6.68

Files changed (460) hide show

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.3.0/demos/docs/widgets/table-column-toggle/index.html ADDED Viewed

@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Table: Column Toggle - jQuery Mobile Demos</title>
+	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.3.0.css">
+	<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
+	<link rel="shortcut icon" href="../../favicon.ico">
+	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+	<script src="../../../js/jquery.js"></script>
+	<script src="../../_assets/js/jquery.mobile.demos.js"></script>
+	<script src="../../../js/jquery.mobile-1.3.0.js"></script>
+</head>
+<body>
+<div data-role="page" class="jqm-demos" data-quicklinks="true">
+	<div data-role="header" class="jqm-header">
+		<h1 class="jqm-logo"><a href="../../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
+		<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
+		<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
+<div class="jqm-search">
+    <ul class="jqm-list">
+<li data-section="Widgets" data-filtertext="accordions collapsible sets content formatting grouped inset mini"><a href="widgets/accordions/">Accordion</a></li>
+<li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/" data-ajax="false">AJAX Navigation</a></li>
+<li data-section="Widgets" data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>
+<li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a href="widgets/buttons/" data-ajax="false">Buttons</a></li>
+<li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a href="widgets/checkbox/">Checkboxes</a></li>
+<li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/" data-ajax="false">Collapsibles</a></li>
+<li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a href="widgets/controlgroups/">Controlgroup</a></li>
+<li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>
+<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/headers/bars-fixed.html">Fixed toolbars</a></li>
+<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>
+<li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer toolbar</a></li>
+<li data-section="Widgets" data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements"><a href="widgets/forms/">Form elements</a></li>
+<li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a href="widgets/grids/">Grids</a></li>
+<li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a href="widgets/headers/">Header toolbar</a></li>
+<li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icon</a></li>
+<li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a href="widgets/links/">Links</a></li>
+<li data-section="Widgets" data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a href="widgets/listviews/" data-ajax="false">Listviews</a></li>
+<li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/">Loader overlay</a></li>
+<li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a href="widgets/navbar/" data-ajax="false">Navbar</a></li>
+<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a href="widgets/navbar/footer-persist-a.html">Navbar, persistent</a></li>
+<li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a href="widgets/pages/">Pages</a></li>
+<li data-section="Widgets" data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>
+<li data-section="Widgets" data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="widgets/popup/">Popup</a></li>
+<li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a href="widgets/radiobuttons/">Radio buttons</a></li>
+<li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a href="widgets/selects/">Select</a></li>
+<li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a href="widgets/sliders/" data-ajax="false">Slider, single</a></li>
+<li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled"><a href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span class="ui-li-count">New</span></a></li>
+<li data-section="Widgets" data-filtertext="tables column th td toggle responsive tables rwd hide show tabular"><a href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a></li>
+<li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>
+<li data-section="Widgets" data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms"><a href="widgets/textinputs/">Text inputs & textarea</a></li>
+<li data-section="Widgets" data-filtertext="page transitions animated pages ajax navigation flip slide fade pop" data-ajax="false"><a href="widgets/transitions/" data-ajax="false">Transitions</a></li>
+<li data-role="list-divider">Collapsibles</li>
+<li data-section="Demo Showcase" data-filtertext="dynamic collapsible set accordion append expand"><a href="examples/collapsibles/dynamic-collapsible.html" data-ajax="false">Dynamic collapsible</a></li>
+<li data-role="list-divider">Controlgroups</li>
+<li data-section="Demo Showcase" data-filtertext="dynamic controlgroup buttons selects checkboxes forms"><a href="examples/controlgroups/dynamic-controlgroup.html" data-ajax="false">Dynamic controlgroup</a></li>
+<li data-role="list-divider">Listviews</li>
+<li data-section="Demo Showcase" data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="examples/listviews/grid-listview.html" data-ajax="false">Grid Listview</a></li>
+<li data-section="Demo Showcase" data-filtertext="autodividers anchor jump scroll linkbars listviews lists ul"><a href="examples/listviews/autodividers-linkbar.html" data-ajax="false">Autodividers Linkbar</a></li>
+<li data-section="Demo Showcase" data-filtertext="listviews autodividers selector autodividersselector lists ul ol"><a href="examples/listviews/autodividers-selector.html" data-ajax="false">Autodividers Selector</a></li>
+<li data-role="list-divider">Navigation</li>
+<li data-section="Demo Showcase" data-filtertext="backbone and require.js example navigation router"><a href="examples/backbone-require/index.html" data-ajax="false">Backbone and Require.js example</a></li>
+<li data-section="Demo Showcase" data-filtertext="server redirection with server-side support.html"><a href="examples/redirect/" data-ajax="false">Redirection with server-side support</a></li>
+<li data-role="list-divider">Panels</li>
+<li data-section="Demo Showcase" data-filtertext="panel styling slide panels sliding panels shadow rwd responsive breakpoint"><a href="examples/panels/panel-styling.html" data-ajax="false">Panel styling</a></li>
+<li data-section="Demo Showcase" data-filtertext="open panel on swipe panels left right"><a href="examples/panels/panel-swipe-open.html" data-ajax="false">Open panel on swipe</a></li>
+<li data-role="list-divider">Popups</li>
+<li data-section="Demo Showcase" data-filtertext="dynamic popups popup images lightbox"><a href="examples/popups/dynamic-popup.html" data-ajax="false">Dynamic popup</a></li>
+<li data-section="Demo Showcase" data-filtertext="arrow popups popover"><a href="examples/popups/arrow.html" data-ajax="false">Popup with arrow</a></li>
+<li data-role="list-divider">Responsive Tables</li>
+<li data-section="Demo Showcase" data-filtertext="responsive tables reflow stack custom styles"><a href="examples/tables/movie-list.html" data-ajax="false">Reflow: Custom styles</a></li>
+<li data-section="Demo Showcase" data-filtertext="responsive tables reflow heading groups rwd breakpoint"><a href="examples/tables/financial-grouped-reflow.html" data-ajax="false">Reflow: Heading groups</a></li>
+<li data-section="Demo Showcase" data-filtertext="responsive tables column toggle hide rwd breakpoint customization options"><a href="examples/tables/movie-list-toggle-options.html" data-ajax="false">Column toggle: Customization options</a></li>
+<li data-section="Demo Showcase" data-filtertext="responsive tables column toggle heading groups rwd breakpoint"><a href="examples/tables/financial-grouped-columns.html" data-ajax="false">Column toggle: Heading groups</a></li>
+<li data-section="Demo Showcase" data-filtertext="responsive tables table column toggle phone comparison rwd breakpoint"><a href="examples/tables/phone-compare.html" data-ajax="false">Column toggle demo: Phone comparison</a></li>
+<li data-role="list-divider">Sliders</li>
+<li data-section="Demo Showcase" data-filtertext="slider tooltip handle value extension input range sliders forms"><a href="examples/slider/tooltip.html" data-ajax="false">Tooltip extension</a></li>
+<li data-role="list-divider">Swipe</li>
+<li data-section="Demo Showcase" data-filtertext="swipe to navigate page transitions navigation"><a href="examples/swipe/swipe-page.html" data-ajax="false">Swipe to navigate</a></li>
+<li data-section="Demo Showcase" data-filtertext="swipe to delete list item listviews lists ul ol"><a href="examples/swipe/swipe-list.html" data-ajax="false">Swipe to delete list item</a></li>
+<li data-role="list-divider">Forms</li>
+<li data-section="Questions & Answers" data-filtertext="CSS styles apply widget scope wrap selector customize"><a href="faq/question-template.html">Why won't my CSS styles apply correctly to a widget?</a></li>
+<li data-section="Questions & Answers" data-filtertext="form update value enhance pageinit refresh"><a href="faq/updating-the-value-of-enhanced-form-elements-does-not-work.html">Updating the value of enhanced form elements does not work.</a></li>
+<li data-section="Questions & Answers" data-filtertext="HTML 5 inputs appearance keyboard picker calendar date time slider file color"><a href="faq/my-html-5-inputs-look-different-in-browsers.html">My HTML 5 inputs look different across devices and browsers.</a></li>
+<li data-section="Questions & Answers" data-filtertext="range search inputs slider number text degrade"><a href="faq/my-range-search-input-type-is-being-changed.html">My range or search inputs are being change to number/text.</a></li>
+<li data-section="Questions & Answers" data-filtertext="custom select popup dialog logic"><a href="faq/sometimes-custom-select-shows-as-dialog-popup.html">Sometimes my custom select shows as a popup other times its a dialog.</a></li>
+<li data-section="Questions & Answers" data-filtertext="disable button issue class method"><a href="faq/disabling-a-button-does-not-work.html">Disabling a button does not work.</a></li>
+<li data-section="Questions & Answers" data-filtertext="fixed toolbar header footer fullscreen select input bug issue"><a href="faq/controls-in-header-footer.html">Controls in my fixed header or footer are not responding or behave erratically.</a></li>
+<li data-role="list-divider">Pages</li>
+<li data-section="Questions & Answers" data-filtertext="head load scripts styles pageinit onload pagebeforecreate ajax nav pages"><a href="faq/scripts-and-styles-not-loading.html">Why aren't my scripts and styles loading?</a></li>
+<li data-section="Questions & Answers" data-filtertext="document.ready onload paginit DOM ready on ready scripts "><a href="faq/dom-ready-not-working.html">Why isn't DOM ready working for my scripts?</a></li>
+<li data-section="Questions & Answers" data-filtertext="ajax nav load page mobile.loadpage"><a href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li>
+<li data-section="Questions & Answers" data-filtertext="ajax nav multi page document load"><a href="faq/why-is-only-the-first-page-loaded.html">Why is only the first page of my multi page document loaded?</a></li>
+<li data-section="Questions & Answers" data-filtertext="pass url query params ajax nav"><a href="faq/pass-query-params-to-page.html">I'm trying to pass query params to a page but it's not working?</a></li>
+<li data-section="Questions & Answers" data-filtertext="hash pass parameters information ajax nav"><a href="faq/pass-via-the-hash-to-page.html">I'm trying to pass information via the hash but it's not working?</a></li>
+<li data-section="Questions & Answers" data-filtertext="application cache status error isLocal ajax nav"><a href="faq/the-application-cache-is-not-working.html">I'm trying to use the application cache but it's not working.</a></li>
+<li data-section="Questions & Answers" data-filtertext=">create refresh event trigger pageInit refresh method content injected page not enhanced."><a href="faq/injected-content-is-not-enhanced.html">Content injected into a page is not enhanced.</a></li>
+<li data-section="Questions & Answers" data-filtertext=">create trigger event pageInit injected HTML"><a href="faq/triggering-create-on-injected-content-does-not-work.html">Triggering create on injected HTML does not work.</a></li>
+<li data-section="Questions & Answers" data-filtertext="auto-enhance element stop preventnative role none"><a href="faq/how-can-i-stop-auto-enhancement-of-elements.html">How can I stop JQM from auto-enhancing an element?</a></li>
+<li data-section="Questions & Answers" data-filtertext="auto-enhance block container parent stop preventnative role none"><a href="faq/how-can-i-stop-auto-enhancement-of-a-block-of-elements.html">How can I stop JQM from enhancing a block of elements?</a></li>
+<li data-section="Questions & Answers" data-filtertext="page title ajax nav head"><a href="faq/how-do-i-control-page-titles.html">How do I control page titles?</a></li>
+<li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage"><a href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li>
+<li data-role="list-divider">Events</li>
+<li data-section="Questions & Answers" data-filtertext="touch mouse events vmouseover, vmousedown, vmousemove, vmouseup, vclick, vmousecancel"><a href="faq/how-do-i-use-touch-mouse-events.html">How do I use touch and mouse events?</a></li>
+<li data-role="list-divider">Theme and styling</li>
+<li data-section="Questions & Answers" data-filtertext="theme swatch css themeroller customize icons colors fonts style"><a href="faq/how-does-theming-work.html">How does theming work?</a></li>
+<li data-role="list-divider">Apps</li>
+<li data-section="Questions & Answers" data-filtertext="How do I need to configure PhoneGap Cordova?"><a href="faq/how-configure-phonegap-cordova.html">How do I need to configure PhoneGap/Cordova?</a></li>
+<!--
+<li data-role="list-divider">Navigation</li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/nav-is-acting-erraticly.html">The nav is acting erratically!</a></li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/deep-links-dont-work.html">Following a deep link ( a link to scroll to and id ) does not work.</a></li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/scripts-css-only-works-on-first-page-or-refresh.html">My script / css only works on first page or on refresh.</a></li>
+<li data-role="list-divider">Widgets</li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-double-enhanced.html">Cloning a widget or enhanced for element and enhancing causes "double" enhancement</a></li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-does-not-update.html">Cloned widget or enhanced element does not update</a></li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/data-enhance-false-does-not-work.html">Setting data-enhance="false" does not work.</a></li>
+<li data-role="list-divider">General</li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/selecting-element-by-id-not-working.html">Selecting elements by id only works sometimes or on first page!</a></li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/global-config-settings-ignored.html">The global configuration settings i set are being ignored.</a></li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/custom-css-is-ignored.html">My custom css is ignored.</a></li>
+<li data-role="list-divider">Events</li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/swipe-triggered-when-scrolling.html">Swipe triggered when scrolling.</a></li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/document-ready-not-working.html">Document ready ignored after first page.</a></li>
+<li data-role="list-divider">Theming &amp; custom styles</li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add custom icons?</a></li>
+<li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add remove the circle behind the icons?</a></li>
+-->
+    </ul>
+</div>
+	</div><!-- /header -->
+	<div data-role="content" class="jqm-content">
+			<h1>Table: Column Toggle <a href="http://api.jquerymobile.com/table-columntoggle/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>
+			<p class="jqm-intro">The reflow table mode works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row.
+			</p>
+			<h2>Column toggle basics</h2>
+			<p>This table mode automatically hides less important columns at narrower widths and surfaces a button to open a menu that allows the user to choose what columns they want to see. In this mode, the author attempts to define which columns are most important to show across various widths by assigning a priority to each column.</p>
+	        <p>A user may choose to check as many columns as they want by tapping the "Columns..." button to open the column
+	        chooser popup. The popup contains a dynamically generated list of columns based on the table markup that can be checked and unchecked to adjust the visible columns. </p>
+			<div data-demo-html="true">
+	         <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
+	              <thead>
+	                <tr>
+	                  <th data-priority="2">Rank</th>
+	                  <th>Movie Title</th>
+	                  <th data-priority="3">Year</th>
+	                  <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
+	                  <th data-priority="5">Reviews</th>
+	                </tr>
+	              </thead>
+	              <tbody>
+	                <tr>
+	                  <th>1</th>
+	                  <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
+	                  <td>1941</td>
+	                  <td>100%</td>
+	                  <td>74</td>
+	                </tr>
+	                <tr>
+	                  <th>2</th>
+	                  <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
+	                  <td>1942</td>
+	                  <td>97%</td>
+	                  <td>64</td>
+	                </tr>
+	                <tr>
+	                  <th>3</th>
+	                  <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
+	                  <td>1972</td>
+	                  <td>97%</td>
+	                  <td>87</td>
+	                </tr>
+	                <tr>
+	                  <th>4</th>
+	                  <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
+	                  <td>1939</td>
+	                  <td>96%</td>
+	                  <td>87</td>
+	                </tr>
+	                <tr>
+	                  <th>5</th>
+	                  <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
+	                  <td>1962</td>
+	                  <td>94%</td>
+	                  <td>87</td>
+	                </tr>
+	                <tr>
+	                  <th>6</th>
+	                  <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
+	                  <td>1964</td>
+	                  <td>92%</td>
+	                  <td>74</td>
+	                </tr>
+	                <tr>
+	                  <th>7</th>
+	                  <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
+	                  <td>1967</td>
+	                  <td>91%</td>
+	                  <td>122</td>
+	                </tr>
+	                <tr>
+	                  <th>8</th>
+	                  <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
+	                  <td>1939</td>
+	                  <td>90%</td>
+	                  <td>72</td>
+	                </tr>
+	                <tr>
+	                  <th>9</th>
+	                  <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
+	                  <td>1952</td>
+	                  <td>89%</td>
+	                  <td>85</td>
+	                </tr>
+	                <tr>
+	                  <th>10</th>
+	                  <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
+	                  <td>2010</td>
+	                  <td>84%</td>
+	                  <td>78</td>
+	                </tr>
+	              </tbody>
+	            </table>
+			</div><!--/demo-html -->
+	      <h2>Applying column chooser mode to a table</h2>
+	      <p>The column chooser mode requires a <code>table</code> element with two attributes: <code>data-role=&quot;table&quot;</code> and <code>data-mode=&quot;columntoggle&quot;</code>. An <code>ID</code> attribute is also required on the table to associate it with the column chooser popup menu.</p>
+	      <pre><code>&lt;table <strong>data-role=&quot;table&quot; data-mode=&quot;columntoggle&quot; id=&quot;my-table&quot;</strong>&gt;</code></pre>
+	      <h2>Setting column priority</h2>
+	      <p>The table works by hiding and showing columns based on two inputs: available screen width or by the user checking and unchecking which columns to display in a column picker popup. Add <code>data-priority</code> attributes to each of the table headers of columns you want to responsively display and assign a priority (1 = highest, 6 = lowest). Any table header given a priority will be available in the column picker menu. </p>
+	      <p>To make a column <em>persistent</em> so it's not available for hiding, omit the <code>data-priority</code> attribute. This will make the column visible at all widths and won't be available in the column chooser menu.</p>
+	<pre><code>
+	&lt;th&gt;I&#x27;m critical and can&#x27;t be removed&lt;/th&gt;
+	&lt;th <strong>data-priority=&quot;1&quot;</strong>&gt;I&#x27;m very important&lt;/th&gt;
+	&lt;th <strong>data-priority=&quot;3&quot;</strong>&gt;I&#x27;m somewhat&lt;/th&gt;
+	&lt;th <strong>data-priority=&quot;5&quot;</strong>&gt;I&#x27;m less important&lt;/th&gt;
+	</code></pre>
+	    <p>You may use any priority naming convention and assign as many (or few) levels of priority for the columns. The plugin  simply generates class names based on the values in the <code>data-priority</code> attribute so even though we default to using a numeric system of 1-6, any naming convention is possible. </p>
+	    <p>For example, if a priority of <code>data-priority="critical"</code> is added to the heading, a class of <code>ui-table-priority-critial</code> will be applied to each cell in that column. If a priority is assigned, the column will be made available for toggling in the column menu and the class will be added to each cell. The rest of the styling and media query creation is up to you to write in your custom stylesheet.</p>
+		<h2>Theme & customization</h2>
+	      <p>The column chooser popup is opened via a button that is generated by the framework. The button's text is "Columns..." by default but can be set by adding the <code>data-column-btn-text</code> attribute to the table to the text string you want in the button. The button will inherit the theme from the content area, just like all buttons, but the theme can be set manually by adding the <code>data-column-btn-theme</code> attribute to any swatch letter in your theme.</p>
+	      <p>The table background is themed by adding <code>class="ui-body-d"</code> to the table element. The table header is given a themed appearance by adding the <code>class="ui-bar-d"</code> to the header row. The striped rows are created by adding the <code>table-stripe</code> class to the table element.</p>
+	      <div data-demo-html="true">
+	       <table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
+	                <thead>
+	                  <tr class="ui-bar-d">
+	                    <th data-priority="2">Rank</th>
+	                    <th>Movie Title</th>
+	                    <th data-priority="3">Year</th>
+	                    <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
+	                    <th data-priority="5">Reviews</th>
+	                  </tr>
+	                </thead>
+	                <tbody>
+	                  <tr>
+	                    <th>1</th>
+	                    <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
+	                    <td>1941</td>
+	                    <td>100%</td>
+	                    <td>74</td>
+	                  </tr>
+	                  <tr>
+	                    <th>2</th>
+	                    <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
+	                    <td>1942</td>
+	                    <td>97%</td>
+	                    <td>64</td>
+	                  </tr>
+	                  <tr>
+	                    <th>3</th>
+	                    <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
+	                    <td>1972</td>
+	                    <td>97%</td>
+	                    <td>87</td>
+	                  </tr>
+	                  <tr>
+	                    <th>4</th>
+	                    <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
+	                    <td>1939</td>
+	                    <td>96%</td>
+	                    <td>87</td>
+	                  </tr>
+	                  <tr>
+	                    <th>5</th>
+	                    <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
+	                    <td>1962</td>
+	                    <td>94%</td>
+	                    <td>87</td>
+	                  </tr>
+	                  <tr>
+	                    <th>6</th>
+	                    <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
+	                    <td>1964</td>
+	                    <td>92%</td>
+	                    <td>74</td>
+	                  </tr>
+	                  <tr>
+	                    <th>7</th>
+	                    <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
+	                    <td>1967</td>
+	                    <td>91%</td>
+	                    <td>122</td>
+	                  </tr>
+	                  <tr>
+	                    <th>8</th>
+	                    <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
+	                    <td>1939</td>
+	                    <td>90%</td>
+	                    <td>72</td>
+	                  </tr>
+	                  <tr>
+	                    <th>9</th>
+	                    <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
+	                    <td>1952</td>
+	                    <td>89%</td>
+	                    <td>85</td>
+	                  </tr>
+	                  <tr>
+	                    <th>10</th>
+	                    <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
+	                    <td>2010</td>
+	                    <td>84%</td>
+	                    <td>78</td>
+	                  </tr>
+	                </tbody>
+	              </table>
+	            </div><!-- /data-demo -->
+	    <h2>Making the table responsive</h2>
+	    <p>The styles for all columns that have priorities assigned (1-6) start as <code>display:none</code> in the structure stylesheet since we're taking a mobile-first approach to our styles. This means that only columns that should be persistent are visible in the styles to start.</p>
+	    <p>The framework does not automatically include the the media queries to progressively display columns at wider widths. We do this to make it easier for developers to customize the media query widths for each priority level.</p>
+	    <p>Media queries add the responsive behavior to show and hide columns by priority. Each media query is written using <code>min-width</code> widths so they build on top of each other. The widths are set in em units so they respond to font size changes. To calculate a pixel withs in em units, divide the target width by 16 (pixels) - it's that easy.</p>
+	    <p>Inside each media query, we override the <code>display:none</code> style properties set on all the priority columns in the basic styles to <code>display:table-cell</code> so they become visible again and act as a table.</p>
+	    <p>To customize the breakpoints, copy the following style block into your custom style overrides and adjust the <code>min-width</code> media query values for each priority level to specify where various priority columns should appear.</p>
+	    <p>In the example styles below for a <code> my-custom-class</code> class on the table, the priority 1 columns are shown first, at widths above <code>20em</code> (320px), then priority 2 kicks in above <code>30em</code> (480px) and so on up to wide desktop widths with priority 6. Feel free to change these breakpoints in your stylesheet and choose how many priority levels you'd like to use.</p>
+	<pre><code>
+	<strong>/* Show priority 1 at 320px (20em x 16px) */</strong>
+	@media screen and (min-width: 20em) {
+	   .my-custom-class th.ui-table-priority-1,
+	   .my-custom-class td.ui-table-priority-1 {
+	     display: table-cell;
+	   }
+	}
+	<strong>/* Show priority 2 at 480px (30em x 16px) */</strong>
+	@media screen and (min-width: 30em) {
+	   .my-custom-class  th.ui-table-priority-2,
+	   .my-custom-class td.ui-table-priority-2 {
+	     display: table-cell;
+	   }
+	}
+	...more breakpoints...
+	</code></pre>
+	<p>Due to CSS specificity, you will also need to include the class definitions for the hidden and visible states <em>after</em> the custom breakpoints in your custom stylesheet so be sure to include these as well:</p>
+	<pre><code>
+	/* Manually hidden */
+	.my-custom-class th.ui-table-cell-hidden,
+	.my-custom-class td.ui-table-cell-hidden {
+	  display: none;
+	}
+	/* Manually shown */
+	.my-custom-class th.ui-table-cell-visible,
+	.my-custom-class td.ui-table-cell-visible {
+	   display: table-cell;
+	}
+	</code></pre>
+	      <h2>Applying a preset breakpoint</h2>
+	      <p>Even though we strongly encourage you to write custom breakpoints yourself, the framework includes a set of pre-configured breakpoints for each of the six priority levels that you can use if they happen work well for your content.</p>
+	      <p>These breakpoints can be applied by adding a <code>class="ui-responsive"</code> to the table element. Here is an example of a table with this class added:</p>
+	      <pre><code>&lt;table data-role=&quot;table&quot; <strong>class=&quot;ui-responsive&quot;</strong> data-mode=&quot;columntoggle&quot; id=&quot;my-table&quot;&gt;</code></pre>
+	      <p>The six preset breakpoint classes included in the column toggle stylesheet use regular increments of 10em (160 pixels). Here is a summary of the breakpoints assigned to each priority in the preset styles: </p>
+	      <dl>
+	        <dt><code>data-priority="1"</code></dt><dd> Displays the column at 320px (20em) </dd>
+	        <dt><code>data-priority="2"</code></dt><dd> Displays the column at 480px (30em) </dd>
+	        <dt><code>data-priority="3"</code></dt><dd> Displays the column at 640px (40em) </dd>
+	        <dt><code>data-priority="4"</code></dt><dd> Displays the column at 800px (50em) </dd>
+	        <dt><code>data-priority="5"</code></dt><dd> Displays the column at 960px (60em) </dd>
+	        <dt><code>data-priority="6"</code></dt><dd> Displays the column at 1,120px (70em) </dd>
+	      </dl>
+	      <p>If these preset breakpoints don't work for your content and layout needs, we recommend that you create custom breakpoints to fine tune the styles. </p>
+	      <h2>Grouped column headers</h2>
+	      <p>It's fairly common to need to logically group multiple columns under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (<code>TH</code>), with the first row containing simple <code>colspan</code> attributes to group the columns below. In this configuration, the framework will parse the first row only for the priority and expose these heading groups as the options in the column chooser popup. In this configuration, the second heading will not be exposed as columns that can be hidden or shown independently of the groupings in the chooser.</p>
+		</div><!-- /content -->
+		<div data-role="footer" class="jqm-footer">
+			<p class="jqm-version"></p>
+			<p>Copyright 2013 The jQuery Foundation</p>
+		</div><!-- /footer -->
+    <div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="c">
+        <ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="docs" class="jqm-list">
+            <li data-role="list-divider">jQuery Mobile Demos</li>
+			<li><a href="../">Home</a></li>
+            <li><a href="intro/">Introduction</a></li>
+            <li><a href="examples/">Demo Showcase</a></li>
+            <li><a href="faq/">Questions & Answers</a></li>
+			<li><a href="intro/rwd.html">Going Responsive</a></li>
+            <li data-role="list-divider">Widget reference</li>
+<li data-section="Widgets" data-filtertext="accordions collapsible sets content formatting grouped inset mini"><a href="widgets/accordions/">Accordion</a></li>
+<li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/" data-ajax="false">AJAX Navigation</a></li>
+<li data-section="Widgets" data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>
+<li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a href="widgets/buttons/" data-ajax="false">Buttons</a></li>
+<li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a href="widgets/checkbox/">Checkboxes</a></li>
+<li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/" data-ajax="false">Collapsibles</a></li>
+<li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a href="widgets/controlgroups/">Controlgroup</a></li>
+<li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>
+<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/headers/bars-fixed.html">Fixed toolbars</a></li>
+<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>
+<li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer toolbar</a></li>
+<li data-section="Widgets" data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements"><a href="widgets/forms/">Form elements</a></li>
+<li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a href="widgets/grids/">Grids</a></li>
+<li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a href="widgets/headers/">Header toolbar</a></li>
+<li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icon</a></li>
+<li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a href="widgets/links/">Links</a></li>
+<li data-section="Widgets" data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a href="widgets/listviews/" data-ajax="false">Listviews</a></li>
+<li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/">Loader overlay</a></li>
+<li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a href="widgets/navbar/" data-ajax="false">Navbar</a></li>
+<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a href="widgets/navbar/footer-persist-a.html">Navbar, persistent</a></li>
+<li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a href="widgets/pages/">Pages</a></li>
+<li data-section="Widgets" data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>
+<li data-section="Widgets" data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="widgets/popup/">Popup</a></li>
+<li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a href="widgets/radiobuttons/">Radio buttons</a></li>
+<li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a href="widgets/selects/">Select</a></li>
+<li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a href="widgets/sliders/" data-ajax="false">Slider, single</a></li>
+<li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled"><a href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span class="ui-li-count">New</span></a></li>
+<li data-section="Widgets" data-filtertext="tables column th td toggle responsive tables rwd hide show tabular"><a href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a></li>
+<li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>
+<li data-section="Widgets" data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms"><a href="widgets/textinputs/">Text inputs & textarea</a></li>
+<li data-section="Widgets" data-filtertext="page transitions animated pages ajax navigation flip slide fade pop" data-ajax="false"><a href="widgets/transitions/" data-ajax="false">Transitions</a></li>
+        </ul>
+	</div><!-- /panel -->
+	</div><!-- /page -->
+	</body>
+	</html>