Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Merge branch 'townxelliot-autodividers'

  • Loading branch information...
commit 3f4343d7b43a76a92aa48c8739a453acb810e0b8 2 parents 8929eda + ca1bab2
John Bender authored May 01, 2012

Showing 29 changed files with 592 additions and 8 deletions. Show diff stats Hide diff stats

  1. 31  docs/lists/docs-lists.html
  2. 1  docs/lists/index.html
  3. 1  docs/lists/lists-all-full.html
  4. 99  docs/lists/lists-autodividers.html
  5. 1  docs/lists/lists-count.html
  6. 1  docs/lists/lists-divider.html
  7. 1  docs/lists/lists-formatting.html
  8. 1  docs/lists/lists-forms-inset.html
  9. 1  docs/lists/lists-forms.html
  10. 1  docs/lists/lists-icons.html
  11. 1  docs/lists/lists-inset.html
  12. 1  docs/lists/lists-nested.html
  13. 1  docs/lists/lists-ol.html
  14. 1  docs/lists/lists-performance.html
  15. 1  docs/lists/lists-readonly-inset.html
  16. 1  docs/lists/lists-readonly.html
  17. 1  docs/lists/lists-search-inset.html
  18. 1  docs/lists/lists-search-with-dividers.html
  19. 1  docs/lists/lists-search.html
  20. 1  docs/lists/lists-split.html
  21. 1  docs/lists/lists-themes.html
  22. 1  docs/lists/lists-thumbnails.html
  23. 1  docs/lists/lists-ul.html
  24. 1  js/index.php
  25. 71  js/jquery.mobile.listview.autodividers.js
  26. 7  js/jquery.mobile.listview.js
  27. 145  tests/functional/autodividers.html
  28. 38  tests/unit/listview/index.html
  29. 187  tests/unit/listview/listview_core.js
31  docs/lists/docs-lists.html
@@ -34,7 +34,7 @@
34 34
 			</ul>
35 35
 
36 36
 			<h2>Basic linked lists</h2>
37  
-			<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> 
  37
+			<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>
38 38
 			<p>Here is the HTML markup for a basic linked list.</p>
39 39
 
40 40
 <pre><code>
@@ -76,6 +76,31 @@
76 76
 			<a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
77 77
 
78 78
 
  79
+			<h2>Autodividers</h2>
  80
+
  81
+			<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>
  82
+
  83
+			<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>
  84
+
  85
+<pre><code>
  86
+$("#mylistview").listview({
  87
+  autodividers: true,
  88
+
  89
+  // the selector function is passed a &lt;li&gt; element from the listview;
  90
+  // it should return the appropriate divider text for that &lt;li&gt;
  91
+  // element as a string
  92
+  autodividersSelector: function ( li ) {
  93
+    var out = /* generate a string based on the content of li */;
  94
+    return out;
  95
+  }
  96
+});
  97
+</code></pre>
  98
+
  99
+			<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>
  100
+
  101
+			<a href="lists-autodividers.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Autodividers example</a>
  102
+
  103
+
79 104
 			<h2>Search filter</h2>
80 105
 			<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>
81 106
 
@@ -116,7 +141,7 @@
116 141
 			<h2>Calling the listview plugin</h2>
117 142
 			<p>You can directly call the listview plugin on any selector, just like any jQuery plugin:</p>
118 143
 			<code>$('#mylist').listview();</code>
119  
-			
  144
+
120 145
 			<h2>Updating lists</h2>
121 146
 			<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>
122 147
 			<code>$('#mylist').listview('refresh');</code>
@@ -142,6 +167,7 @@
142 167
 
143 168
 							<li><a href="lists-split.html">Split button list</a></li>
144 169
 							<li><a href="lists-divider.html">List dividers</a></li>
  170
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
145 171
 							<li><a href="lists-count.html">Count bubble</a></li>
146 172
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
147 173
 							<li><a href="lists-icons.html">Icons</a></li>
@@ -174,4 +200,3 @@
174 200
 
175 201
 		</body>
176 202
 		</html>
177  
-
1  docs/lists/index.html
@@ -36,6 +36,7 @@
36 36
 			
37 37
 			<li><a href="lists-split.html">Split button list</a></li>	
38 38
 			<li><a href="lists-divider.html">List dividers</a></li>
  39
+			<li><a href="lists-autodividers.html">Autodividers</a></li>
39 40
 			<li><a href="lists-count.html">Count bubble</a></li>
40 41
 			<li><a href="lists-thumbnails.html">Thumbnails</a></li>
41 42
 			<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-all-full.html
@@ -140,6 +140,7 @@
140 140
 
141 141
 						<li><a href="lists-split.html">Split button list</a></li>	
142 142
 						<li><a href="lists-divider.html">List dividers</a></li>
  143
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
143 144
 						<li><a href="lists-count.html">Count bubble</a></li>
144 145
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
145 146
 						<li><a href="lists-icons.html">Icons</a></li>
99  docs/lists/lists-autodividers.html
... ...
@@ -0,0 +1,99 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+	<head>
  4
+	<meta charset="utf-8">
  5
+	<meta name="viewport" content="width=device-width, initial-scale=1">
  6
+	<title>jQuery Mobile Docs - List Dividers</title>
  7
+	<link rel="stylesheet"  href="../../css/themes/default/" />
  8
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
  9
+	<script src="../../js/jquery.js"></script>
  10
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
  11
+	<script src="../_assets/js/jqm-docs.js"></script>
  12
+	<script src="../../js/"></script>
  13
+</head>
  14
+<body>
  15
+
  16
+	<div data-role="page" class="type-interior">
  17
+
  18
+		<div data-role="header" data-theme="f">
  19
+		<h1>Autodividers</h1>
  20
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  21
+	</div><!-- /header -->
  22
+
  23
+	<div data-role="content">
  24
+			<div class="content-primary">
  25
+			<ul data-role="listview" data-autodividers="alpha">
  26
+				<li><a href="index.html">Adam Kinkaid</a></li>
  27
+				<li><a href="index.html">Alex Wickerham</a></li>
  28
+				<li><a href="index.html">Avery Johnson</a></li>
  29
+				<li><a href="index.html">Bob Cabot</a></li>
  30
+				<li><a href="index.html">Caleb Booth</a></li>
  31
+				<li><a href="index.html">Christopher Adams</a></li>
  32
+				<li><a href="index.html">Culver James</a></li>
  33
+				<li><a href="index.html">David Walsh</a></li>
  34
+				<li><a href="index.html">Drake Alfred</a></li>
  35
+				<li><a href="index.html">Elizabeth Bacon</a></li>
  36
+				<li><a href="index.html">Emery Parker</a></li>
  37
+				<li><a href="index.html">Enid Voldon</a></li>
  38
+				<li><a href="index.html">Francis Wall</a></li>
  39
+				<li><a href="index.html">Graham Smith</a></li>
  40
+				<li><a href="index.html">Greta Peete</a></li>
  41
+				<li><a href="index.html">Harvey Walls</a></li>
  42
+				<li><a href="index.html">Mike Farnsworth</a></li>
  43
+				<li><a href="index.html">Murray Vanderbuilt</a></li>
  44
+				<li><a href="index.html">Nathan Williams</a></li>
  45
+				<li><a href="index.html">Paul Baker</a></li>
  46
+				<li><a href="index.html">Pete Mason</a></li>
  47
+				<li><a href="index.html">Rod Tarker</a></li>
  48
+				<li><a href="index.html">Sawyer Wakefield</a></li>
  49
+			</ul>
  50
+			</div><!--/content-primary -->
  51
+
  52
+			<div class="content-secondary">
  53
+
  54
+				<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
  55
+
  56
+						<h3>More in this section</h3>
  57
+
  58
+						<ul data-role="listview" data-theme="c" data-dividertheme="d">
  59
+
  60
+							<li data-role="list-divider">List views</li>
  61
+							<li><a href="docs-lists.html">List markup conventions</a></li>
  62
+							<li><a href="lists-ul.html">Basic linked list</a></li>
  63
+							<li><a href="lists-nested.html">Nested list</a></li>
  64
+							<li><a href="lists-ol.html">Numbered list</a></li>
  65
+
  66
+							<li><a href="lists-split.html">Split button list</a></li>
  67
+							<li><a href="lists-divider.html">List dividers</a></li>
  68
+							<li data-theme="a"><a href="lists-autodividers.html">Autodividers</a></li>
  69
+							<li><a href="lists-count.html">Count bubble</a></li>
  70
+							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
  71
+							<li><a href="lists-icons.html">Icons</a></li>
  72
+							<li><a href="lists-formatting.html">Content formatting</a></li>
  73
+							<li><a href="lists-search.html">Search filter bar</a></li>
  74
+							<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
  75
+							<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
  76
+
  77
+							<li><a href="lists-readonly.html">Read-only lists</a></li>
  78
+							<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
  79
+							<li><a href="lists-forms.html">Lists with forms</a></li>
  80
+							<li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
  81
+
  82
+							<li><a href="lists-inset.html">Inset styled lists</a></li>
  83
+							<li><a href="lists-performance.html">List performance test</a></li>
  84
+							<li><a href="lists-themes.html">Theming lists</a></li>
  85
+
  86
+						</ul>
  87
+				</div>
  88
+			</div>
  89
+
  90
+		</div><!-- /content -->
  91
+
  92
+		<div data-role="footer" class="footer-docs" data-theme="c">
  93
+				<p>&copy; 2011 The jQuery Project</p>
  94
+		</div>
  95
+
  96
+		</div><!-- /page -->
  97
+
  98
+		</body>
  99
+		</html>
1  docs/lists/lists-count.html
@@ -49,6 +49,7 @@
49 49
 
50 50
 						<li><a href="lists-split.html">Split button list</a></li>	
51 51
 						<li><a href="lists-divider.html">List dividers</a></li>
  52
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
52 53
 						<li data-theme="a"><a href="lists-count.html">Count bubble</a></li>
53 54
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
54 55
 						<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-divider.html
@@ -80,6 +80,7 @@
80 80
 
81 81
 							<li><a href="lists-split.html">Split button list</a></li>	
82 82
 							<li data-theme="a"><a href="lists-divider.html">List dividers</a></li>
  83
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
83 84
 							<li><a href="lists-count.html">Count bubble</a></li>
84 85
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
85 86
 							<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-formatting.html
@@ -101,6 +101,7 @@
101 101
 
102 102
 						<li><a href="lists-split.html">Split button list</a></li>	
103 103
 						<li><a href="lists-divider.html">List dividers</a></li>
  104
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
104 105
 						<li><a href="lists-count.html">Count bubble</a></li>
105 106
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
106 107
 						<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-forms-inset.html
@@ -215,6 +215,7 @@
215 215
 
216 216
 						<li><a href="lists-split.html">Split button list</a></li>	
217 217
 						<li><a href="lists-divider.html">List dividers</a></li>
  218
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
218 219
 						<li><a href="lists-count.html">Count bubble</a></li>
219 220
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
220 221
 						<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-forms.html
@@ -215,6 +215,7 @@
215 215
 
216 216
 						<li><a href="lists-split.html">Split button list</a></li>	
217 217
 						<li><a href="lists-divider.html">List dividers</a></li>
  218
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
218 219
 						<li><a href="lists-count.html">Count bubble</a></li>
219 220
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
220 221
 						<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-icons.html
@@ -55,6 +55,7 @@
55 55
 
56 56
 						<li><a href="lists-split.html">Split button list</a></li>	
57 57
 						<li><a href="lists-divider.html">List dividers</a></li>
  58
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
58 59
 						<li><a href="lists-count.html">Count bubble</a></li>
59 60
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
60 61
 						<li data-theme="a"><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-inset.html
@@ -141,6 +141,7 @@
141 141
 
142 142
 						<li><a href="lists-split.html">Split button list</a></li>	
143 143
 						<li><a href="lists-divider.html">List dividers</a></li>
  144
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
144 145
 						<li><a href="lists-count.html">Count bubble</a></li>
145 146
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
146 147
 						<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-nested.html
@@ -160,6 +160,7 @@
160 160
 
161 161
 						<li><a href="lists-split.html">Split button list</a></li>	
162 162
 						<li><a href="lists-divider.html">List dividers</a></li>
  163
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
163 164
 						<li><a href="lists-count.html">Count bubble</a></li>
164 165
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
165 166
 						<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-ol.html
@@ -64,6 +64,7 @@
64 64
 
65 65
 							<li><a href="lists-split.html">Split button list</a></li>	
66 66
 							<li><a href="lists-divider.html">List dividers</a></li>
  67
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
67 68
 							<li><a href="lists-count.html">Count bubble</a></li>
68 69
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
69 70
 							<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-performance.html
@@ -544,6 +544,7 @@
544 544
 
545 545
 							<li><a href="lists-split.html">Split button list</a></li>	
546 546
 							<li><a href="lists-divider.html">List dividers</a></li>
  547
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
547 548
 							<li><a href="lists-count.html">Count bubble</a></li>
548 549
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
549 550
 							<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-readonly-inset.html
@@ -137,6 +137,7 @@
137 137
 
138 138
 							<li><a href="lists-split.html">Split button list</a></li>	
139 139
 							<li><a href="lists-divider.html">List dividers</a></li>
  140
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
140 141
 							<li><a href="lists-count.html">Count bubble</a></li>
141 142
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
142 143
 							<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-readonly.html
@@ -139,6 +139,7 @@
139 139
 
140 140
 							<li><a href="lists-split.html">Split button list</a></li>	
141 141
 							<li><a href="lists-divider.html">List dividers</a></li>
  142
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
142 143
 							<li><a href="lists-count.html">Count bubble</a></li>
143 144
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
144 145
 							<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-search-inset.html
@@ -66,6 +66,7 @@
66 66
 
67 67
 							<li><a href="lists-split.html">Split button list</a></li>	
68 68
 							<li><a href="lists-divider.html">List dividers</a></li>
  69
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
69 70
 							<li><a href="lists-count.html">Count bubble</a></li>
70 71
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
71 72
 							<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-search-with-dividers.html
@@ -79,6 +79,7 @@
79 79
 
80 80
 							<li><a href="lists-split.html">Split button list</a></li>	
81 81
 							<li><a href="lists-divider.html">List dividers</a></li>
  82
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
82 83
 							<li><a href="lists-count.html">Count bubble</a></li>
83 84
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
84 85
 							<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-search.html
@@ -66,6 +66,7 @@
66 66
 
67 67
 							<li><a href="lists-split.html">Split button list</a></li>	
68 68
 							<li><a href="lists-divider.html">List dividers</a></li>
  69
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
69 70
 							<li><a href="lists-count.html">Count bubble</a></li>
70 71
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
71 72
 							<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-split.html
@@ -113,6 +113,7 @@
113 113
 
114 114
 						<li data-theme="a"><a href="lists-split.html">Split button list</a></li>	
115 115
 						<li><a href="lists-divider.html">List dividers</a></li>
  116
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
116 117
 						<li><a href="lists-count.html">Count bubble</a></li>
117 118
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
118 119
 						<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-themes.html
@@ -230,6 +230,7 @@
230 230
 
231 231
 						<li><a href="lists-split.html">Split button list</a></li>	
232 232
 						<li><a href="lists-divider.html">List dividers</a></li>
  233
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
233 234
 						<li><a href="lists-count.html">Count bubble</a></li>
234 235
 						<li><a href="lists-thumbnails.html">Thumbnails</a></li>
235 236
 						<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-thumbnails.html
@@ -101,6 +101,7 @@
101 101
 
102 102
 						<li><a href="lists-split.html">Split button list</a></li>	
103 103
 						<li><a href="lists-divider.html">List dividers</a></li>
  104
+						<li><a href="lists-autodividers.html">Autodividers</a></li>
104 105
 						<li><a href="lists-count.html">Count bubble</a></li>
105 106
 						<li data-theme="a"><a href="lists-thumbnails.html">Thumbnails</a></li>
106 107
 						<li><a href="lists-icons.html">Icons</a></li>
1  docs/lists/lists-ul.html
@@ -66,6 +66,7 @@
66 66
 
67 67
 							<li><a href="lists-split.html">Split button list</a></li>	
68 68
 							<li><a href="lists-divider.html">List dividers</a></li>
  69
+							<li><a href="lists-autodividers.html">Autodividers</a></li>
69 70
 							<li><a href="lists-count.html">Count bubble</a></li>
70 71
 							<li><a href="lists-thumbnails.html">Thumbnails</a></li>
71 72
 							<li><a href="lists-icons.html">Icons</a></li>
1  js/index.php
@@ -35,6 +35,7 @@
35 35
 	'jquery.mobile.navbar.js',
36 36
 	'jquery.mobile.listview.js',
37 37
 	'jquery.mobile.listview.filter.js',
  38
+	'jquery.mobile.listview.autodividers.js',
38 39
 	'jquery.mobile.nojs.js',
39 40
 	'jquery.mobile.forms.checkboxradio.js',
40 41
 	'jquery.mobile.forms.button.js',
71  js/jquery.mobile.listview.autodividers.js
... ...
@@ -0,0 +1,71 @@
  1
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
  2
+//>>description: Generates dividers for listview items
  3
+//>>label: Listview Autodividers
  4
+define( [ "jquery", "./jquery.mobile.listview" ], function( $ ) {
  5
+//>>excludeEnd("jqmBuildExclude");
  6
+(function( $, undefined ) {
  7
+
  8
+$.mobile.listview.prototype.options.autodividers = false;
  9
+$.mobile.listview.prototype.options.autodividersSelector = function( elt ) {
  10
+	// look for the first anchor in the item
  11
+	var text = elt.find( 'a' ).text() || elt.text() || null;
  12
+
  13
+	if ( !text ) {
  14
+		return null;
  15
+	}
  16
+
  17
+	// create the text for the divider (first uppercased letter)
  18
+	text = text.slice( 0, 1 ).toUpperCase();
  19
+
  20
+	return text;
  21
+};
  22
+
  23
+$( document ).on( "listviewcreate", "ul,ol", function() {
  24
+
  25
+	var list = $( this ),
  26
+			listview = list.data( "listview" );
  27
+
  28
+	if ( !listview.options.autodividers ) {
  29
+		return;
  30
+	}
  31
+
  32
+	var replaceDividers = function () {
  33
+		list.find( 'li:jqmData(role=list-divider)' ).remove();
  34
+
  35
+		var lis = list.find( 'li' );
  36
+
  37
+		var lastDividerText = null;
  38
+		var li;
  39
+		var dividerText;
  40
+		var i = 0;
  41
+
  42
+		for ( i ; i < lis.length ; i++ ) {
  43
+			li = lis[i];
  44
+			dividerText = listview.options.autodividersSelector( $( li ) );
  45
+
  46
+			if ( dividerText && lastDividerText !== dividerText ) {
  47
+				var divider = document.createElement( 'li' );
  48
+				divider.appendChild( document.createTextNode( dividerText ) );
  49
+				divider.setAttribute( 'data-' + $.mobile.ns + 'role', 'list-divider' );
  50
+				li.parentNode.insertBefore( divider, li );
  51
+			}
  52
+
  53
+			lastDividerText = dividerText;
  54
+		}
  55
+	};
  56
+
  57
+	var afterListviewRefresh = function () {
  58
+		list.off( 'listviewafterrefresh', afterListviewRefresh );
  59
+		replaceDividers();
  60
+		listview.refresh();
  61
+		list.on( 'listviewafterrefresh', afterListviewRefresh );
  62
+	};
  63
+
  64
+	afterListviewRefresh();
  65
+
  66
+});
  67
+
  68
+})( jQuery );
  69
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
  70
+});
  71
+//>>excludeEnd("jqmBuildExclude");
7  js/jquery.mobile.listview.js
@@ -30,10 +30,10 @@ $.widget( "mobile.listview", $.mobile.widget, {
30 30
 	_create: function() {
31 31
 		var t = this,
32 32
 			listviewClasses = "";
33  
-			
  33
+
34 34
 		listviewClasses += t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "";
35 35
 		listviewClasses += t.element.jqmData( "mini" ) || t.options.mini === true ? " ui-mini" : "";
36  
-		
  36
+
37 37
 		// create listview markup
38 38
 		t.element.addClass(function( i, orig ) {
39 39
 			return orig + " ui-listview " + listviewClasses;
@@ -309,6 +309,9 @@ $.widget( "mobile.listview", $.mobile.widget, {
309 309
 		this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
310 310
 
311 311
 		this._refreshCorners( create );
  312
+
  313
+    // autodividers binds to this to redraw dividers after the listview refresh
  314
+		this._trigger( "afterrefresh" );
312 315
 	},
313 316
 
314 317
 	//create a string for ID/subpage url creation
145  tests/functional/autodividers.html
... ...
@@ -0,0 +1,145 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+
  4
+<head>
  5
+	<meta charset="utf-8" />
  6
+	<title>jQuery Mobile: Autodividers</title>
  7
+	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
  8
+	<script src="../../js/jquery.js"></script>
  9
+	<script src="../../js/"></script>
  10
+</head>
  11
+
  12
+<body>
  13
+
  14
+<div data-role="page" id="baseline">
  15
+	<div data-role="header">
  16
+		<h1>Autodividers</h1>
  17
+	</div>
  18
+
  19
+	<div data-role="content">
  20
+		<p>This should get auto-dividers based on link text.</p>
  21
+		<ul id="link-text-dividers" data-role="listview" data-autodividers="true">
  22
+			<li><a href="#">Amy</a></li>
  23
+			<li><a href="#">Andrew</a></li>
  24
+			<li><a href="#">Astrid</a></li>
  25
+			<li><a href="#">Bertie</a></li>
  26
+			<li><a href="#">Carrie</a></li>
  27
+			<li><a href="#">Derek</a></li>
  28
+			<li><a href="#">Ian</a></li>
  29
+			<li><a href="#">Matthew</a></li>
  30
+		</ul>
  31
+	</div>
  32
+
  33
+	<div data-role="content">
  34
+		<p>This should get auto-dividers based on link text but
  35
+		shouldn't produce duplicate dividers. Should also
  36
+		add more dividers if new list elements are added. Note that
  37
+		removing Bertie should cause the duplicate "A" dividers to merge
  38
+		and trigger a "listviewchange" event.</p>
  39
+
  40
+		<p>
  41
+			<button id="add-gary-button" data-inline="true">Add Gary and refresh</button>
  42
+			<button id="remove-bertie-button" data-inline="true">Remove Bertie and refresh</button>
  43
+		</p>
  44
+
  45
+		<ul id="refreshable-dividers" data-role="listview" data-autodividers="true">
  46
+			<li><a href="#">Amy</a></li>
  47
+			<li><a href="#">Andrew</a></li>
  48
+			<li><a href="#">Angela</a></li>
  49
+			<li><a href="#">Bertie</a></li>
  50
+			<li><a href="#">Astrid</a></li>
  51
+			<li><a href="#">Carrie</a></li>
  52
+			<li><a href="#">Derek</a></li>
  53
+			<li><a href="#">Ian</a></li>
  54
+			<li><a href="#">Matthew</a></li>
  55
+		</ul>
  56
+	</div>
  57
+
  58
+	<div data-role="content">
  59
+		<p>This uses a custom selector to draw text from formatted list
  60
+		items.</p>
  61
+
  62
+		<ul id="custom-selector">
  63
+			<li><span>Anne</span> likes to eat sweets</li>
  64
+			<li><span>Beth</span> likes to eat treats</li>
  65
+			<li><span>Bill</span> likes to eat meats</li>
  66
+			<li><span>Carl</span> likes to eat beets</li>
  67
+		</ul>
  68
+	</div>
  69
+
  70
+	<div data-role="content">
  71
+		<p>This should get auto-dividers based on text. NB this has
  72
+		intentionally blank li elements to check they don't get dividers.</p>
  73
+		<ul id="text-dividers" data-role="listview" data-autodividers="true">
  74
+			<li>Barry</li>
  75
+			<li>Betty</li>
  76
+			<li>Carrie</li>
  77
+			<li>Harry</li>
  78
+			<li></li>
  79
+			<li>Hetty</li>
  80
+			<li>Kitty</li>
  81
+			<li>Larry</li>
  82
+			<li></li>
  83
+			<li>Laurie</li>
  84
+			<li>Mary</li>
  85
+		</ul>
  86
+	</div>
  87
+
  88
+	<div data-role="content">
  89
+		<p>Non-sorted list will produce duplicate auto-dividers.</p>
  90
+		<ul id="non-sorted" data-role="listview" data-autodividers="true">
  91
+			<li>Barry</li>
  92
+			<li>Carrie</li>
  93
+			<li>Betty</li>
  94
+			<li>Harry</li>
  95
+			<li>Carly</li>
  96
+			<li>Hetty</li>
  97
+		</ul>
  98
+	</div>
  99
+
  100
+	<div data-role="content">
  101
+		<p>This had dividers already which were replaced.</p>
  102
+		<ul id="has-dividers" data-role="listview" data-autodividers="true">
  103
+			<li data-role="list-divider">Any old iron</li>
  104
+			<li><a href="#">Amy</a></li>
  105
+			<li><a href="#">Andrew</a></li>
  106
+			<li><a href="#">Astrid</a></li>
  107
+			<li data-role="list-divider">Barnacles</li>
  108
+			<li><a href="#">Bertie</a></li>
  109
+			<li data-role="list-divider">Crop circle</li>
  110
+			<li><a href="#">Carrie</a></li>
  111
+			<li data-role="list-divider">Dog</li>
  112
+			<li><a href="#">Derek</a></li>
  113
+			<li data-role="list-divider">Igloos</li>
  114
+			<li><a href="#">Ian</a></li>
  115
+			<li data-role="list-divider">Massive clouds</li>
  116
+			<li><a href="#">Matthew</a></li>
  117
+		</ul>
  118
+	</div>
  119
+
  120
+</div>
  121
+
  122
+<script>
  123
+$(document).bind('pagecreate', function () {
  124
+	$('#custom-selector').listview({
  125
+	  autodividers: true,
  126
+	  autodividersSelector: function( elt ) {
  127
+			return elt.find('span').text();
  128
+		}
  129
+	});
  130
+
  131
+	$('#add-gary-button').bind('click', function () {
  132
+		var gary = $('<li><a href="#">Gary</a></li>');
  133
+		$('#refreshable-dividers').find('li.ui-li-divider:contains(I)').before(gary);
  134
+		$('#refreshable-dividers').listview('refresh');
  135
+	});
  136
+
  137
+	$('#remove-bertie-button').bind('click', function () {
  138
+		$('#refreshable-dividers').find('li:contains("Bertie")').remove();
  139
+		$('#refreshable-dividers').listview('refresh');
  140
+	});
  141
+});
  142
+</script>
  143
+
  144
+</body>
  145
+</html>
38  tests/unit/listview/index.html
@@ -16,6 +16,7 @@
16 16
 				"jquery.mobile.navigation",
17 17
 				"jquery.mobile.listview",
18 18
 				"jquery.mobile.listview.filter",
  19
+				"jquery.mobile.listview.autodividers"
19 20
 			],
20 21
 			[ "jquery.mobile.init" ],
21 22
 			[
@@ -223,6 +224,43 @@ <h2 id="qunit-userAgent"></h2>
223 224
 	</div>
224 225
 </div>
225 226
 
  227
+<!-- Autodivider -->
  228
+<div data-nstest-role="page" id="autodividers-test">
  229
+	<div data-nstest-role="header" data-nstest-position="inline">
  230
+		<h1>Autodivider Test</h1>
  231
+	</div>
  232
+	<div data-nstest-role="content">
  233
+		<ul data-nstest-role="listview" data-nstest-autodividers="true">
  234
+			<li data-nstest-role="list-divider">SHOULD REMOVE</li>
  235
+			<li>a is for aquaman</li>
  236
+			<li>b is for batman</li>
  237
+			<li>c is for catwoman</li>
  238
+			<li>d is for darkwing</li>
  239
+		</ul>
  240
+	</div>
  241
+</div>
  242
+
  243
+<div data-nstest-role="page" id="autodividers-selector-test">
  244
+	<div data-nstest-role="header" data-nstest-position="inline">
  245
+		<h1>Autodivider Selector Test</h1>
  246
+	</div>
  247
+	<div data-nstest-role="content">
  248
+		<ul id="autodividers-selector-test-list1" data-nstest-role="listview" data-nstest-autodividers="true">
  249
+			<li><a href="">a is for aquaman</a></li>
  250
+			<li><a href="">b is for batman</a></li>
  251
+			<li><a href="">c is for catwoman</a></li>
  252
+			<li><a href="">d is for darkwing</a></li>
  253
+		</ul>
  254
+
  255
+		<ul id="autodividers-selector-test-list2" data-nstest-role="listview" data-nstest-autodividers="true">
  256
+			<li><div><span class="autodividers-selector-test-selectme">eddie</span> is for aquaman</div></li>
  257
+			<li><div><span class="autodividers-selector-test-selectme">frankie</span> is for batman</div></li>
  258
+			<li><div><span class="autodividers-selector-test-selectme">georgie</span> is for catwoman</div></li>
  259
+			<li><div><span class="autodividers-selector-test-selectme">henry</span> is for darkwing</div></li>
  260
+		</ul>
  261
+	</div>
  262
+</div>
  263
+
226 264
 <!-- Search bar filter -->
227 265
 <div data-nstest-role="page" id='search-filter-test'>
228 266
 	<div data-nstest-role="header" data-nstest-position="inline">
187  tests/unit/listview/listview_core.js
@@ -93,7 +93,23 @@
93 93
 		]);
94 94
 	});
95 95
 
96  
-	module('Nested List Test');
  96
+	module('Nested List Test', {
  97
+		setup: function() {
  98
+			// ensure that the nested pages are generated
  99
+			stop();
  100
+			$.testHelper.pageSequence([
  101
+				function(){
  102
+					$.mobile.changePage("#nested-list-test");
  103
+				},
  104
+
  105
+				function() {
  106
+					window.history.back();
  107
+				},
  108
+
  109
+				start
  110
+			]);
  111
+		}
  112
+	});
97 113
 
98 114
 	asyncTest( "Changes page to nested list test and enhances", function() {
99 115
 		$.testHelper.pageSequence([
@@ -150,8 +166,7 @@
150 166
 	});
151 167
 
152 168
 	test( "nested list title should use first text node, regardless of line breaks", function(){
153  
-		// NOTE this is a super fragile reference to the nested page, any change to the list will break it
154  
-		ok($(":jqmData(url='nested-list-test&ui-page=0-0') .ui-title").text() === "More animals", 'Text should be "More animals"');
  169
+		same($(":jqmData(url='nested-list-test&ui-page=0-0') .ui-title").text(), "More animals", 'Text should be "More animals"');
155 170
 	});
156 171
 
157 172
 	asyncTest( "Multiple nested lists on a page with same labels", function() {
@@ -330,6 +345,172 @@
330 345
 		]);
331 346
 	});
332 347
 
  348
+	module( "Autodividers" );
  349
+
  350
+	asyncTest( "Adds dividers based on first letters of list items.", function() {
  351
+		$.testHelper.pageSequence([
  352
+			function() {
  353
+				$.testHelper.openPage( '#autodividers-test' );
  354
+			},
  355
+
  356
+			function() {
  357
+				var $new_page = $( '#autodividers-test' );
  358
+				ok( $new_page.hasClass( 'ui-page-active' ) );
  359
+				ok( $new_page.find( '.ui-li-divider' ).length === 4 );
  360
+				start();
  361
+			}
  362
+		]);
  363
+	});
  364
+
  365
+	asyncTest( "Responds to addition/removal of list elements after refresh.", function() {
  366
+		$.testHelper.pageSequence([
  367
+			function() {
  368
+				$.testHelper.openPage( '#autodividers-test' );
  369
+			},
  370
+
  371
+			function() {
  372
+				var $new_page = $( '#autodividers-test' );
  373
+				ok( $new_page.hasClass( 'ui-page-active' ));
  374
+
  375
+				var $list = $new_page.find( 'ul' );
  376
+
  377
+				// should remove all existing dividers
  378
+				ok( $new_page.find( 'li:contains("SHOULD REMOVE")' ).length === 0 );
  379
+
  380
+				// add li; should add an "X" divider
  381
+				$list.append( '<li>x is for xanthe</li>' );
  382
+				$list.listview('refresh');
  383
+				ok( $new_page.find( '.ui-li-divider' ).length === 5 );
  384
+				ok( $new_page.find( '.ui-li-divider' ).is( ':contains("X")' ) );
  385
+
  386
+				// adding the same element again should create a valid list
  387
+				// item but no new divider
  388
+				ok( $new_page.find( '.ui-li-static' ).length === 5 );
  389
+				$list.append( '<li>x is for xanthe</li>' );
  390
+				$list.listview('refresh');
  391
+				ok( $new_page.find( '.ui-li-divider' ).length === 5 );
  392
+				ok( $new_page.find( '.ui-li-divider:contains("X")' ).length === 1 );
  393
+				ok( $new_page.find( '.ui-li-static' ).length === 6 );
  394
+
  395
+				// should ignore addition of non-li elements to the list
  396
+				$list.find( 'li:eq(0)' ).append( '<span>ignore me</span>' );
  397
+				$list.listview('refresh');
  398
+				ok( $new_page.find( '.ui-li-divider' ).length === 5 );
  399
+				ok( $new_page.find( '.ui-li-static' ).length === 6 );
  400
+
  401
+				// add li with the same initial letter as another li
  402
+				// but after the X li item; should add a second "B" divider to the
  403
+				// end of the list
  404
+				$list.append( '<li>b is for barry</li>' );
  405
+				$list.listview('refresh');
  406
+				ok( $new_page.find( '.ui-li-divider' ).length === 6 );
  407
+				ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 2 );
  408
+
  409
+				// remove the item with a repeated "b"; should remove the second
  410
+				// "B" divider
  411
+				$list.find( 'li:contains("barry")' ).remove();
  412
+				$list.listview('refresh');
  413
+				ok( $new_page.find( '.ui-li-divider' ).length === 5 );
  414
+				ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 1 );
  415
+
  416
+				// remove li; should remove the "A" divider
  417
+				$list.find( 'li:contains("aquaman")' ).remove();
  418
+				$list.listview('refresh');
  419
+				ok( $new_page.find( '.ui-li-divider' ).length === 4 );
  420
+				ok( !$new_page.find( '.ui-li-divider' ).is( ':contains("A")' ) );
  421
+
  422
+				// adding another "B" item after "C" should create two separate
  423
+				// "B" dividers
  424
+				$list.find( 'li:contains("catwoman")' ).after( '<li>b is for barry</li>' );
  425
+				$list.listview('refresh');
  426
+				ok( $new_page.find( '.ui-li-divider' ).length === 5 );
  427
+				ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 2 );
  428
+
  429
+				// if two dividers with the same letter have only non-dividers
  430
+				// between them, they get merged
  431
+
  432
+				// removing catwoman should cause the two "B" dividers to merge
  433
+				$list.find( 'li:contains("catwoman")' ).remove();
  434
+				$list.listview('refresh');
  435
+				ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 1 );
  436
+
  437
+				// adding another "D" item before the "D" divider should only
  438
+				// result in a single "D" divider after merging
  439
+				$list.find( 'li:contains("barry")' ).after( '<li>d is for dan</li>' );
  440
+				$list.listview('refresh');
  441
+				ok( $new_page.find( '.ui-li-divider:contains("D")' ).length === 1 );
  442
+
  443
+				start();
  444
+			}
  445
+		]);
  446
+	});
  447
+
  448
+	module( "Autodividers Selector" );
  449
+
  450
+	asyncTest( "Adds divider text from links.", function() {
  451
+		$.testHelper.pageSequence([
  452
+			function() {
  453
+				$.testHelper.openPage( '#autodividers-selector-test' );
  454
+			},
  455
+
  456
+			function() {
  457
+				var $new_page = $( '#autodividers-selector-test' );
  458
+				ok($new_page.hasClass( 'ui-page-active' ));
  459
+
  460
+				// check we have the right dividers based on link text
  461
+				var $list = $( '#autodividers-selector-test-list1' );
  462
+				ok( $list.find( '.ui-li-divider' ).length === 4 );
  463
+				ok( $list.find( '.ui-li-divider:eq(0):contains(A)' ).length === 1 );
  464
+				ok( $list.find( '.ui-li-divider:eq(1):contains(B)' ).length === 1 );
  465
+				ok( $list.find( '.ui-li-divider:eq(2):contains(C)' ).length === 1 );
  466
+				ok( $list.find( '.ui-li-divider:eq(3):contains(D)' ).length === 1 );
  467
+
  468
+				// check that adding a new item with link creates the right divider
  469
+				$list.append( '<li><a href="">e is for ethel</a></li>' );
  470
+				$list.listview('refresh');
  471
+				ok( $list.find( '.ui-li-divider:eq(4):contains(E)' ).length === 1 );
  472
+
  473
+				start();
  474
+			}
  475
+		]);
  476
+	});
  477
+
  478
+	asyncTest( "Adds divider text based on custom selector.", function() {
  479
+		$.testHelper.pageSequence([
  480
+			function() {
  481
+				$.testHelper.openPage( '#autodividers-selector-test' );
  482
+			},
  483
+
  484
+			function() {
  485
+				var $new_page = $( '#autodividers-selector-test' );
  486
+				ok($new_page.hasClass( 'ui-page-active' ));
  487
+
  488
+				// check we have the right dividers based on custom selector
  489
+				var $list = $( '#autodividers-selector-test-list2' );
  490
+				$list.listview( 'option', 'autodividersSelector', function( elt ) {
  491
+          var text = elt.find( 'div > span.autodividers-selector-test-selectme' ).text();
  492
+          text = text.slice( 0, 1 ).toUpperCase();
  493
+          return text;
  494
+				});
  495
+				$list.listview( 'refresh' );
  496
+				ok( $list.find( '.ui-li-divider' ).length === 4 );
  497
+				ok( $list.find( '.ui-li-divider:eq(0):contains(E)' ).length === 1 );
  498
+				ok( $list.find( '.ui-li-divider:eq(1):contains(F)' ).length === 1 );
  499
+				ok( $list.find( '.ui-li-divider:eq(2):contains(G)' ).length === 1 );
  500
+				ok( $list.find( '.ui-li-divider:eq(3):contains(H)' ).length === 1 );
  501
+
  502
+				// check that adding a new item creates the right divider
  503
+				$list.append( '<li><div><span class="autodividers-selector-test-selectme">' +
  504
+				'i is for impy</span></div></li>' );
  505
+				$list.listview( 'refresh' );
  506
+
  507
+				ok( $list.find( '.ui-li-divider:eq(4):contains(I)' ).length === 1 );
  508
+
  509
+				start();
  510
+			}
  511
+		]);
  512
+	});
  513
+
333 514
 	module( "Search Filter");
334 515
 
335 516
 	var searchFilterId = "#search-filter-test";

0 notes on commit 3f4343d

Please sign in to comment.
Something went wrong with that request. Please try again.