Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-14 09:33:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed up grids and navbar again - this time to automate the column count to number of children, or 'a' when greater than 5. data-grid attribute can be set to any grid letter to trump the automated counting.

Browse source
This commit is contained in:
scottjehl 2010-11-11 17:33:07 -05:00
parent 78f342b5e0
commit d3a0d33791
3 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
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" data-grid="b">
<div data-role="navbar">
<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" data-grid="b">
<div data-role="navbar">
<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" data-grid="b">
<div data-role="navbar">
<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" data-grid="b">
<div data-role="navbar">
<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>
@ -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" data-grid="b">
<div data-role="navbar" data-theme="e" >
<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>

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

@ -8,31 +8,31 @@
$.fn.grid = function(options){
return $(this).each(function(){
var o = $.extend({
grid: 'a'
grid: null
},options);
$(this).addClass('ui-grid-' + o.grid);
var $kids = $(this).children(),
gridCols = {a: 2, b:3, c:4, d:5},
grid = o.grid,
iterator;
switch( o.grid ){
case 'a':
iterator = 2;
break;
case 'b':
iterator = 3;
break;
case 'c':
iterator = 4;
break;
case 'd':
iterator = 5;
break;
if( !grid ){
if( $kids.length <= 5 ){
for(var letter in gridCols){
if(gridCols[letter] == $kids.length){ grid = letter; }
}
}
else{
grid = 'a';
}
}
$kids.filter(':nth-child(' + iterator + 'n+1)').addClass('ui-block-a');
$kids.filter(':nth-child(' + iterator + 'n+2)').addClass('ui-block-b');
iterator = gridCols[grid];
$(this).addClass('ui-grid-' + grid);
$kids.filter(':nth-child(' + iterator + 'n+1)').addClass('ui-block-a');
$kids.filter(':nth-child(' + iterator + 'n+2)').addClass('ui-block-b');
if(iterator > 2){
$kids.filter(':nth-child(3n+3)').addClass('ui-block-c');

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

@ -8,7 +8,7 @@
$.widget( "mobile.navbar", $.mobile.widget, {
options: {
iconpos: 'top',
grid: 'a'
grid: null
},
_create: function(){
var $navbar = this.element,