Listviews: ui-first-child/ui-last-child for corner and border styling

Author: jaspermdegroot

css/structure/jquery.mobile.listview.css

@@ -5,54 +5,50 @@ ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
 .ui-content .ui-listview-inset { margin: 1em 0; }
 .ui-collapsible-content .ui-listview-inset { margin: .5em 0; }
 .ui-listview, .ui-li { list-style: none; padding: 0; }
-.ui-li, .ui-li.ui-field-contain { display: block; margin: 0; position: relative; overflow: visible; text-align: left; border-width: 1px 0 1px 0; }
-.ui-li.ui-btn, .ui-li.ui-field-contain, .ui-li-static { margin: 0 0 -1px; }
-.ui-listview-inset .ui-li.ui-btn, .ui-listview-inset .ui-li-divider, .ui-listview-inset .ui-li.ui-field-contain, .ui-listview-inset .ui-li-static { border-right-width: 1px; border-left-width: 1px; }
-.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) .ui-listview > .ui-li:last-child { border-bottom-width: 0; }
-.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li:first-child { border-top-width: 0; }
+.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; }
+.ui-li.ui-btn, .ui-li.ui-field-contain, .ui-li-divider, .ui-li-static { margin: 0; }
+.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
+.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child { border-bottom-width: 1px; }
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li.ui-first-child { border-top-width: 0; }
+.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li.ui-last-child { border-bottom-width: 0; }
 .ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
 .ui-li-static { background-image: none; }
 .ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
 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) ". "; }
 ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
-/* Corner styling */
-.ui-listview > .ui-li:first-child,
-.ui-listview .ui-btn:first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
+
+.ui-listview > .ui-li.ui-first-child,
+.ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
 	-webkit-border-top-right-radius: inherit;	
 	border-top-right-radius: inherit;
 	-webkit-border-top-left-radius: inherit;
 	border-top-left-radius: inherit;
 }
-.ui-listview > .ui-li:last-child,
-.ui-listview .ui-btn:last-child > .ui-li > .ui-btn-text > .ui-link-inherit,
+.ui-listview > .ui-li.ui-last-child,
+.ui-listview .ui-btn.ui-last-child > .ui-li > .ui-btn-text > .ui-link-inherit,
 .ui-collapsible-content > .ui-listview:not(.ui-listview-inset),
-.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li:last-child {
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child {
 	-webkit-border-bottom-right-radius: inherit;
 	border-bottom-right-radius: inherit;
 	-webkit-border-bottom-left-radius: inherit;
 	border-bottom-left-radius: inherit;
 }
-.ui-listview > .ui-li:first-child .ui-li-link-alt {
+.ui-listview > .ui-li.ui-first-child .ui-li-link-alt {
 	-webkit-border-top-right-radius: inherit;	
 	border-top-right-radius: inherit;	
 }
-.ui-listview > .ui-li:last-child .ui-li-link-alt {
+.ui-listview > .ui-li.ui-last-child .ui-li-link-alt {
 	-webkit-border-bottom-right-radius: inherit;
 	border-bottom-right-radius: inherit;	
 }
-.ui-listview > .ui-li:first-child .ui-li-thumb {
+.ui-listview > .ui-li.ui-first-child .ui-li-thumb:not(.ui-li-icon) {
 	-webkit-border-top-left-radius: inherit;
 	border-top-left-radius: inherit;	
 }
-.ui-listview > .ui-li:last-child .ui-li-thumb {
+.ui-listview > .ui-li.ui-last-child .ui-li-thumb:not(.ui-li-icon) {
 	-webkit-border-bottom-left-radius: inherit;
 	border-bottom-left-radius: inherit;	
 }
-.ui-listview > .ui-li:first-child .ui-li-icon,
-.ui-listview > .ui-li:last-child .ui-li-icon {
-	-webkit-border-radius: 0;
-	border-radius: 0;		
-}
 .ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
 .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
 .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb  { min-height: 60px; padding-left: 100px; }

js/widgets/listview.filter.js

@@ -114,6 +114,7 @@ $( document ).delegate( "ul, ol", "listviewcreate", function() {
 				//filtervalue is empty => show all
 				listItems.toggleClass( "ui-screen-hidden", !!listview.options.filterReveal );
 			}
+			listview._addFirstLastClasses();
 		})
 		.appendTo( wrapper )
 		.textinput();

js/widgets/listview.js

@@ -49,6 +49,21 @@ $.widget( "mobile.listview", $.mobile.widget, {
 		t.refresh( true );
 	},
 
+	_addFirstLastClasses: function( create ) {
+		var lis = this.element.children( "li" ),
+			visiblelis;
+
+		lis.removeClass( "ui-first-child ui-last-child" );
+		// At create time and when autodividers calls refresh the li are not visible yet so we need to rely on .ui-screen-hidden
+		visiblelis = create || lis.filter( ":visible" ).length === 0 ? lis.not( ".ui-screen-hidden" ) : lis.filter( ":visible" );
+
+		visiblelis.eq( 0 ).addClass( "ui-first-child" ).end().last().addClass( "ui-last-child" );
+					
+		if ( !create ) {
+			this.element.trigger( "updatelayout" );
+		}
+	},
+
 	// This is a generic utility method for finding the first
 	// node with a given nodeName. It uses basic DOM traversal
 	// to be fast and is meant to be a substitute for simple
@@ -278,7 +293,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
 
 		this._addThumbClasses( li );
 		this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
-
+		
+		this._addFirstLastClasses( create );
 		// autodividers binds to this to redraw dividers after the listview refresh
 		this._trigger( "afterrefresh" );
 	},