mirror of
https://github.com/Doodle3D/doodle3d-connect.git
synced 2024-07-08 21:50:43 +02:00
737 lines
50 KiB
HTML
737 lines
50 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Filter - 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" data-quicklinks="true">
|
|
|
|
<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">
|
|
|
|
<h1>Filterable</h1>
|
|
|
|
<p>
|
|
The children of any element can be filtered by setting the attribute <code>data-filter="true"</code> on the element. By default, the text contained in each child is used for filtering, however, you also have the option of setting the attribute <code>data-filtertext</code> to a string value on any child that will be considered for filtering to associate custom filter text instead.</p>
|
|
|
|
<h2>Basic filter</h2>
|
|
<p>The filter widget is based on and replaces the listview filter extension. Thus, you can set <code>data-filter="true"</code> on a listview to generate a filter for its list items.</p>
|
|
<p>Nevertheless, the way in which a filterable is constructed differs from the way the listview filter extension worked in one important regard: the text field for entering the search string is not provided. Instead, you can provide the text field in your markup and have the filterable make use of it by providing a selector that will retrieve the text field as the value of the filterable's <code>data-input</code> attribute. Add class <code>ui-filterable</code> to the <code>form</code> in which you wrap the search input or to the listview to have the framework adjust the margin between the text field and listview.</p>
|
|
<p>The deprecated behavior whereby the filterable injects a text field before the element whose children are to be filtered is retained for version 1.4.0 to help with the transition from the listview filter extension, however, it will be removed in 1.5.0.</p>
|
|
|
|
<div data-demo-html="true">
|
|
<form class="ui-filterable">
|
|
<input id="filterBasic-input" data-type="search"></input>
|
|
</form>
|
|
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input">
|
|
<li>Acura</li>
|
|
<li>Audi</li>
|
|
<li>BMW</li>
|
|
<li>Cadillac</li>
|
|
<li>Ferrari</li>
|
|
</ul>
|
|
</div><!--/demo-html -->
|
|
|
|
<h2>Table filter</h2>
|
|
<p>
|
|
You are not limited to using filters on listviews. To create a filter for a table widget, set
|
|
<code>data-filter="true"</code> on the table element to generate a filter for table rows.
|
|
</p>
|
|
|
|
<div data-demo-html="true">
|
|
<form>
|
|
<input id="filterTable-input" data-type="search"></input>
|
|
</form>
|
|
<table data-role="table" id="movie-table" data-filter="true" data-input="#filterTable-input" class="ui-responsive">
|
|
<thead>
|
|
<tr>
|
|
<th data-priority="1">Rank</th>
|
|
<th data-priority="persist">Movie Title</th>
|
|
<th data-priority="2">Year</th>
|
|
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
|
<th data-priority="4">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>
|
|
</tbody>
|
|
</table>
|
|
</div><!--/demo-html -->
|
|
|
|
<h2>Controlgroup Filter</h2>
|
|
<p>The filter widget can be used on other widgets, too. To filter a list of controlgroup buttons, declare <code>data-filter="true"</code> on the element that creates the controlgroup (Note that you can also use the <code>data-filtertext</code> attribute to declare the text string used for filtering the respective element.
|
|
</p>
|
|
|
|
<div data-demo-html="true">
|
|
<form>
|
|
<input data-type="search" id="filterControlgroup-input"></input>
|
|
</form>
|
|
<div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
|
|
<a href="#" class="ui-btn ui-shadow ui-corner-all">Button 1</a>
|
|
<a href="#" class="ui-btn ui-shadow ui-corner-all">Button 2</a>
|
|
<a href="#" class="ui-btn ui-shadow ui-corner-all" data-filtertext="some text">Button 3</a>
|
|
<a href="#" class="ui-btn ui-shadow ui-corner-all">Button 4</a>
|
|
<a href="#" class="ui-btn ui-shadow ui-corner-all">Button 5</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Filter Select</h2>
|
|
<p>The widget also works on <code>select</code> widgets by hiding options that do not match the filter text. To use a filter for <code>options</code>, declare the <code>data-filter</code> attribute on the select element.</p>
|
|
|
|
<div data-demo-html="true">
|
|
<form>
|
|
<input data-type="search" id="searchForSelect"></input>
|
|
</form>
|
|
<select id="anotherSelect" data-filter="true" data-input="#searchForSelect">
|
|
<option value="A">Option A</option>
|
|
<option value="B">Option B</option>
|
|
<option value="C">Option C</option>
|
|
<option value="D">Option D</option>
|
|
<option value="E">Option E</option>
|
|
<option value="F">Option F</option>
|
|
<option value="G">Option G</option>
|
|
<option value="H">Option H</option>
|
|
<option value="I">Option I</option>
|
|
<option value="J">Option J</option>
|
|
</select>
|
|
</div>
|
|
<h2>Filter Collapsible Set</h2>
|
|
<div data-demo-html="true">
|
|
<form>
|
|
<input data-type="search" id="searchForCollapsibleSet"></input>
|
|
</form>
|
|
<div data-role="collapsibleset" data-filter="true" data-inset="true" data-inset="true" id="collapsiblesetForFilter" data-input="#searchForCollapsibleSet">
|
|
<div data-role="collapsible" data-filtertext="Animals">
|
|
<h3>Animals</h3>
|
|
<ul data-role="listview" data-inset="false">
|
|
<li>Cats</li>
|
|
<li>Dogs</li>
|
|
<li>Lizards</li>
|
|
<li>Snakes</li>
|
|
</ul>
|
|
</div>
|
|
<div data-role="collapsible" data-filtertext="Cars">
|
|
<h3>Cars</h3>
|
|
<ul data-role="listview" data-inset="false">
|
|
<li>Acura</li>
|
|
<li>Audi</li>
|
|
<li>BMW</li>
|
|
<li>Cadillac</li>
|
|
</ul>
|
|
</div>
|
|
<div data-role="collapsible" data-filtertext="Planets">
|
|
<h3>Planets</h3>
|
|
<ul data-role="listview" data-inset="false">
|
|
<li>Earth</li>
|
|
<li>Jupiter</li>
|
|
<li>Mars</li>
|
|
<li>Mercury</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div><!--/demo-html -->
|
|
<h2>Filter Collapsible Set and collapsible children</h2>
|
|
<div data-demo-html="true">
|
|
<form>
|
|
<input data-type="search" id="searchForCollapsibleSetChildren"></input>
|
|
</form>
|
|
<div data-role="collapsibleset" data-filter="true" data-children="> div, > div div ul li" data-inset="true" data-inset="true" id="collapsiblesetForFilterChildren" data-input="#searchForCollapsibleSetChildren">
|
|
<div data-role="collapsible" data-filtertext="Animals Cats Dogs Lizards snakes">
|
|
<h3>Animals</h3>
|
|
<ul data-role="listview" data-inset="false">
|
|
<li data-filtertext="Animals Cats">Cats</li>
|
|
<li data-filtertext="Animals Dogs">Dogs</li>
|
|
<li data-filtertext="Animals Lizards">Lizards</li>
|
|
<li data-filtertext="Animals Snakes">Snakes</li>
|
|
</ul>
|
|
</div>
|
|
<div data-role="collapsible" data-filtertext="Cars Acura Audi BMW Cadillac">
|
|
<h3>Cars</h3>
|
|
<ul data-role="listview" data-inset="false">
|
|
<li data-filtertext="Cars Acura">Acura</li>
|
|
<li data-filtertext="Cars Audi">Audi</li>
|
|
<li data-filtertext="Cars BMW">BMW</li>
|
|
<li data-filtertext="Cars Cadillac">Cadillac</li>
|
|
</ul>
|
|
</div>
|
|
<div data-role="collapsible" data-filtertext="Planets Earth Jupiter Mars Mercury">
|
|
<h3>Planets</h3>
|
|
<ul data-role="listview" data-inset="false">
|
|
<li data-filtertext="Planets Acura">Earth</li>
|
|
<li data-filtertext="Planets Jupiter">Jupiter</li>
|
|
<li data-filtertext="Planets Mars">Mars</li>
|
|
<li data-filtertext="Planets Mercury">Mercury</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div><!--/demo-html -->
|
|
<h2>Filter Anything</h2>
|
|
<p>The widget can be used for filtering on any element containing other elements, like a <code>div</code> containing <code>p</code> elements.
|
|
</p>
|
|
<div data-demo-html="true">
|
|
<form>
|
|
<input data-type="search" id="divOfPs-input"></input>
|
|
</form>
|
|
<div class="elements" data-filter="true" data-input="#divOfPs-input">
|
|
<p><strong>These</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
|
|
<p><strong>tags</strong> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
|
|
<p><strong>Tags</strong> erat, sed diam voluptua. At vero eos et accusam et justo duo dolores </p>
|
|
<p><strong>are</strong> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
|
|
<p><strong>Filterable</strong> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Filter Styling</h2>
|
|
<p>
|
|
The filter widget supports the same attributes as the previous listview extension. Use <code>data-filter-theme</code> to declare a specific theme for the text field (overriding inheritance). <code>data-filter-placeholder</code> allows you to customize the input's placeholder text. In addition, the filterable widget will synchronize options shared between the textinput widget and the widget whose children it filters to make sure that the value of the textinput widget options is the same as the value of the widget options. So, for example, if you set <code>data-inset="true"</code> on the listview, then the corresponding textinput widget will also be inset.</p>
|
|
<p><strong>NOTE:</strong> This behavior is deprecated and will be removed in 1.5.0. The correct way forward is to provide the text field (or any other widget that emits the "change" signal) as part of the original markup and to pass a selector that will retrieve it to the filterable widget via the <code>data-input</code> attribute.
|
|
</p>
|
|
|
|
<div data-demo-html="true">
|
|
<ul data-role="listview"
|
|
data-filter="true"
|
|
data-filter-placeholder="Find cars..."
|
|
data-filter-theme="a"
|
|
data-inset="true">
|
|
<li>Acura</li>
|
|
<li>Audi</li>
|
|
<li>BMW</li>
|
|
<li>Cadillac</li>
|
|
<li>Ferrari</li>
|
|
</ul>
|
|
</div><!--/demo-html -->
|
|
|
|
<h2>Filter Reveal</h2>
|
|
<p>
|
|
The filter reveal feature makes it easy to build a simple autocomplete
|
|
with local data. When a filter has the <code>data-filter-reveal="true"
|
|
</code> attribute, it will auto-hide all the list items when the search
|
|
field is blank. The <code>data-filter-placeholder</code> attribute can be
|
|
added to specify the placeholder text for the filter. If you need to search
|
|
against a long list of values, we provide a way to create a filter with a
|
|
<a href="../listview-autocomplete-remote/" data-ajax="false">remote
|
|
data source</a>.
|
|
</p>
|
|
|
|
<div data-demo-html="true">
|
|
<ul data-role="listview"
|
|
data-filter="true"
|
|
data-filter-reveal="true"
|
|
data-filter-placeholder="Search fruits..."
|
|
data-inset="true">
|
|
<li><a href="#">Apple</a></li>
|
|
<li><a href="#">Banana</a></li>
|
|
<li><a href="#">Cherry</a></li>
|
|
<li><a href="#">Cranberry</a></li>
|
|
<li><a href="#">Grape</a></li>
|
|
<li><a href="#">Orange</a></li>
|
|
</ul>
|
|
</div><!--/demo-html -->
|
|
|
|
<h2>Filter Custom Callback</h2>
|
|
<p>As with the listview extension, you can provide custom callback functions to the filter or override the filter altogether on the <code>filterablebeforefilter</code> event. Please note that the filter has a <strong>delay of 250ms</strong> before the filter actually triggers. This prevents running the filtering function multiple times while the user is typing.
|
|
</p>
|
|
|
|
<p>To set a custom filtering function that will become the new default for all filterable widgets, override the <code>filterCallback</code> option in the filterable widget prototype in a "mobileinit" signal handler:</p>
|
|
|
|
<pre><code>$( document ).one( "mobileinit", function() {
|
|
$.mobile.filterable.prototype.options.filterCallback = function( index, searchValue ) {
|
|
// In this function the keyword "this" refers to the element for which the
|
|
// code must decide whether it is to be filtered or not.
|
|
// A return value of true indicates that the element referred to by the
|
|
// keyword "this" is to be filtered.
|
|
// Returning false indicates that the item is to be displayed.
|
|
//
|
|
// your custom filtering logic goes here
|
|
});
|
|
});</code></pre>
|
|
|
|
<p>
|
|
To set a custom filtering function for a single filterable widget, set the <code>filterCallback</code> option:
|
|
</p>
|
|
|
|
<pre><code>$.mobile.document.one( "filterablecreate", "#myFilterable", function() {
|
|
$( "#myFilterable" ).filterable( "option", "filterCallback", function( index, searchValue ) {
|
|
// The previous example explains the signature of the callback function.
|
|
//
|
|
// your custom filtering logic goes here.
|
|
});
|
|
});</code></pre>
|
|
|
|
<p>
|
|
To override the filter altogether (for example when loading data server-side
|
|
or from localStorage), bind to the <code>filterablebeforefilter</code> event.
|
|
</p>
|
|
|
|
<pre><code>$( ".selector" ).on( "filterablebeforefilter", function( e, data ) {
|
|
var value;
|
|
|
|
e.preventDefault();
|
|
value = data.input.value;
|
|
// trigger own request to database
|
|
});
|
|
});</code></pre>
|
|
|
|
<h2>Pre-rendering</h2>
|
|
<p>The filterable widget runs the filter a single time during startup to make sure the list of children reflects the value entered in the search input. You can avoid this step by specifying the <code>data-enhanced="true"</code> attribute. When set to true, the filterable will assume that you have correctly applied the class <code>ui-screen-hidden</code> to those children that should be initially hidden.
|
|
</p>
|
|
<p>The filterable widget is able to use the search input whether or not the search input is itself pre-rendered. In the example below, both the search input and the filterable are pre-rendered.</p>
|
|
<div data-demo-html="true">
|
|
<form>
|
|
<div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
|
|
<input
|
|
data-type="search"
|
|
data-enhanced="true"
|
|
data-inset="false"
|
|
id="pre-rendered-example-input"
|
|
placeholder="Filter items..."
|
|
value="au"></input>
|
|
</div>
|
|
<div
|
|
data-role="controlgroup"
|
|
data-enhanced="true"
|
|
data-filter="true"
|
|
data-filter-reveal="true"
|
|
data-input="#pre-rendered-example-input"
|
|
class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
|
|
<div class="ui-controlgroup-controls">
|
|
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-shadow ui-screen-hidden">Acura</a>
|
|
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-first-child ui-shadow ui-last-child">Renault</a>
|
|
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-shadow ui-screen-hidden">Hyundai</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</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>
|