Permalink
Browse files

fixed up the navbar and grid plugin logic. now supports up to 5 cols

  • Loading branch information...
scottjehl
scottjehl committed Nov 11, 2010
1 parent 5aa980f commit 78f342b5e06b548e4b46f0c14d6bc5bfd9958c72
Showing with 37 additions and 14 deletions.
  1. +8 −8 docs/toolbars/docs-navbar.html
  2. +26 −4 js/jquery.mobile.grid.js
  3. +3 −2 js/jquery.mobile.navbar.js
@@ -48,7 +48,7 @@ <h2>Simple navbar</h2>
<p>Adding a third item will automatically make each button 1/3 the width of the browser window:</p>
<div data-role="footer">
- <div data-role="navbar">
+ <div data-role="navbar" data-grid="b">
<ul>
<li><a href="#" class="ui-btn-active">One</a></li>
<li><a href="#">Two</a></li>
@@ -60,7 +60,7 @@ <h2>Simple navbar</h2>
<p>Adding a fourth more item will automatically make each button 1/4 the width of the browser window:</p>
<div data-role="footer">
- <div data-role="navbar">
+ <div data-role="navbar" data-grid="c">
<ul>
<li><a href="#" class="ui-btn-active">One</a></li>
<li><a href="#">Two</a></li>
@@ -73,7 +73,7 @@ <h2>Simple navbar</h2>
<p>The navbar maxes out with 5 items, each 1/5 the width of the browser window:</p>
<div data-role="footer">
- <div data-role="navbar">
+ <div data-role="navbar" data-grid="d">
<ul>
<li><a href="#" class="ui-btn-active">One</a></li>
<li><a href="#">Two</a></li>
@@ -111,7 +111,7 @@ <h2>Navbars in headers</h2>
<h1>I'm a header</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
- <div data-role="navbar">
+ <div data-role="navbar" data-grid="b">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
@@ -125,7 +125,7 @@ <h2>Icons in navbars</h2>
<p>Icons can be added to navbar items by adding the <code>data-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor.</p>
<div data-role="footer">
- <div data-role="navbar">
+ <div data-role="navbar" data-grid="b">
<ul>
<li><a href="#" data-icon="grid">Summary</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
@@ -137,7 +137,7 @@ <h2>Icons in navbars</h2>
<p>Icons can be stacked above the labels by adding the <code>data-iconpos="top"</code> attribute to each anchor.</p>
<div data-role="footer">
- <div data-role="navbar">
+ <div data-role="navbar" data-grid="b">
<ul>
<li><a href="#" data-icon="grid" data-iconpos="top">Summary</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active" data-iconpos="top">Favs</a></li>
@@ -166,7 +166,7 @@ <h2>Using 3rd party icon sets</h2>
</style>
<div data-role="footer" class="nav-glyphish-example">
- <div data-role="navbar" class="nav-glyphish-example">
+ <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
<ul>
<li><a href="#" id="chat" data-icon="custom">Chat</a></li>
<li><a href="#" id="email" data-icon="custom">Email</a></li>
@@ -185,7 +185,7 @@ <h2>Theming navbars</h2>
<p>Navbars can be set to any theme color by <code>data-theme</code> attribute to the links and specifying any theme swatch.</p>
<div data-role="footer">
- <div data-role="navbar" data-theme="e">
+ <div data-role="navbar" data-theme="e" data-grid="b">
<ul>
<li><a href="#" data-icon="grid" data-iconpos="top" data-theme="b">Summary</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active" data-iconpos="top" data-theme="b">Favs</a></li>
View
@@ -13,15 +13,37 @@ $.fn.grid = function(options){
$(this).addClass('ui-grid-' + o.grid);
- var $kids = $(this).children();
- iterator = o.grid == 'a' ? 2 : 3;
+ var $kids = $(this).children(),
+ iterator;
+
+ switch( o.grid ){
+ case 'a':
+ iterator = 2;
+ break;
+ case 'b':
+ iterator = 3;
+ break;
+ case 'c':
+ iterator = 4;
+ break;
+ case 'd':
+ iterator = 5;
+ break;
+ }
$kids.filter(':nth-child(' + iterator + 'n+1)').addClass('ui-block-a');
$kids.filter(':nth-child(' + iterator + 'n+2)').addClass('ui-block-b');
- if(iterator == 3){
+ if(iterator > 2){
$kids.filter(':nth-child(3n+3)').addClass('ui-block-c');
- }
+ }
+ if(iterator> 3){
+ $kids.filter(':nth-child(4n+4)').addClass('ui-block-d');
+ }
+ if(iterator > 4){
+ $kids.filter(':nth-child(5n+5)').addClass('ui-block-e');
+ }
+
});
};
})(jQuery);
@@ -7,7 +7,8 @@
(function($, undefined ) {
$.widget( "mobile.navbar", $.mobile.widget, {
options: {
- iconpos: 'top'
+ iconpos: 'top',
+ grid: 'a'
},
_create: function(){
var $navbar = this.element,
@@ -18,7 +19,7 @@ $.widget( "mobile.navbar", $.mobile.widget, {
.addClass('ui-navbar')
.attr("role","navigation")
.find("ul")
- .grid({grid: $navbtns.length > 2 ? "b" : "a"});
+ .grid({grid: this.options.grid });
if( !iconpos ){
$navbar.addClass("ui-navbar-noicons");

0 comments on commit 78f342b

Please sign in to comment.