Skip to content

Commit 9858387

Browse files
arschmitzarschmitz
committed
Demos: Add demo for 1.3 style nested listviews
1 parent 2134d2e commit 9858387

2 files changed

Lines changed: 118 additions & 0 deletions

File tree

‎demos/jqm-contents.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
<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>
104104
<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>
105105
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
106+
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
106107
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
107108
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
108109
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>

‎demos/listview-nested-lists/index.php‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Listviews collapsible list items - jQuery Mobile Demos</title>
7+
<link rel="shortcut icon" href="../favicon.ico">
8+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
9+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
10+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
11+
<script src="../../js/jquery.js"></script>
12+
<script src="../_assets/js/"></script>
13+
<script src="../../js/"></script>
14+
<script id="script" src="https://rawgithub.com/arschmitz/jquery-mobile-nestedlists/master/jquery.mobile.nestedlists.js"></script>
15+
16+
</head>
17+
<body>
18+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
19+
20+
<div data-role="header" class="jqm-header">
21+
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
22+
<p><span class="jqm-version"></span> Demos</p>
23+
<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>
24+
<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>
25+
</div><!-- /header -->
26+
27+
<div role="main" class="ui-content jqm-content">
28+
29+
<h1>Nested Listviews</h1>
30+
31+
<p>
32+
Nested listviews were deprecated in jQuery Mobile 1.3 and were removed in 1.4
33+
For those wishing to use the 1.3 behivor there is a plugin available at
34+
<a href="https://github.com/arschmitz/jquery-mobile-nestedlists/">https://github.com/arschmitz/jquery-mobile-nestedlists/</a>
35+
with this plugin you can just drop it in after the jQuery mobile script to be able to use jQuery mobile 1.3 style nested listviews.
36+
You can use the same markup all you need to do is drop in the script.
37+
</p>
38+
<div data-demo-html="true" data-demo-js="#script">
39+
<ul data-role="listview" data-inset="true">
40+
<li data-role="list-divider" data-theme="b"><h1>Seperate Page Sublists</h1></li>
41+
<li data-role="list-divider"><h1>Nested list page generated from markup requires plugin</h1></li>
42+
<li>
43+
Infiniti
44+
<ul >
45+
<li>G37</li>
46+
<li>Q50</li>
47+
<li>M57</li>
48+
<li>FX</li>
49+
<li>EX</li>
50+
</ul>
51+
</li>
52+
<li >
53+
<h1>Audi</h1>
54+
<ul >
55+
<li>A6</li>
56+
<li>S6</li>
57+
<li>A7</li>
58+
<li>S7</li>
59+
<li>A8</li>
60+
<li>S8</li>
61+
</ul>
62+
</li>
63+
<li>
64+
<h1>BMW</h1>
65+
<ul >
66+
<li>1 series</li>
67+
<li>3 series</li>
68+
<li>5 series</li>
69+
<li>6 series</li>
70+
<li>7 series</li>
71+
</ul>
72+
</li>
73+
<li>
74+
<h1>Cadillac
75+
</h1>
76+
<ul >
77+
<li>CTS</li>
78+
<li>ATS</li>
79+
<li>XTS</li>
80+
</ul>
81+
</li>
82+
<li>
83+
<h1>Lexus</h1>
84+
<ul >
85+
<li>IS</li>
86+
<li>ES</li>
87+
<li>GS</li>
88+
<li>LS</li>
89+
</ul>
90+
</li>
91+
<li>
92+
<h1>Mercedes</h1>
93+
<ul >
94+
<li>A-Class</li>
95+
<li>B-Class</li>
96+
<li>C-Class</li>
97+
<li>CL-Class</li>
98+
<li>E-Class</li>
99+
</ul>
100+
</li>
101+
</ul>
102+
</div>
103+
</div><!-- /content -->
104+
105+
<?php include( '../jqm-navmenu.php' ); ?>
106+
107+
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
108+
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
109+
<p>Copyright 2013 The jQuery Foundation</p>
110+
</div><!-- /footer -->
111+
112+
<?php include( '../jqm-search.php' ); ?>
113+
114+
</div><!-- /page -->
115+
116+
</body>
117+
</html>

0 commit comments

Comments
 (0)