Add autodividers functionality to listview

docs/lists/docs-lists.html

@@ -34,7 +34,7 @@ <h2>List views</h2>
 			</ul>
 
 			<h2>Basic linked lists</h2>
-			<p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p> 
+			<p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p>
 			<p>Here is the HTML markup for a basic linked list.</p>
 
 <pre><code>
@@ -76,6 +76,31 @@ <h2>List dividers</h2>
 			<a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
 
 
+			<h2>Autodividers</h2>
+
+			<p>A listview can be configured to automatically generate dividers for its items. This is done by adding a <code>data-autodividers="true"</code> attribute to any listview.</p>
+
+			<p>By default, the text used to create dividers is the uppercased first letter of either the item's link text (for link lists) or the item's text (for read-only lists). Alternatively, if you are using formatted list items, you can specify divider text by setting the <code>autodividersSelector</code> option on the listview programmatically. For example, to add a custom selector to the element with <code>id="mylistview"</code>:</p>
+
+<pre><code>
+$("#mylistview").listview({
+  autodividers: true,
+
+  // the selector function is passed a &lt;li&gt; element from the listview;
+  // it should return the appropriate divider text for that &lt;li&gt;
+  // element as a string
+  autodividersSelector: function ( li ) {
+    var out = /* generate a string based on the content of li */;
+    return out;
+  }
+});
+</code></pre>
+
+			<p>If new list items are added to the list or removed from it, the dividers are <em>not</em> automatically updated: you should call <code>refresh()</code> on the listview to redraw the autodividers.</p>
+
+			<a href="lists-autodividers.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Autodividers example</a>
+
+
 			<h2>Search filter</h2>
 			<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either <a href="../api/globalconfig.html">bind to the <code>mobileinit</code> event</a> and set the <code>$.mobile.listview.prototype.options.filterPlaceholder</code> option to a string of your choosing, or use the data-attribute <code>data-filter-placeholder</code> on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data-attribute <code>data-filter-theme</code> on your listview.</p>
 
@@ -116,7 +141,7 @@ <h2>Inset lists</h2>
 			<h2>Calling the listview plugin</h2>
 			<p>You can directly call the listview plugin on any selector, just like any jQuery plugin:</p>
 			<code>$('#mylist').listview();</code>
-			
+
 			<h2>Updating lists</h2>
 			<p>If you add items to a listview, you'll need to call the <code>refresh()</code> method on it to update the styles and create any nested lists that are added. For example:</p>
 			<code>$('#mylist').listview('refresh');</code>
@@ -142,6 +167,7 @@ <h3>More in this section</h3>
 
 							<li><a href="lists-split.html">Split button list</a></li>
 							<li><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
 							<li><a href="lists-count.html">Count bubble</a></li>
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 							<li><a href="lists-icons.html">Icons</a></li>
@@ -174,4 +200,3 @@ <h3>More in this section</h3>
 
 		</body>
 		</html>
-

docs/lists/index.html

@@ -36,6 +36,7 @@ <h1>Lists</h1>
 
 			<li><a href="lists-split.html">Split button list</a></li>	
 			<li><a href="lists-divider.html">List dividers</a></li>
+			<li><a href="lists-autodividers.html">Autodividers</a></li>
 			<li><a href="lists-count.html">Count bubble</a></li>
 			<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 			<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-all-full.html

@@ -140,6 +140,7 @@ <h3>More in this section</h3>
 
 						<li><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li><a href="lists-count.html">Count bubble</a></li>
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-autodividers.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Docs - List Dividers</title>
+	<link rel="stylesheet"  href="../../css/themes/default/" />
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head>
+<body>
+
+	<div data-role="page" class="type-interior">
+
+		<div data-role="header" data-theme="f">
+		<h1>Autodividers</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+			<div class="content-primary">
+			<ul data-role="listview" data-autodividers="alpha">
+				<li><a href="index.html">Adam Kinkaid</a></li>
+				<li><a href="index.html">Alex Wickerham</a></li>
+				<li><a href="index.html">Avery Johnson</a></li>
+				<li><a href="index.html">Bob Cabot</a></li>
+				<li><a href="index.html">Caleb Booth</a></li>
+				<li><a href="index.html">Christopher Adams</a></li>
+				<li><a href="index.html">Culver James</a></li>
+				<li><a href="index.html">David Walsh</a></li>
+				<li><a href="index.html">Drake Alfred</a></li>
+				<li><a href="index.html">Elizabeth Bacon</a></li>
+				<li><a href="index.html">Emery Parker</a></li>
+				<li><a href="index.html">Enid Voldon</a></li>
+				<li><a href="index.html">Francis Wall</a></li>
+				<li><a href="index.html">Graham Smith</a></li>
+				<li><a href="index.html">Greta Peete</a></li>
+				<li><a href="index.html">Harvey Walls</a></li>
+				<li><a href="index.html">Mike Farnsworth</a></li>
+				<li><a href="index.html">Murray Vanderbuilt</a></li>
+				<li><a href="index.html">Nathan Williams</a></li>
+				<li><a href="index.html">Paul Baker</a></li>
+				<li><a href="index.html">Pete Mason</a></li>
+				<li><a href="index.html">Rod Tarker</a></li>
+				<li><a href="index.html">Sawyer Wakefield</a></li>
+			</ul>
+			</div><!--/content-primary -->
+
+			<div class="content-secondary">
+
+				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+						<h3>More in this section</h3>
+
+						<ul data-role="listview" data-theme="c" data-dividertheme="d">
+
+							<li data-role="list-divider">List views</li>
+							<li><a href="docs-lists.html">List markup conventions</a></li>
+							<li><a href="lists-ul.html">Basic linked list</a></li>
+							<li><a href="lists-nested.html">Nested list</a></li>
+							<li><a href="lists-ol.html">Numbered list</a></li>
+
+							<li><a href="lists-split.html">Split button list</a></li>
+							<li><a href="lists-divider.html">List dividers</a></li>
+							<li data-theme="a"><a href="lists-autodividers.html">Autodividers</a></li>
+							<li><a href="lists-count.html">Count bubble</a></li>
+							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
+							<li><a href="lists-icons.html">Icons</a></li>
+							<li><a href="lists-formatting.html">Content formatting</a></li>
+							<li><a href="lists-search.html">Search filter bar</a></li>
+							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+
+							<li><a href="lists-readonly.html">Read-only lists</a></li>
+							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+							<li><a href="lists-forms.html">Lists with forms</a></li>
+							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+							<li><a href="lists-inset.html">Inset styled lists</a></li>
+							<li><a href="lists-performance.html">List performance test</a></li>
+							<li><a href="lists-themes.html">Theming lists</a></li>
+
+						</ul>
+				</div>
+			</div>
+
+		</div><!-- /content -->
+
+		<div data-role="footer" class="footer-docs" data-theme="c">
+				<p>&copy; 2011 The jQuery Project</p>
+		</div>
+
+		</div><!-- /page -->
+
+		</body>
+		</html>

docs/lists/lists-count.html

@@ -49,6 +49,7 @@ <h3>More in this section</h3>
 
 						<li><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li data-theme="a"><a href="lists-count.html">Count bubble</a></li>
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-divider.html

@@ -80,6 +80,7 @@ <h3>More in this section</h3>
 
 							<li><a href="lists-split.html">Split button list</a></li>	
 							<li data-theme="a"><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
 							<li><a href="lists-count.html">Count bubble</a></li>
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 							<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-formatting.html

@@ -101,6 +101,7 @@ <h3>More in this section</h3>
 
 						<li><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li><a href="lists-count.html">Count bubble</a></li>
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-forms-inset.html

@@ -215,6 +215,7 @@ <h3>More in this section</h3>
 
 						<li><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li><a href="lists-count.html">Count bubble</a></li>
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-forms.html

@@ -215,6 +215,7 @@ <h3>More in this section</h3>
 
 						<li><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li><a href="lists-count.html">Count bubble</a></li>
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-icons.html

@@ -55,6 +55,7 @@ <h3>More in this section</h3>
 
 						<li><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li><a href="lists-count.html">Count bubble</a></li>
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li data-theme="a"><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-inset.html

@@ -141,6 +141,7 @@ <h3>More in this section</h3>
 
 						<li><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li><a href="lists-count.html">Count bubble</a></li>
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-nested.html

@@ -160,6 +160,7 @@ <h3>More in this section</h3>
 
 						<li><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li><a href="lists-count.html">Count bubble</a></li>
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-ol.html

@@ -64,6 +64,7 @@ <h3>More in this section</h3>
 
 							<li><a href="lists-split.html">Split button list</a></li>	
 							<li><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
 							<li><a href="lists-count.html">Count bubble</a></li>
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 							<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-performance.html

@@ -544,6 +544,7 @@ <h3>More in this section</h3>
 
 							<li><a href="lists-split.html">Split button list</a></li>	
 							<li><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
 							<li><a href="lists-count.html">Count bubble</a></li>
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 							<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-readonly-inset.html

@@ -137,6 +137,7 @@ <h3>More in this section</h3>
 
 							<li><a href="lists-split.html">Split button list</a></li>	
 							<li><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
 							<li><a href="lists-count.html">Count bubble</a></li>
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 							<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-readonly.html

@@ -139,6 +139,7 @@ <h3>More in this section</h3>
 
 							<li><a href="lists-split.html">Split button list</a></li>	
 							<li><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
 							<li><a href="lists-count.html">Count bubble</a></li>
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 							<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-search-inset.html

@@ -66,6 +66,7 @@ <h3>More in this section</h3>
 
 							<li><a href="lists-split.html">Split button list</a></li>	
 							<li><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
 							<li><a href="lists-count.html">Count bubble</a></li>
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 							<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-search-with-dividers.html

@@ -79,6 +79,7 @@ <h3>More in this section</h3>
 
 							<li><a href="lists-split.html">Split button list</a></li>	
 							<li><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
 							<li><a href="lists-count.html">Count bubble</a></li>
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 							<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-search.html

@@ -66,6 +66,7 @@ <h3>More in this section</h3>
 
 							<li><a href="lists-split.html">Split button list</a></li>	
 							<li><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
 							<li><a href="lists-count.html">Count bubble</a></li>
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 							<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-split.html

@@ -113,6 +113,7 @@ <h3>More in this section</h3>
 
 						<li data-theme="a"><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li><a href="lists-count.html">Count bubble</a></li>
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-themes.html

@@ -230,6 +230,7 @@ <h3>More in this section</h3>
 
 						<li><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li><a href="lists-count.html">Count bubble</a></li>
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-thumbnails.html

@@ -101,6 +101,7 @@ <h3>More in this section</h3>
 
 						<li><a href="lists-split.html">Split button list</a></li>	
 						<li><a href="lists-divider.html">List dividers</a></li>
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
 						<li><a href="lists-count.html">Count bubble</a></li>
 						<li data-theme="a"><a href="lists-thumbnails.html">Thumbnails</a></li>
 						<li><a href="lists-icons.html">Icons</a></li>

docs/lists/lists-ul.html

@@ -66,6 +66,7 @@ <h3>More in this section</h3>
 
 							<li><a href="lists-split.html">Split button list</a></li>	
 							<li><a href="lists-divider.html">List dividers</a></li>
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
 							<li><a href="lists-count.html">Count bubble</a></li>
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
 							<li><a href="lists-icons.html">Icons</a></li>

js/index.php

@@ -35,6 +35,7 @@
 	'jquery.mobile.navbar.js',
 	'jquery.mobile.listview.js',
 	'jquery.mobile.listview.filter.js',
+	'jquery.mobile.listview.autodividers.js',
 	'jquery.mobile.nojs.js',
 	'jquery.mobile.forms.checkboxradio.js',
 	'jquery.mobile.forms.button.js',