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

Commit 78cb933

Browse files
jaspermdegrootjaspermdegroot
committed
Listview: Simplified markup, no more buttonMarkup.
1 parent 0c38dda commit 78cb933

File tree

2 files changed

+231
-65
lines changed

2 files changed

+231
-65
lines changed

‎css/structure/jquery.mobile.listview.css‎

Lines changed: 218 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,102 @@
1-
.ui-listview { margin: 0; }
2-
ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
3-
.ui-content .ui-listview, .ui-panel-inner > .ui-listview { margin: -15px; }
4-
.ui-collapsible-content > .ui-listview { margin: -10px -15px; }
5-
.ui-content .ui-listview-inset, .ui-panel-inner .ui-listview-inset { margin: 1em 0; }
6-
.ui-collapsible-content .ui-listview-inset { margin: .5em 0; }
7-
.ui-listview, .ui-li { list-style: none; padding: 0; }
8-
.ui-li, .ui-li.ui-field-contain { display: block; margin: 0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
9-
.ui-li.ui-btn, .ui-li.ui-field-contain, .ui-li-divider, .ui-li-static { margin: 0; }
10-
.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
11-
.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child { border-bottom-width: 1px; }
12-
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li.ui-first-child { border-top-width: 0; }
13-
.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li.ui-last-child { border-bottom-width: 0; }
14-
.ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
15-
.ui-li-static { background-image: none; }
16-
.ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
17-
ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal; counter-increment: listnumbering; content: counter(listnumbering) ". "; }
18-
ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
19-
20-
.ui-listview > li > .ui-btn:focus {
1+
.ui-listview,
2+
.ui-li {
3+
margin: 0;
4+
padding: 0;
5+
list-style: none;
6+
}
7+
.ui-content .ui-listview,
8+
.ui-panel-inner > .ui-listview {
9+
margin: -15px;
10+
}
11+
.ui-collapsible-content > .ui-listview {
12+
margin: -10px -15px;
13+
}
14+
.ui-content .ui-listview-inset,
15+
.ui-panel-inner > .ui-listview-inset {
16+
margin: 1em 0;
17+
}
18+
.ui-collapsible-content > .ui-listview-inset {
19+
margin: .5em 0;
20+
}
21+
.ui-li {
22+
display: block;
23+
position: relative;
24+
overflow: visible;
25+
}
26+
.ui-li-static,
27+
.ui-li-divider,
28+
.ui-li > .ui-btn {
29+
margin: 0;
30+
display: block;
31+
position: relative;
32+
text-align: left;
33+
text-overflow: ellipsis;
34+
overflow: hidden;
35+
white-space: nowrap;
36+
}
37+
.ui-li > .ui-btn:focus {
2138
z-index: 1;
2239
}
23-
24-
.ui-listview .ui-li > .ui-btn-text {
25-
-webkit-border-radius: inherit;
26-
border-radius: inherit;
40+
.ui-li,
41+
.ui-li > .ui-btn {
42+
border-width: 0;
43+
border-top-width: 1px;
44+
}
45+
.ui-listview-inset .ui-li-static,
46+
.ui-listview-inset .ui-li-divider,
47+
.ui-listview-inset .ui-li > .ui-btn {
48+
border-right-width: 1px;
49+
border-left-width: 1px;
50+
}
51+
.ui-li-static.ui-last-child,
52+
.ui-li-divider.ui-last-child,
53+
.ui-li.ui-last-child > .ui-btn {
54+
border-bottom-width: 1px;
55+
}
56+
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li-static.ui-first-child,
57+
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li-divider.ui-first-child,
58+
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li.ui-first-child > .ui-btn {
59+
border-top-width: 0;
60+
}
61+
.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li-static.ui-last-child,
62+
.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li-divider.ui-last-child,
63+
.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li.ui-last-child > .ui-btn {
64+
border-bottom-width: 0;
2765
}
2866
.ui-listview > .ui-li.ui-first-child,
29-
.ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
67+
.ui-listview > .ui-li.ui-first-child > .ui-btn {
3068
-webkit-border-top-right-radius: inherit;
3169
border-top-right-radius: inherit;
3270
-webkit-border-top-left-radius: inherit;
3371
border-top-left-radius: inherit;
3472
}
3573
.ui-listview > .ui-li.ui-last-child,
36-
.ui-listview .ui-btn.ui-last-child > .ui-li > .ui-btn-text > .ui-link-inherit,
74+
.ui-listview > .ui-li.ui-last-child > .ui-btn,
3775
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset),
38-
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child {
76+
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child,
77+
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child > .ui-btn {
3978
-webkit-border-bottom-right-radius: inherit;
4079
border-bottom-right-radius: inherit;
4180
-webkit-border-bottom-left-radius: inherit;
4281
border-bottom-left-radius: inherit;
4382
}
83+
.ui-listview > .ui-li.ui-li-has-alt > .ui-btn {
84+
-webkit-border-top-right-radius: 0;
85+
border-bottom-top-radius: 0;
86+
-webkit-border-bottom-right-radius: 0;
87+
border-bottom-right-radius: 0;
88+
}
4489
.ui-listview > .ui-li.ui-first-child .ui-li-link-alt {
45-
-webkit-border-top-right-radius: inherit;
46-
border-top-right-radius: inherit;
90+
-webkit-border-top-left-radius: 0;
91+
border-top-left-radius: 0;
92+
-webkit-border-top-right-radius: inherit;
93+
border-bottom-top-radius: inherit;
4794
}
4895
.ui-listview > .ui-li.ui-last-child .ui-li-link-alt {
96+
-webkit-border-bottom-left-radius: 0;
97+
border-bottom-left-radius: 0;
4998
-webkit-border-bottom-right-radius: inherit;
50-
border-bottom-right-radius: inherit;
99+
border-bottom-right-radius: inherit;
51100
}
52101
.ui-listview > .ui-li.ui-first-child .ui-li-thumb:not(.ui-li-icon) {
53102
-webkit-border-top-left-radius: inherit;
@@ -57,37 +106,152 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
57106
-webkit-border-bottom-left-radius: inherit;
58107
border-bottom-left-radius: inherit;
59108
}
60-
.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
61-
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
62-
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 59px; padding-left: 100px; }
63-
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; }
64-
.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count, .ui-li-divider.ui-li-has-count { padding-right: 45px; }
65-
.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 40px; }
66-
.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; }
67-
.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
68-
.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
69-
ol.ui-listview > .ui-li .ui-li-heading { display: inline-block; width: 100%; margin-left: -1.3em; text-indent: 1.3em; vertical-align: middle; }
70-
ol.ui-listview > .ui-li .ui-li-desc:not(.ui-li-aside) { text-indent: 1.55em; }
71-
.ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
72-
.ui-listview .ui-li-icon { max-height: 16px; max-width: 16px; left: 10px; top: .9em; }
73-
.ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
74-
.ui-li-aside { float: right; width: 50%; text-align: right; margin: .3em 0; }
109+
.ui-li > .ui-btn,
110+
.ui-li-static.ui-li {
111+
padding: .7em 15px;
112+
}
113+
.ui-li-divider {
114+
padding: .5em 15px;
115+
font-size: 14px;
116+
font-weight: bold;
117+
cursor: default;
118+
}
119+
.ui-li-has-arrow > .ui-btn,
120+
.ui-li-static.ui-li-has-arrow {
121+
padding-right: 40px;
122+
}
123+
.ui-li-has-count > .ui-btn,
124+
.ui-li-static.ui-li-has-count,
125+
.ui-li-divider.ui-li-has-count {
126+
padding-right: 45px;
127+
}
128+
.ui-li-has-arrow.ui-li-has-count > .ui-btn,
129+
.ui-li-static.ui-li-has-arrow.ui-li-has-count {
130+
padding-right: 75px;
131+
}
132+
.ui-li-has-thumb > .ui-btn,
133+
.ui-li-static.ui-li-has-thumb {
134+
min-height: 58px;
135+
padding-left: 100px;
136+
}
137+
.ui-li-has-icon > .ui-btn,
138+
.ui-li-static.ui-li-has-icon {
139+
min-height: 20px;
140+
padding-left: 40px;
141+
}
142+
.ui-li-count {
143+
position: absolute;
144+
font-size: 11px;
145+
font-weight: bold;
146+
padding: .2em .5em;
147+
right: 10px;
148+
top: 50%;
149+
margin-top: -.9em;
150+
}
151+
.ui-li-has-arrow.ui-li-has-count .ui-li-count {
152+
right: 40px;
153+
}
154+
.ui-li-has-alt.ui-li-has-count .ui-li-count {
155+
right: 53px;
156+
}
157+
.ui-li-thumb {
158+
position: absolute;
159+
left: 0;
160+
top: 0;
161+
max-height: 80px;
162+
max-width: 80px;
163+
}
164+
.ui-li-icon {
165+
position: absolute;
166+
left: 10px;
167+
top: .9em;
168+
max-height: 16px;
169+
max-width: 16px;
170+
}
171+
.ui-li-heading {
172+
font-size: 16px;
173+
font-weight: bold;
174+
display: block;
175+
margin: .6em 0;
176+
text-overflow: ellipsis;
177+
overflow: hidden;
178+
white-space: nowrap;
179+
}
180+
.ui-li-desc {
181+
font-size: 12px;
182+
font-weight: normal;
183+
display: block;
184+
margin: -.5em 0 .6em;
185+
text-overflow: ellipsis;
186+
overflow: hidden;
187+
white-space: nowrap;
188+
}
189+
.ui-li-aside {
190+
float: right;
191+
width: 50%;
192+
text-align: right;
193+
margin: .3em 0;
194+
}
75195
@media all and (min-width: 480px){
76196
.ui-li-aside { width: 45%; }
77197
}
78-
.ui-li-divider { cursor: default; }
79-
.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 53px; }
80-
.ui-li-has-alt.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt.ui-li-has-count { padding-right: 88px; }
81-
.ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 10px; }
82-
.ui-li-has-count.ui-li-divider .ui-li-count, .ui-li-has-count .ui-link-inherit .ui-li-count { margin-top: -.95em; }
83-
.ui-li-has-arrow.ui-li-has-count .ui-li-count { right: 40px; }
84-
.ui-li-has-alt.ui-li-has-count .ui-li-count { right: 53px; }
85-
.ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; z-index: 2; }
198+
ol.ui-listview,
199+
ol.ui-listview .ui-li-divider {
200+
counter-reset: listnumbering;
201+
}
202+
ol.ui-listview .ui-li > .ui-btn:before,
203+
ol.ui-listview .ui-li-static:before,
204+
.ui-li-dec {
205+
font-size: .8em;
206+
display: inline-block;
207+
padding-right: .3em;
208+
font-weight: normal;
209+
counter-increment: listnumbering;
210+
content: counter(listnumbering) ". ";
211+
}
212+
ol.ui-listview .ui-li-jsnumbering:before {
213+
content: "" !important;
214+
}
215+
ol.ui-listview .ui-li-heading {
216+
display: inline-block;
217+
width: 100%;
218+
margin-left: -1.3em;
219+
text-indent: 1.3em;
220+
vertical-align: middle;
221+
}
222+
ol.ui-listview .ui-li-desc:not(.ui-li-aside) {
223+
text-indent: 1.55em;
224+
}
225+
.ui-li.ui-li-has-alt > .ui-btn {
226+
margin-right: 40px;
227+
border-right-width: 0;
228+
}
229+
.ui-li.ui-li-has-alt a.ui-li-link-alt {
230+
position: absolute;
231+
width: 40px;
232+
height: 100%;
233+
min-height: auto;
234+
-webkit-box-sizing: border-box;
235+
-moz-box-sizing: border-box;
236+
box-sizing: border-box;
237+
border-left-width: 1px;
238+
top: 0;
239+
right: 0;
240+
margin: 0;
241+
padding: 0;
242+
z-index: 2;
243+
}
244+
.ui-listview-inset .ui-li.ui-li-has-alt a.ui-li-link-alt {
245+
border-right-width: 1px;
246+
}
247+
.ui-li.ui-li-has-alt a.ui-li-link-alt:focus {
248+
z-index: 3;
249+
}
250+
86251
.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -13px 0 0 0; border-bottom-width: 1px; z-index: -1;}
87252
.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;}
88253
.ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; }
89254
.ui-li-link-alt .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
90-
91255
.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0; }
92256

93257
.ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px; }
@@ -97,7 +261,3 @@ ol.ui-listview > .ui-li .ui-li-desc:not(.ui-li-aside) { text-indent: 1.55em; }
97261
.ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; }
98262

99263
.ui-li.ui-screen-hidden{ display:none; }
100-
/* Odd iPad positioning issue. */
101-
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
102-
.ui-li .ui-btn-text { overflow: visible; }
103-
}

‎js/widgets/listview.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
113113
itemClassDict = {},
114114
item, itemClass, itemTheme,
115115
a, last, splittheme, counter, startCount, newStartCount, countParent, icon, linkIcon,
116-
pos, numli, isDivider;
116+
pos, numli, isDivider, buttonClass;
117117

118118
if ( ol && jsCount ) {
119119
$list.find( ".ui-li-dec" ).remove();
@@ -134,7 +134,7 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
134134
}
135135

136136
if ( !o.theme ) {
137-
o.theme = $.mobile.getInheritedTheme( this.element, "a" );
137+
o.theme = "a";
138138
}
139139

140140
for ( pos = 0, numli = li.length; pos < numli; pos++ ) {
@@ -150,20 +150,26 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
150150
if ( a.length && !isDivider ) {
151151
icon = getAttr( item[ 0 ], "icon", true );
152152

153-
item.buttonMarkup({
153+
/* item.buttonMarkup({
154154
wrapperEls: "div",
155155
shadow: false,
156156
corners: false,
157157
iconpos: "right",
158158
icon: a.length > 1 || icon === false ? false : icon || listicon || o.icon,
159159
theme: itemTheme
160-
});
161-
160+
}); */
161+
162162
if ( ( icon !== false ) && ( a.length === 1 ) ) {
163163
item.addClass( "ui-li-has-arrow" );
164164
}
165+
166+
buttonClass = "ui-btn";
167+
168+
if ( itemTheme ) {
169+
buttonClass += " ui-btn-" + itemTheme;
170+
}
165171

166-
a.first().removeClass( "ui-link" ).addClass( "ui-link-inherit" );
172+
a.first().removeClass( "ui-link" ).addClass( buttonClass );
167173

168174
if ( a.length > 1 ) {
169175
itemClass += " ui-li-has-alt";
@@ -277,7 +283,7 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
277283
// opposed to 30 seconds.
278284

279285
this._addThumbClasses( li );
280-
this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
286+
this._addThumbClasses( $list.find( ".ui-btn" ) );
281287

282288
this._addFirstLastClasses( li, this._getVisibles( li, create ), create );
283289
// autodividers binds to this to redraw dividers after the listview refresh

0 commit comments

Comments
 (0)