Skip to content

Commit 844ad71

Browse files
arschmitzarschmitz
committed
Merge branch 'master' of https://github.com/jquery/jquery-mobile into ext-panels
2 parents 238e696 + df60622 commit 844ad71

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+2585
-908
lines changed

‎css/structure/jquery.mobile.core.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,3 +383,8 @@ div.ui-mobile-viewport {
383383
overflow: hidden;
384384
clip: rect(1px,1px,1px,1px);
385385
}
386+
387+
/* Used for hiding elements by the filterable widget. You can also use this class to hide list items or buttons in controlgroups; this ensures correct corner styling. */
388+
.ui-screen-hidden {
389+
display: none !important;
390+
}

‎css/structure/jquery.mobile.forms.flipswitch.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.ui-flipswitch {
2+
display: inline-block;
3+
vertical-align: middle;
4+
width: 5.875em; /* Override this and padding-left in next rule if you use labels other than "on/off" and need more space */
5+
height: 1.875em;
6+
border-width: 1px;
7+
border-style: solid;
8+
margin: .5em 0;
9+
overflow: hidden;
10+
-webkit-transition-property: padding, width, background-color, color, border-color;
11+
-moz-transition-property: padding, width, background-color, color, border-color;
12+
-o-transition-property: padding, width, background-color, color, border-color;
13+
transition-property: padding, width, background-color, color, border-color;
14+
-webkit-transition-duration: 100ms;
15+
-moz-transition-duration: 100ms;
16+
-o-transition-duration: 100ms;
17+
transition-duration: 100ms;
18+
-webkit-touch-callout: none;
19+
-webkit-user-select: none;
20+
-moz-user-select: none;
21+
-ms-user-select: none;
22+
user-select: none;
23+
cursor: pointer;
24+
}
25+
.ui-flipswitch.ui-flipswitch-active {
26+
padding-left: 4em; /* Override this and width in previous rule if you use labels other than "on/off" and need more space */
27+
width: 1.875em;
28+
}
29+
.ui-flipswitch-input {
30+
position: absolute;
31+
height: 1px;
32+
width: 1px;
33+
margin: -1px;
34+
overflow: hidden;
35+
clip: rect(1px,1px,1px,1px);
36+
border: 0;
37+
outline: 0;
38+
filter: Alpha(Opacity=0);
39+
opacity: 0;
40+
}
41+
.ui-flipswitch .ui-btn.ui-flipswitch-on,
42+
.ui-flipswitch .ui-flipswitch-off {
43+
float: left;
44+
height: 1.75em;
45+
margin: .0625em;
46+
line-height: 1.65em;
47+
}
48+
.ui-flipswitch .ui-btn.ui-flipswitch-on {
49+
width: 1.75em;
50+
padding: 0;
51+
text-indent: -2.6em; /* Override this to center text if you use a label other than "on" */
52+
text-align: left;
53+
border-width: 1px;
54+
border-style: solid;
55+
-webkit-box-sizing: border-box;
56+
-moz-box-sizing: border-box;
57+
-ms-box-sizing: border-box;
58+
box-sizing: border-box;
59+
border-radius: inherit;
60+
overflow: visible;
61+
color: inherit;
62+
text-shadow: inherit;
63+
}
64+
.ui-flipswitch .ui-flipswitch-off {
65+
padding: 1px;
66+
text-indent: 1em; /* Override this to center text if you use a label other than "off" */
67+
}
68+
@media (min-width: 28em) {
69+
.ui-field-contain > label + .ui-flipswitch {
70+
display: inline-block;
71+
width: 5.875em; /* If you override the width for .ui-flipswitch you should repeat the same value here */
72+
-webkit-box-sizing: content-box;
73+
-moz-box-sizing: content-box;
74+
-ms-box-sizing: content-box;
75+
box-sizing: content-box;
76+
}
77+
.ui-field-contain .ui-flipswitch.ui-flipswitch-active {
78+
width: 1.875em;
79+
}
80+
}

‎css/structure/jquery.mobile.forms.select.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@
132132
cursor: default;
133133
}
134134

135-
.ui-screen-hidden,
136135
.ui-selectmenu .ui-selectmenu-placeholder {
137136
display: none;
138137
}

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

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -270,28 +270,3 @@ ol.ui-listview > li img:first-child + * ~ * {
270270
margin-top: 0;
271271
text-indent: 2.04em; /* (1.4em + .3em) * .9em / .75em */
272272
}
273-
.ui-listview-filter {
274-
border-width: 0;
275-
overflow: hidden;
276-
margin: -1em -1em 1em -1em;
277-
}
278-
.ui-listview-filter-inset {
279-
margin: 1em -.3125em -1em;
280-
background: transparent;
281-
}
282-
.ui-collapsible-content .ui-listview-filter {
283-
margin: -.625em -1em .625em -1em;
284-
border-bottom: inherit;
285-
}
286-
.ui-collapsible-content .ui-listview-filter-inset {
287-
margin: -.3125em;
288-
border-bottom-width: 0;
289-
}
290-
.ui-listview-filter .ui-input-search {
291-
margin: .3125em;
292-
width: auto;
293-
display: block;
294-
}
295-
.ui-listview > li.ui-screen-hidden {
296-
display:none;
297-
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
@import url( "jquery.mobile.forms.slider.tooltip.css" );
1818
@import url( "jquery.mobile.forms.rangeslider.css" );
1919
@import url( "jquery.mobile.forms.textinput.css" );
20+
@import url( "jquery.mobile.forms.flipswitch.css" );
2021
@import url( "jquery.mobile.table.css" );
2122
@import url( "jquery.mobile.table.columntoggle.css" );
2223
@import url( "jquery.mobile.table.reflow.css" );
2324
@import url( "jquery.mobile.panel.css" );
25+
@import url( "jquery.mobile.filterable.css" );

‎css/themes/default/jquery.mobile.theme.css

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,9 @@ label.ui-btn {
6767
.ui-btn-corner-all,
6868
.ui-btn.ui-corner-all,
6969
/* Slider track */
70-
.ui-slider-track.ui-corner-all {
70+
.ui-slider-track.ui-corner-all,
71+
/*flipswitch*/
72+
.ui-flipswitch.ui-corner-all {
7173
-webkit-border-radius: .3125em /*{global-radii-buttons}*/;
7274
border-radius: .3125em /*{global-radii-buttons}*/;
7375
}
@@ -331,6 +333,12 @@ html .ui-bar-a .ui-icon-checkbox-on:after,
331333
html .ui-body-a .ui-icon-checkbox-on:after,
332334
html body .ui-group-theme-a .ui-icon-checkbox-on:after,
333335
.ui-btn.ui-icon-checkbox-on.ui-btn-a:after,
336+
/* Active flipswitch background */
337+
.ui-page-theme-a .ui-flipswitch-active,
338+
html .ui-bar-a .ui-flipswitch-active,
339+
html .ui-body-a .ui-flipswitch-active,
340+
html body .ui-group-theme-a .ui-flipswitch-active,
341+
html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,
334342
/* Active slider track */
335343
.ui-page-theme-a .ui-slider-track .ui-btn-active,
336344
html .ui-bar-a .ui-slider-track .ui-btn-active,
@@ -511,6 +519,12 @@ html .ui-bar-b .ui-icon-checkbox-on:after,
511519
html .ui-body-b .ui-icon-checkbox-on:after,
512520
html body .ui-group-theme-b .ui-icon-checkbox-on:after,
513521
.ui-btn.ui-icon-checkbox-on.ui-btn-b:after,
522+
/* Active flipswitch background */
523+
.ui-page-theme-b .ui-flipswitch-active,
524+
html .ui-bar-b .ui-flipswitch-active,
525+
html .ui-body-b .ui-flipswitch-active,
526+
html body .ui-group-theme-b .ui-flipswitch-active,
527+
html body .ui-flipswitch.ui-bar-b.ui-flipswitch-active,
514528
/* Active slider track */
515529
.ui-page-theme-b .ui-slider-track .ui-btn-active,
516530
html .ui-bar-b .ui-slider-track .ui-btn-active,

‎demos/_assets/css/jqm-demos.css

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -119,11 +119,14 @@ body, .jqm-demos {
119119
display: block;
120120
border-top: 1px solid #e0e0e0;
121121
}
122-
.jqm-search > .ui-listview-filter {
122+
.jqm-search > .ui-filter {
123123
margin: 0 -.3125em;
124124
padding: 1px 0; /* to resolve Chrome rendering issue (border-bottom not visible */
125125
}
126-
.jqm-demos .jqm-search > .ui-listview-filter .ui-input-search {
126+
.jqm-content > .ui-filter {
127+
margin-bottom: 1.1em;
128+
}
129+
.jqm-demos .jqm-search > .ui-filter .ui-input-search {
127130
margin: 4px .3125em;
128131
}
129132
.jqm-search > .jqm-list {
@@ -434,48 +437,48 @@ h2.jqm-home-widget {
434437
}
435438

436439
/* List filter */
437-
.jqm-demos-home .jqm-content > .ui-listview-filter,
438-
.jqm-demos-index .jqm-content > .ui-listview-filter {
440+
.jqm-demos-home .jqm-content > .ui-filter,
441+
.jqm-demos-index .jqm-content > .ui-filter {
439442
margin-top: 0;
440443
margin-bottom: -.5em;
441444
}
442-
.jqm-demos-home .jqm-content > .ui-listview-filter .ui-input-search,
443-
.jqm-demos-index .jqm-content > .ui-listview-filter .ui-input-search,
444-
.jqm-demos-index .jqm-search-results-wrap > .ui-listview-filter .ui-input-search {
445+
.jqm-demos-home .jqm-content > .ui-filter .ui-input-search,
446+
.jqm-demos-index .jqm-content > .ui-filter .ui-input-search,
447+
.jqm-demos-index .jqm-search-results-wrap > .ui-filter .ui-input-search {
445448
background-color: #f9f9f9;
446449
border-color: #e5e5e5;
447450
border-color: rgba(0,0,0,.1);
448451
}
449-
.jqm-demos .jqm-search .ui-listview-filter .ui-input-search {
452+
.jqm-demos .jqm-search .ui-filter .ui-input-search {
450453
background-color: #f9f9f9;
451454
border-color: #e5e5e5;
452455
border-color: rgba(0,0,0,.1);
453456
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
454457
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
455458
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
456459
}
457-
.jqm-demos-home .jqm-content > .ui-listview-filter .ui-input-search.ui-focus,
458-
.jqm-demos-index .jqm-content > .ui-listview-filter .ui-input-search.ui-focus,
459-
.jqm-demos-index .jqm-search-results-wrap > .ui-listview-filter .ui-input-search.ui-focus {
460+
.jqm-demos-home .jqm-content > .ui-filter .ui-input-search.ui-focus,
461+
.jqm-demos-index .jqm-content > .ui-filter .ui-input-search.ui-focus,
462+
.jqm-demos-index .jqm-search-results-wrap > .ui-filter .ui-input-search.ui-focus {
460463
background-color: #fff;
461464
border-color: #34bae8;
462465
border-color: rgba(52,186,232,.2);
463466
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 0 9px rgba(52,186,232,.3);
464467
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 0 9px rgba(52,186,232,.2);
465468
box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 0 9px rgba(52,186,232,.2);
466469
}
467-
.jqm-demos .jqm-search .ui-listview-filter .ui-input-search.ui-focus {
470+
.jqm-demos .jqm-search .ui-filter .ui-input-search.ui-focus {
468471
background-color: #fff;
469472
border-color: #e5e5e5;
470473
border-color: rgba(0,0,0,.1);
471474
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
472475
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
473476
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
474477
}
475-
.jqm-demos .jqm-search > .ui-listview-filter .ui-input-text,
476-
.jqm-demos-home .jqm-content > .ui-listview-filter .ui-input-text,
477-
.jqm-demos-index .jqm-content > .ui-listview-filter .ui-input-text,
478-
.jqm-demos-index .jqm-search-results-wrap > .ui-listview-filter .ui-input-text {
478+
.jqm-demos .jqm-search > .ui-filter .ui-input-text,
479+
.jqm-demos-home .jqm-content > .ui-filter .ui-input-text,
480+
.jqm-demos-index .jqm-content > .ui-filter .ui-input-text,
481+
.jqm-demos-index .jqm-search-results-wrap > .ui-filter .ui-input-text {
479482
font-family: 'Open Sans', sans-serif;
480483
font-weight: 300;
481484
font-size: .95em;
@@ -625,7 +628,7 @@ h2.jqm-home-widget {
625628
background: none;
626629
border: none;
627630
}
628-
.jqm-demos .jqm-search > .ui-listview-filter .ui-input-search {
631+
.jqm-demos .jqm-search > .ui-filter .ui-input-search {
629632
margin: 0;
630633
}
631634
.jqm-search > .jqm-list {

‎demos/_assets/js/jqm-demos.js

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,6 @@ $( document ).on( "pageinit", ".jqm-demos", function() {
8484
theme: null,
8585
dividerTheme: null,
8686
icon: false,
87-
filter: true,
88-
filterReveal: true,
89-
filterPlaceholder: "Search...",
9087
autodividers: true,
9188
autodividersSelector: function ( li ) {
9289
return "";
@@ -121,18 +118,15 @@ $( document ).on( "pageinit", ".jqm-demos", function() {
121118
$( this ).find( ".jqm-search .ui-input-clear" ).trigger( "click" );
122119
});
123120

124-
$( this ).find( ".jqm-content ul.jqm-list " ).listview({
121+
$( this ).find( ".jqm-content ul.jqm-list" ).listview({
125122
globalNav: "demos",
126123
inset: true,
127124
theme: null,
128125
dividerTheme: null,
129126
icon: false,
130-
filter: true,
131-
filterReveal: true,
132-
filterPlaceholder: "Search...",
133-
arrowKeyNav: true,
134-
enterToNav: true,
135-
highlight: true
127+
arrowKeyNav: true,
128+
enterToNav: true,
129+
highlight: true
136130
});
137131

138132
$( this ).find( ".jqm-search-results-list li, .jqm-search li" ).each(function() {

‎demos/index.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<a href="http://api.jquerymobile.com" class="jqm-button" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" data-theme="f">Visit API Site </a>
3939
</div>
4040

41-
<ul data-role="listview" data-inset="true" data-theme="a" data-icon="false" data-filter-placeholder="Search..." class="jqm-list jqm-home-list">
41+
<ul data-role="listview" data-inset="true" data-theme="a" data-icon="false" class="jqm-list jqm-home-list">
4242
<li><a href="intro/"><h2>Introduction</h2><p>New to jQuery Mobile? Start here.</p></a></li>
4343
<li><a href="examples/"><h2>Demo Showcase</h2><p>Examples of how to customize and extend jQuery Mobile.</p></a></li>
4444
<li><a href="faq/"><h2>Questions &amp; Answers</h2><p>Common issues and questions, explained.</p></a></li>
@@ -49,7 +49,7 @@
4949

5050
<p class="jqm-intro">Test drive every component in the library, and easily build pages by copying and pasting the markup configuration you need.</p>
5151

52-
<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a" data-divider-theme="a" data-icon="false" data-filter-placeholder="Search widgets..." data-global-nav="demos" class="jqm-list">
52+
<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a" data-divider-theme="a" data-icon="false" data-filter-placeholder="Search widgets..." data-global-nav="demos" class="jqm-list jqm-widget-list">
5353
<?php include( 'nav-widgets.php' ); ?>
5454
</ul>
5555

‎demos/nav-examples.php

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66

77
<li data-section="Demo Showcase" data-filtertext="dynamic controlgroup buttons selects checkboxes forms"><a href="examples/controlgroups/dynamic-controlgroup.php" data-ajax="false">Dynamic controlgroup</a></li>
88

9+
<!--
10+
<li data-role="list-divider">Filter</li>
11+
12+
<li data-section="Demo Showcase" data-filtertext="running a custom filter query on local and remote storages"><a href="examples/filterable/server-side-filter.php" data-ajax="false">Local/remote storage Filter</a></li>
13+
-->
914
<li data-role="list-divider">Listviews</li>
1015

1116
<li data-section="Demo Showcase" data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="examples/listviews/grid-listview.php" data-ajax="false">Grid Listview</a></li>

‎demos/nav-widgets.php

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/" data-ajax="false">AJAX Navigation</a></li>
44

5-
<li data-section="Widgets" data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>
5+
<li data-section="Widgets" data-filtertext="autocomplete filter reveal listviews remote filtertextbeforefilter placeholder"><a href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>
66

77
<li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a href="widgets/buttons/" data-ajax="false">Buttons</a></li>
88

@@ -12,11 +12,15 @@
1212

1313
<li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a href="widgets/controlgroups/">Controlgroup</a></li>
1414

15+
<li data-section="Widgets" data-filtertext="filter elements sorting searching"><a href="widgets/filterable/">Filter <span class="ui-li-count">New</span></a></li>
16+
1517
<li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>
1618

1719
<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/fixed-toolbars/">Fixed toolbars</a></li>
1820

19-
<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.php" data-ajax="false">Flip switch toggle</a></li>
21+
<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.php" data-ajax="false">Flip switch, slider</a></li>
22+
23+
<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/flipswitch/index.php" data-ajax="false">Flip switch <span class="ui-li-count">New</span></a></a></li>
2024

2125
<li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer toolbar</a></li>
2226

‎demos/search.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="jqm-search">
2-
<ul class="jqm-list">
2+
<ul class="jqm-list" data-filter="true" data-filter-reveal="true">
33
<?php include( 'nav-widgets.php' ); ?>
44
<?php include( 'nav-examples.php' ); ?>
55
<?php include( 'nav-faq.php' ); ?>

‎demos/widgets/autocomplete/autocomplete-remote.php

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<script src="../../../js/"></script>
1414
<script>
1515
$( document ).on( "pageinit", "#myPage", function() {
16-
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
16+
$( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
1717
var $ul = $( this ),
1818
$input = $( data.input ),
1919
value = $input.val(),
@@ -43,7 +43,7 @@
4343
});
4444
</script>
4545
<style>
46-
.ui-listview-filter-inset {
46+
.ui-filter-inset {
4747
margin-top: 0;
4848
}
4949
</style>
@@ -60,11 +60,11 @@
6060

6161
<div data-role="content" class="jqm-content">
6262

63-
<h1>Remote autocomplete</h1>
63+
<h1>Remote autocomplete</h1>
6464

65-
<p class="jqm-intro">To use the listview filter as an autocomplete that taps into remote data sources, you can use the <code>listviewbeforefilter</code> event to dynamically populate a listview as a user types a search query.</p>
65+
<p class="jqm-intro">To use the filter as an autocomplete that taps into remote data sources, you can use the <code>filterablebeforefilter</code> event to dynamically populate a listview as a user types a search query.</p>
6666

67-
<p>This is useful when you have a very large data set like cities, zip codes, or products that can't be loaded up-front locally. Use the view source button to see the JavaScript that powers this demo.</p>
67+
<p>This is useful when you have a very large data set like cities, zip codes, or products that can't be loaded up-front locally. Use the view source button to see the JavaScript that powers this demo.</p>
6868
<p>If you have a small list of items, you can use the <a href="../listviews/">listview</a> filter reveal option to make an autocomplete with local listview data.</p>
6969

7070
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">

0 commit comments

Comments
 (0)