Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit cf259a4

Browse files
Gabriel Schulhofgseguin
Gabriel Schulhof
authored and
gseguin
committed
Collapsible list item: New demo: Fixes #5539 - Collapsible list items
1 parent 82ffc81 commit cf259a4

File tree

1 file changed

+251
-0
lines changed

1 file changed

+251
-0
lines changed

‎demos/listview-collapsible-item/index.php

+251
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
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 - 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+
<style id="collapsible-list-item-style">
15+
/* Basic settings */
16+
.ui-li-static.ui-collapsible {
17+
padding: 0;
18+
}
19+
20+
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview,
21+
.ui-li-static.ui-collapsible > .ui-collapsible-heading {
22+
margin: 0;
23+
}
24+
25+
.ui-li-static.ui-collapsible > .ui-collapsible-content {
26+
padding-top: 0;
27+
padding-bottom: 0;
28+
padding-right: 0;
29+
border-bottom-width: 0;
30+
}
31+
32+
/* collapse vertical borders */
33+
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > li.ui-last-child,
34+
.ui-li-static.ui-collapsible.ui-collapsible-collapsed > .ui-collapsible-heading > a.ui-btn {
35+
border-bottom-width: 0;
36+
}
37+
38+
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > li.ui-first-child,
39+
.ui-li-static.ui-collapsible > .ui-collapsible-heading > a.ui-btn {
40+
border-top-width: 0;
41+
}
42+
43+
/* Remove right borders */
44+
.ui-li-static.ui-collapsible > .ui-collapsible-heading > a.ui-btn,
45+
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > .ui-li-static,
46+
.ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > li > a.ui-btn,
47+
.ui-li-static.ui-collapsible > .ui-collapsible-content {
48+
border-right-width: 0;
49+
}
50+
51+
/* Remove left borders */
52+
/* Here, we need class ui-listview-outer to identify the outermost listview */
53+
.ui-listview-outer > .ui-li-static.ui-collapsible .ui-li-static.ui-collapsible.ui-collapsible,
54+
.ui-listview-outer > .ui-li-static.ui-collapsible > .ui-collapsible-heading > a.ui-btn,
55+
.ui-li-static.ui-collapsible > .ui-collapsible-content {
56+
border-left-width: 0;
57+
}
58+
</style>
59+
<style id="flat-sublist-style">
60+
/* Additional rules for flat sublists */
61+
/* Remove some more left borders and paddings for flat sublists */
62+
.ui-listview-flat-sublists .ui-li-static.ui-collapsible > .ui-collapsible-content {
63+
padding-left: 0;
64+
}
65+
66+
.ui-listview-outer.ui-listview-flat-sublists .ui-li-static.ui-collapsible > .ui-collapsible-heading > a.ui-btn,
67+
.ui-listview-outer.ui-listview-flat-sublists .ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > .ui-li-static,
68+
.ui-listview-outer.ui-listview-flat-sublists .ui-li-static.ui-collapsible > .ui-collapsible-content > .ui-listview > li > a.ui-btn {
69+
border-left-width: 0;
70+
}
71+
</style>
72+
</head>
73+
<body>
74+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
75+
76+
<div data-role="header" class="jqm-header">
77+
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
78+
<p>Demos <span class="jqm-version"></span></p>
79+
<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>
80+
<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>
81+
</div><!-- /header -->
82+
83+
<div data-role="content" class="jqm-content">
84+
85+
<h1>Collapsible list item</h1>
86+
87+
<p>You can render list items collapsible by instantiating collapsible widgets on them and adding some custom CSS to collapse borders. In all the examples below, the outermost listview has class <code>ui-listview-outer</code> to identify it as the outermost listview in the tree structure of indented lists.</p>
88+
89+
<h2>Regular istview</h2>
90+
91+
<div data-demo-html="true" data-demo-css="#collapsible-list-item-style">
92+
<ul data-role="listview" class="ui-listview-outer">
93+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
94+
<h2>Sublist title</h2>
95+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
96+
<li>Some Text</li>
97+
<li><a href="#">Some Clickable Text</a></li>
98+
<li><a href="#">Some More Clickable Text</a></li>
99+
<li>Some More Text</li>
100+
</ul>
101+
</li>
102+
<li><a href="#">Outer Clickable Text</a></li>
103+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
104+
<h2>Sublist title<p>Small text</p></h2>
105+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
106+
<li>Some Text</li>
107+
<li><a href="#">Some Clickable Text</a></li>
108+
<li><a href="#">Some More Clickable Text</a></li>
109+
<li>Some More Text</li>
110+
</ul>
111+
</li>
112+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
113+
<h2>Another Sublist</h2>
114+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
115+
<li>Another Sublist Item</li>
116+
<li><a href="#">Clickable Sublist Item</a></li>
117+
<li><a href="#">Another Clickable Sublist Item</a></li>
118+
<li>Second Item In Another Sublist</li>
119+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
120+
<h2>A Sub-sublist</h2>
121+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
122+
<li>A Sub-sublist Item</li>
123+
<li><a href="#">Clickable Sub-sublist Item</a></li>
124+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
125+
<h2>A Sub-sub-sublist</h2>
126+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
127+
<li>A sub-sub-sublist Item</li>
128+
</ul>
129+
</li>
130+
<li><a href="#">Another Clickable Sub-sublist Item</a></li>
131+
<li>Another Sub-sublist Item</li>
132+
</ul>
133+
</li>
134+
</ul>
135+
</li>
136+
</ul>
137+
</div>
138+
139+
<h2>Inset istview</h2>
140+
141+
<div data-demo-html="true" data-demo-css="#collapsible-list-item-style">
142+
<ul data-role="listview" data-inset="true" class="ui-listview-outer">
143+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
144+
<h2>Sublist title</h2>
145+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
146+
<li>Some Text</li>
147+
<li><a href="#">Some Clickable Text</a></li>
148+
<li><a href="#">Some More Clickable Text</a></li>
149+
<li>Some More Text</li>
150+
</ul>
151+
</li>
152+
<li><a href="#">Outer Clickable Text</a></li>
153+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
154+
<h2>Sublist title<p>Small text</p></h2>
155+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
156+
<li>Some Text</li>
157+
<li><a href="#">Some Clickable Text</a></li>
158+
<li><a href="#">Some More Clickable Text</a></li>
159+
<li>Some More Text</li>
160+
</ul>
161+
</li>
162+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
163+
<h2>Another Sublist</h2>
164+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
165+
<li>Another Sublist Item</li>
166+
<li><a href="#">Clickable Sublist Item</a></li>
167+
<li><a href="#">Another Clickable Sublist Item</a></li>
168+
<li>Second Item In Another Sublist</li>
169+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
170+
<h2>A Sub-sublist</h2>
171+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
172+
<li>A Sub-sublist Item</li>
173+
<li><a href="#">Clickable Sub-sublist Item</a></li>
174+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
175+
<h2>A Sub-sub-sublist</h2>
176+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
177+
<li>A sub-sub-sublist Item</li>
178+
</ul>
179+
</li>
180+
<li><a href="#">Another Clickable Sub-sublist Item</a></li>
181+
<li>Another Sub-sublist Item</li>
182+
</ul>
183+
</li>
184+
</ul>
185+
</li>
186+
</ul>
187+
</div>
188+
189+
<h2>Flat sublists</h2>
190+
<p>With a few more rules you can specify that sublists are not to be indented. In the example below sublist indentation is on by default. You flatten sublists by adding the class <code>ui-flat-sublists</code> to the parent listview.</p>
191+
192+
<div data-demo-html="true" data-demo-css="#collapsible-list-item-style,#flat-sublist-style">
193+
<ul data-role="listview" class="ui-listview-outer">
194+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
195+
<h2>Sublist title</h2>
196+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
197+
<li>Some Text</li>
198+
<li><a href="#">Some Clickable Text</a></li>
199+
<li><a href="#">Some More Clickable Text</a></li>
200+
<li>Some More Text</li>
201+
</ul>
202+
</li>
203+
<li><a href="#">Outer Clickable Text</a></li>
204+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
205+
<h2>Sublist title<p>Small text</p></h2>
206+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
207+
<li>Some Text</li>
208+
<li><a href="#">Some Clickable Text</a></li>
209+
<li><a href="#">Some More Clickable Text</a></li>
210+
<li>Some More Text</li>
211+
</ul>
212+
</li>
213+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
214+
<h2>Another Sublist</h2>
215+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
216+
<li>Another Sublist Item</li>
217+
<li><a href="#">Clickable Sublist Item</a></li>
218+
<li><a href="#">Another Clickable Sublist Item</a></li>
219+
<li>Second Item In Another Sublist</li>
220+
<li data-role="collapsible" class="ui-listview-flat-sublists" data-iconpos="right" data-collapsed="false" data-shadow="false" data-corners="false">
221+
<h2>A Sub-sublist (with flat sublists)</h2>
222+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
223+
<li>A Sub-sublist Item</li>
224+
<li><a href="#">Clickable Sub-sublist Item</a></li>
225+
<li data-role="collapsible" data-iconpos="right" data-collapsed="false" data-role="listview" data-shadow="false" data-inset="true" data-corners="false" class="ui-listview-indented-sublists">
226+
<h2>A Sub-sub-sublist</h2>
227+
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
228+
<li>A sub-sub-sublist Item</li>
229+
</ul>
230+
</li>
231+
<li><a href="#">Another Clickable Sub-sublist Item</a></li>
232+
<li>Another Sub-sublist Item</li>
233+
</ul>
234+
</li>
235+
</ul>
236+
</li>
237+
</ul>
238+
</div>
239+
240+
</div><!-- /content -->
241+
242+
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
243+
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
244+
<p>Copyright 2013 The jQuery Foundation</p>
245+
</div><!-- /footer -->
246+
247+
<?php include( '../jqm-panels.php' ); ?>
248+
249+
</div><!-- /page -->
250+
</body>
251+
</html>

0 commit comments

Comments
 (0)