Listview Divider Icons

jQuery Mobile plugin that adds icon support for listview dividers.

HTML

<ul data-role="listview" data-inset="true" data-theme="a" data-divider-theme="d" data-divider-icon="grid">
	<li data-role="list-divider">Divider <code><em>no</em> data-icon <em>attribute</em></code></li>
	<li><a href="#">Link Button</a></li>
	<li><a href="#">Link Button</a></li>
	<li><a href="#">Link Button</a></li>
	<li data-role="list-divider" data-icon="star">Divider <code>data-icon="star"</code></li>
	<li>No Link</li>
	<li>No Link</li>
	<li>No Link</li>
	<li data-role="list-divider" data-icon="false">Divider <code>data-icon="false"</code></li>
	<li><a href="#">Link Button</a></li>
	<li>No Link</li>
	<li><a href="#">Link Button</a></li>
</ul>

CSS

.ui-li-divider.ui-li-has-arrow {
	padding: 0;
}
.ui-li-divider.ui-li-has-arrow .ui-btn-inner {
	font-size: 14px;
	padding: .5em 15px;
}

JavaScript

(function( $, undefined ) {

	// If set, this icon will be applied to all list-dividers
	$.mobile.listview.prototype.options.dividerIcon = null;

	$.mobile.document.delegate( "ul,ol", "listviewcreate", function() {

		var	list = $( this ),
			options = list.data( "mobile-listview" ).options,
			dividers = list.children( ":jqmData(role='list-divider')" );

		// Remove dividers which shouldn't have icons
		if ( !options.dividerIcon ) {
			dividers = dividers.filter( ":jqmData(icon)" );
		}

		// Remove dividers which specifically don't want icons
		dividers = dividers.not( ":jqmData(icon='false')" );

		// Add icons to applicable dividers
		// Could be none, in which case loop won't run
		for (var i=0; i < dividers.length; i++ ) {

			var	divider = $( dividers[i] )
				dividerIcon = divider.jqmData( "icon" ),
				dividerTheme = divider.jqmData( "theme" );

			// Add icon via button markup, keeping divider styling
			divider.buttonMarkup({
				wrapperEls: "div",
				shadow: false,
				corners: false,
				iconpos: "right",
				icon: dividerIcon || options.dividerIcon,
				theme: dividerTheme || options.dividerTheme
			});

			// Modify classes to correctly style and disable button functionality
			divider.addClass( "ui-li-has-arrow" );
			divider.removeClass( "ui-btn ui-btn-up-" + (dividerTheme || options.dividerTheme) );
		}
	});

})(jQuery);