navbar: add morebutton extension and new demos

demos/navbar/index.php

@@ -106,10 +106,36 @@
 
 		<h2>Multi-row</h2>
 
-		<p>If more than 5 items are added, the navbar will simply wrap to multiple lines of two across:</p>
+		<p>If more than the set <code>maxbutton</code> items are added, the navbar will smart wrap the items 
+			n-across up to the value of the <code>maxbutton</code>option and then fill the remaining rows to full width:</p>
 
 			<div data-demo-html="true">
-				<div data-role="navbar">
+				<div data-role="navbar" data-maxbutton="5" >
+					<ul>
+						<li><a href="#" class="ui-btn-active">One</a></li>
+						<li><a href="#">Two</a></li>
+						<li><a href="#">Three</a></li>
+						<li><a href="#">Four</a></li>
+						<li><a href="#">Five</a></li>
+						<li><a href="#">Six</a></li>
+						<li><a href="#">Seven</a></li>
+						<li><a href="#">Eight</a></li>
+						<li><a href="#">Nine</a></li>
+						<li><a href="#">Ten</a></li>
+						<li><a href="#">Eleven</a></li>
+						<li><a href="#">Twelve</a></li>
+						<li><a href="#">Thirteen</a></li>
+					</ul>
+				</div><!-- /navbar -->
+			</div><!--/demo-html -->
+
+		<h2> Show More Button </h2>
+		<p>If more than the set <code>maxbutton</code> items are added and the <code>morebutton</code> 
+			option is set to <code>true</code>, the navbar will add the extra items to a popup that 
+			resides on the last button in the row of buttons</p>
+
+			<div data-demo-html="true">
+				<div data-role="navbar" data-maxbutton="5" data-morebutton="true">
 					<ul>
 						<li><a href="#" class="ui-button-active">One</a></li>
 						<li><a href="#">Two</a></li>
@@ -121,6 +147,9 @@
 						<li><a href="#">Eight</a></li>
 						<li><a href="#">Nine</a></li>
 						<li><a href="#">Ten</a></li>
+						<li><a href="#">Eleven</a></li>
+						<li><a href="#">Twelve</a></li>
+						<li><a href="#">Thirteen</a></li>
 					</ul>
 				</div><!-- /navbar -->
 			</div><!--/demo-html -->

js/index.php

@@ -58,6 +58,7 @@
 	'widgets/collapsibleSet.js',
 	'grid.js',
 	'widgets/navbar.js',
+	'widgets/navbar.morebutton.js',
 	'widgets/listview.js',
 	'widgets/listview.backcompat.js',
 	'widgets/listview.autodividers.js',

js/jquery.mobile.js

@@ -32,6 +32,7 @@
 			"./widgets/collapsibleSet",
 			"./grid",
 			"./widgets/navbar",
+			"./widgets/navbar.morebutton",
 			"./widgets/listview",
 			"./widgets/listview.backcompat",
 			"./widgets/listview.autodividers",

js/widgets/navbar.morebutton.js

@@ -0,0 +1,81 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: navbar morebutton extension.
+//>>label: NavbarMoreButton
+//>>group: Widgets
+//>>css.structure: ../css/structure/jquery.mobile.navbar.css
+//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+
+define( [ "jquery", "./navbar", "./popup" ], function( jQuery ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.navbar", $.mobile.navbar, {
+
+    options: {
+        morebutton: false,
+        morebuttontext: "..."
+    },
+
+    _create: function() {
+        if (this.options.morebutton) {
+            $.extend(this, {
+                _createNavRows: function() {}
+            });
+            this._createNavPopup();
+        }
+        this._super();
+    },
+
+    _id: function() {
+        return ( this.element.attr( "id" ) || ( this.widgetName + this.uuid ) );
+    },
+
+    _createNavPopup: function(){
+        var $navbar = this.element,
+            $navbtns = $navbar.find( "a" ),
+            $navitems = $navbar.find( "li" ),
+            numbuttons = $navbtns.length,
+            maxbutton = this.options.maxbutton,
+            iconpos = this.option.iconpos,
+            $popupDiv,
+            $popupNav,
+            morebtn,
+            pos,
+            btn,
+            id;
+
+        id = this._id() + "-popup";
+        $popupDiv = $( "<div class='ui-navbar-popup' id='" + id + "'></div>" );
+        $popupNav = $( "<ul class='ui-navbar-popupnav'>" )
+            .appendTo( $popupDiv );
+
+        // enhance buttons and move to new rows
+        for( pos = 0; pos < numbuttons; pos++ ) {
+            btn = $navitems.eq(pos);
+            this._makeNavButton(btn.find("a"), iconpos);
+            if (pos + 1 === maxbutton) {
+                morebtn = $( "<li></li>" ).append(
+                                 $( "<a></a>" )
+                                    .attr( "href", "#" + id)
+                                    .attr( "data-rel", "popup" )
+                                    .addClass( "ui-btn" )
+                                    .html( this.options.morebuttontext ));
+                $navbar.find( "ul" ).first().append( morebtn );
+
+            }
+            if ( pos + 1 >= maxbutton ) {
+                btn.detach();
+                $popupNav.append( btn );
+            }
+            $popupNav.listview();
+
+        }
+        $popupDiv.appendTo( $navbar );
+        $popupDiv.popup();
+    }
+});
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");