mirror of
https://github.com/Doodle3D/doodle3d-connect.git
synced 2024-11-15 02:37:56 +01:00
530 lines
47 KiB
HTML
530 lines
47 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Q&A - jQuery Mobile Demos</title>
|
||
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
||
|
|
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||
|
|
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||
|
|
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||
|
|
<script src="../js/jquery.js"></script>
|
||
|
|
<script src="../_assets/js/index.js"></script>
|
||
|
|
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div data-role="page" class="jqm-demos">
|
||
|
|
|
||
|
|
<div data-role="header" class="jqm-header">
|
||
|
|
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||
|
|
<p><span class="jqm-version"></span> Demos</p>
|
||
|
|
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||
|
|
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||
|
|
</div><!-- /header -->
|
||
|
|
|
||
|
|
<div role="main" class="ui-content jqm-content">
|
||
|
|
|
||
|
|
<p><strong>Note: this page has not been updated after 1.3</strong></p>
|
||
|
|
|
||
|
|
<h2>Question:</h2>
|
||
|
|
|
||
|
|
<h1>How does theming work?</h1>
|
||
|
|
|
||
|
|
<h2>Answer:</h2>
|
||
|
|
|
||
|
|
<p>The jQuery Mobile theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects. </p>
|
||
|
|
|
||
|
|
<h2>Customize with ThemeRoller</h2>
|
||
|
|
|
||
|
|
<p>The easiest way to create custom themes is with the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller tool</a>. It allows you to build a theme, then download a custom CSS file, ready to be dropped into your project. View a tutorial on <a href="http://learn.jquery.com/jquery-mobile/theme-roller/">how to use ThemeRoller to create a custom theme</a> on the learn site.</p>
|
||
|
|
|
||
|
|
<h2>Default theme swatch mapping for components</h2>
|
||
|
|
|
||
|
|
<p>If no theme swatch letter is set at all, the framework uses the "a" swatch (black in the default theme) for headers and footers and the "c" swatch (light gray in the default theme) for the page content to maximize contrast between the both.</p>
|
||
|
|
|
||
|
|
<p>All items in containers inherit the swatch from their parent. Exceptions to this rule are the listdivider in listviews, the header of nested list pages, and the button of split button lists. Those default to "b" (blue in the default theme). Count bubbles default to "c" (silver in the default theme).
|
||
|
|
|
||
|
|
<p>Note that there is also a swatch named "active" (bright blue in the default theme) which is used to indicate an active selected item. See the <strong>Global "Active" state</strong> further down this page for further information on the <strong>active</strong> swatch.</p>
|
||
|
|
|
||
|
|
<p>The page loading dialog and error message don't inherit a swatch theme. The loading dialog defaults to swatch "a" (black in the default theme) and the error message to swatch "e" (yellow in the default theme). You can configure those defaults globally..
|
||
|
|
|
||
|
|
<h2>Themes & swatches</h2>
|
||
|
|
|
||
|
|
<p>Each theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font <code>text-shadow</code>. </p>
|
||
|
|
|
||
|
|
<p>The default theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level and "e" as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations. </p>
|
||
|
|
|
||
|
|
<p>Most theme changes can be done using ThemeRoller, but it's also simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors as you see fit.</p>
|
||
|
|
|
||
|
|
<h3>Bars</h3>
|
||
|
|
<p>The default theme contains the following five bar styles:</p>
|
||
|
|
|
||
|
|
<div class="swatch-preview">
|
||
|
|
<div class="ui-bar ui-bar-a">Bar A - <a href="#" data-role="none" class="ui-link">Link</a></div>
|
||
|
|
<div class="ui-bar ui-bar-b">Bar B - <a href="#" data-role="none" class="ui-link">Link</a></div>
|
||
|
|
<div class="ui-bar ui-bar-c">Bar C - <a href="#" data-role="none" class="ui-link">Link</a></div>
|
||
|
|
<div class="ui-bar ui-bar-d">Bar D - <a href="#" data-role="none" class="ui-link">Link</a></div>
|
||
|
|
<div class="ui-bar ui-bar-e">Bar E - <a href="#" data-role="none" class="ui-link">Link</a></div>
|
||
|
|
</div><!-- end swatch-bars -->
|
||
|
|
|
||
|
|
<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ("b" or "d", for example) and the specified theme swatch color will be applied. </p>
|
||
|
|
|
||
|
|
<h3>Content Blocks</h3>
|
||
|
|
<p>The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme. </p>
|
||
|
|
|
||
|
|
<div class="swatch-preview">
|
||
|
|
<div class="ui-body ui-body-a">Block A - <a href="#">Link</a></div>
|
||
|
|
<div class="ui-body ui-body-b">Block B - <a href="#">Link</a></div>
|
||
|
|
<div class="ui-body ui-body-c">Block C - <a href="#">Link</a></div>
|
||
|
|
<div class="ui-body ui-body-d">Block D - <a href="#">Link</a></div>
|
||
|
|
<div class="ui-body ui-body-e">Block E - <a href="#">Link</a></div>
|
||
|
|
</div><!-- end swatch-bars -->
|
||
|
|
|
||
|
|
<p>If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the default header "a".</p>
|
||
|
|
|
||
|
|
<h2>Lists & Buttons</h2>
|
||
|
|
<p>Each swatch also includes default styles for interactive elements like list items and buttons. Each button has styles for normal, hover/focus and pressed states.</p>
|
||
|
|
|
||
|
|
<div class="swatch-preview">
|
||
|
|
<a href="index.html" class="ui-btn ui-corner-all ui-btn-a ui-btn-icon-left ui-icon-arrow-l">Button A</a>
|
||
|
|
<a href="index.html" class="ui-btn ui-corner-all ui-btn-b ui-btn-icon-left ui-icon-arrow-l">Button B</a>
|
||
|
|
<a href="index.html" class="ui-btn ui-corner-all ui-btn-c ui-btn-icon-left ui-icon-arrow-l">Button C</a>
|
||
|
|
<a href="index.html" class="ui-btn ui-corner-all ui-btn-d ui-btn-icon-left ui-icon-arrow-l">Button D</a>
|
||
|
|
<a href="index.html" class="ui-btn ui-corner-all ui-btn-e ui-btn-icon-left ui-icon-arrow-l">Button E</a>
|
||
|
|
</div><!-- end swatch-bars -->
|
||
|
|
|
||
|
|
<p>By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box. This behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container.</p>
|
||
|
|
|
||
|
|
<p>If you want to add visual emphasis to a button, an alternate swatch color can be set by adding a <code> data-theme="a"</code> to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.</p>
|
||
|
|
|
||
|
|
<h3>Global "Active" state</h3>
|
||
|
|
<p>The jQuery Mobile framework uses a swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the <code>ui-btn-active</code> style rules.</p>
|
||
|
|
|
||
|
|
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-field-contain">
|
||
|
|
<legend>Active is used for the on state of these toggles:</legend>
|
||
|
|
<input type="radio" name=" radio-choice-a" id="radio-choice-a" value="on" checked="checked">
|
||
|
|
<label for="radio-choice-a">On</label>
|
||
|
|
<input type="radio" name=" radio-choice-a" id="radio-choice-b" value="off">
|
||
|
|
<label for="radio-choice-b">Off</label>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<h3>Icons</h3>
|
||
|
|
<p>There is a core set of <a href="../widgets/icons/">standard icons</a> included in the framework that can be assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>
|
||
|
|
|
||
|
|
<h3>Theme classes</h3>
|
||
|
|
<p>Assigning color swatches through the <code> data-theme</code> attribute is one way to leverage the theme system, but it's also possible to apply any of the theme swatches directly to your markup through classes to apply the colors, textures and font formatting of your theme to any markup. This is especially useful when creating your own custom layout elements or UI widgets. Here are a few common theme classes, but many more are available in the theme stylesheet:</p>
|
||
|
|
<dl>
|
||
|
|
<dt><code>ui-bar-(a-z)</code></dt>
|
||
|
|
<dd>Applies the toolbar theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-bar</code> structural class to add the standard bar padding styles.</dd>
|
||
|
|
<dt><code>ui-body-(a-z)</code></dt>
|
||
|
|
<dd>Applies the content body theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-body</code> structural class to add the standard content block padding styles. </dd>
|
||
|
|
<dt><code>ui-btn-up-(a-z)</code></dt>
|
||
|
|
<dd>Applies the button/clickable element theme styles for the selected swatch letter. Commonly used with the <code>ui-btn-hover-(a-z)</code> and <code>ui-btn-down-(a-z)</code> interaction class states to provide visual feedback and <code>ui-btn-active</code> to indicate the selected or "on" state.</dd>
|
||
|
|
<dt><code>ui-corner-all</code></dt>
|
||
|
|
<dd>Applies the theme's global border-radius for rounded corners and is used for container or grouped items in the framework (inset lists, radiobutton sets). There are additional classes for all the possible combinations of rounded corners, for example: <code>ui-corner-tl</code> (top left only), <code>-top</code> (both top corners), <code>-left</code> (both left corners), etc. A second full set of corner classes is provided for buttons so these can have a different corner radius. These use classes with a similar naming convention, but with "btn-corner" instead of "corner", like this: <code>.ui-<strong>btn-corner</strong>-all</code>.</dd>
|
||
|
|
<dt><code>ui-shadow</code></dt>
|
||
|
|
<dd>Applies the theme's global drop shadow to any element using CSS <code>box-shadow</code> property. </dd>
|
||
|
|
<dt><code>ui-disabled</code></dt>
|
||
|
|
<dd>Applies the disabled look and feel which essentially reduces the opacity of any element with this class to 30%, hides the cursor, and sets <code>pointer-events: none;</code> which prevents any interaction in many modern browsers.</dd>
|
||
|
|
</dl>
|
||
|
|
|
||
|
|
<h3>Overriding themes</h3>
|
||
|
|
<p>The themes are meant as a solid starting point, but are meant to be customized. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify. The set of of theme classes (global) and semantic structural classes (widget-specific) added to elements provide a rich set of possible selectors against which to target style overrides. We recommend adding an external stylesheet to the <code>head</code>, placed <strong>after</strong> the structure and theme stylesheet references, that contain all your style overrides. This allows you to easily update to newer versions of the library because overrides are kept separate from the library code.</p>
|
||
|
|
|
||
|
|
</div><!-- /content -->
|
||
|
|
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||
|
|
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||
|
|
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||
|
|
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||
|
|
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||
|
|
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Checkboxradio widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||
|
|
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Collapsible (set) widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||
|
|
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||
|
|
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Controlgroup widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||
|
|
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Events</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||
|
|
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||
|
|
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Forms</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||
|
|
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||
|
|
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||
|
|
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||
|
|
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Grids</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||
|
|
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||
|
|
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Icons</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||
|
|
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Listview widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||
|
|
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||
|
|
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||
|
|
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||
|
|
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||
|
|
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||
|
|
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||
|
|
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||
|
|
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||
|
|
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Navigation</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||
|
|
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||
|
|
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||
|
|
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Pages</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||
|
|
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||
|
|
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||
|
|
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Panel widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||
|
|
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||
|
|
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||
|
|
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||
|
|
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||
|
|
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||
|
|
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Popup widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||
|
|
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||
|
|
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||
|
|
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||
|
|
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||
|
|
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||
|
|
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||
|
|
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Selectmenu widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||
|
|
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||
|
|
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Slider widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||
|
|
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||
|
|
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Table widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||
|
|
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||
|
|
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||
|
|
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||
|
|
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||
|
|
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||
|
|
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||
|
|
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||
|
|
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Theming</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||
|
|
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Toolbar widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||
|
|
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||
|
|
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||
|
|
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||
|
|
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||
|
|
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||
|
|
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||
|
|
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||
|
|
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>3rd party API demos</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||
|
|
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||
|
|
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div><!-- /panel -->
|
||
|
|
|
||
|
|
|
||
|
|
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||
|
|
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||
|
|
<p>Copyright 2014 The jQuery Foundation</p>
|
||
|
|
</div><!-- /footer -->
|
||
|
|
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||
|
|
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||
|
|
<div class="jqm-search">
|
||
|
|
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||
|
|
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||
|
|
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||
|
|
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||
|
|
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Checkboxradio widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||
|
|
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Collapsible (set) widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||
|
|
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||
|
|
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Controlgroup widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||
|
|
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Events</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||
|
|
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||
|
|
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Forms</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||
|
|
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||
|
|
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||
|
|
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||
|
|
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Grids</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||
|
|
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||
|
|
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Icons</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||
|
|
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Listview widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||
|
|
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||
|
|
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||
|
|
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||
|
|
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||
|
|
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||
|
|
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||
|
|
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||
|
|
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||
|
|
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Navigation</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||
|
|
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||
|
|
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||
|
|
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Pages</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||
|
|
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||
|
|
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||
|
|
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Panel widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||
|
|
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||
|
|
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||
|
|
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||
|
|
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||
|
|
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||
|
|
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Popup widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||
|
|
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||
|
|
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||
|
|
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||
|
|
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||
|
|
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||
|
|
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||
|
|
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Selectmenu widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||
|
|
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||
|
|
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Slider widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||
|
|
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||
|
|
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Table widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||
|
|
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||
|
|
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||
|
|
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||
|
|
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||
|
|
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||
|
|
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||
|
|
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||
|
|
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Theming</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||
|
|
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>Toolbar widget</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||
|
|
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||
|
|
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||
|
|
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||
|
|
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||
|
|
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||
|
|
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||
|
|
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||
|
|
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||
|
|
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||
|
|
<h3>3rd party API demos</h3>
|
||
|
|
<ul>
|
||
|
|
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||
|
|
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||
|
|
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div><!-- /panel -->
|
||
|
|
|
||
|
|
|
||
|
|
</div><!-- /page -->
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|