From 359e2dee04806ba3252107c631be191dec478d77 Mon Sep 17 00:00:00 2001 From: Anirudh Sanjeev Date: Sat, 17 Sep 2011 17:55:53 +0530 Subject: [PATCH 1/2] Added an autodivide option to Listview Autodivide will automatically insert list dividers whenever the first letter of the text that's inside the list item changes. It can be used to re-create the functionality of the list divider experiment without actually having to add the dividers manually. --- docs/lists/lists-autodivide.html | 98 ++++++++++++++++++++++++++++++++ js/jquery.mobile.listview.js | 28 ++++++++- 2 files changed, 124 insertions(+), 2 deletions(-) create mode 100644 docs/lists/lists-autodivide.html diff --git a/docs/lists/lists-autodivide.html b/docs/lists/lists-autodivide.html new file mode 100644 index 00000000000..c1e2e0c97e6 --- /dev/null +++ b/docs/lists/lists-autodivide.html @@ -0,0 +1,98 @@ + + + + + + jQuery Mobile Docs - List Dividers + + + + + + + + + +
+ +
+

List dividers

+ Home +
+ +
+
+ +
+ +
+ +
+ +

More in this section

+ + +
+
+ +
+ +
+

© 2011 The jQuery Project

+
+ +
+ + + diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js index ee94e12eab1..54eebdd7536 100644 --- a/js/jquery.mobile.listview.js +++ b/js/jquery.mobile.listview.js @@ -21,7 +21,8 @@ $.widget( "mobile.listview", $.mobile.widget, { splitIcon: "arrow-r", splitTheme: "b", inset: false, - initSelector: ":jqmData(role='listview')" + initSelector: ":jqmData(role='listview')", + autodivide: false }, _create: function() { @@ -117,9 +118,11 @@ $.widget( "mobile.listview", $.mobile.widget, { listsplittheme = $list.jqmData( "splittheme" ), listspliticon = $list.jqmData( "spliticon" ), li = $list.children( "li" ), + autodivideLastLetter = "NONE", counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1, item, itemClass, itemTheme, - a, last, splittheme, countParent, icon; + a, last, splittheme, countParent, icon, + firstChar, autodividerElem; if ( counter ) { $list.find( ".ui-li-dec" ).remove(); @@ -195,6 +198,27 @@ $.widget( "mobile.listview", $.mobile.widget, { } } + if(self.options.autodivide) { + // get the first character of the text + firstChar = item.text()[0]; + if(firstChar != autodivideLastLetter) { + autodivideLastLetter = firstChar; + + // Create a new element for the autodivider + autodividerElem = $("
  • "); + autodividerElem.addClass ("ui-li ui-li-divider ui-btn ui-bar-" + dividertheme); + autodividerElem.attr("data-role", "list-divider"); + autodividerElem.attr("role", "heading"); + autodividerElem.text(firstChar); + item.before(autodividerElem); + + if( counter ) { + counter = 1; + } + } + } + + if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) { countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" ); From ecb45b71341d1d8f387f5bf181476bc887eb7404 Mon Sep 17 00:00:00 2001 From: Anirudh Sanjeev Date: Tue, 20 Sep 2011 11:48:44 +0530 Subject: [PATCH 2/2] Fixed a potential issue where no text will cause the autodivider to fail. --- js/jquery.mobile.listview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js index 54eebdd7536..9a4e0e5f0f0 100644 --- a/js/jquery.mobile.listview.js +++ b/js/jquery.mobile.listview.js @@ -198,7 +198,7 @@ $.widget( "mobile.listview", $.mobile.widget, { } } - if(self.options.autodivide) { + if(self.options.autodivide && (item.text().length > 0)) { // get the first character of the text firstChar = item.text()[0]; if(firstChar != autodivideLastLetter) {