Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-21 22:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
scottjehl 2010-11-11 17:17:35 -05:00
parent 5aa980fdb4
commit 78f342b5e0
3 changed files with 37 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
docs/toolbars/docs-navbar.html
View file

@ -48,7 +48,7 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
</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 @@
<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>

30
js/jquery.mobile.grid.js
View file

@ -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);

5
js/jquery.mobile.navbar.js
View file

@ -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");