diff --git a/css/structure/jquery.mobile.grid.css b/css/structure/jquery.mobile.grid.css index f0898245739..bf9ce8b1afe 100644 --- a/css/structure/jquery.mobile.grid.css +++ b/css/structure/jquery.mobile.grid.css @@ -1,6 +1,6 @@ /* content configurations. */ .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; } -.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } +.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e, .ui-block-f, .ui-block-g { margin: 0; padding: 0; border: 0; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /* grid solo: 100 - single item fallback */ .ui-grid-solo .ui-block-a { display: block; float: none; } @@ -22,6 +22,14 @@ .ui-grid-d > :nth-child(n) { width: 20%; } .ui-grid-d .ui-block-a { clear: left; } +/* grid e: 16/16/16/16/16/16 */ +.ui-grid-e .ui-block-a, .ui-grid-e .ui-block-b, .ui-grid-e .ui-block-c, .ui-grid-e .ui-block-d, .ui-grid-e .ui-block-e, .ui-grid-e .ui-block-f { width: 16.65%; } +.ui-grid-e .ui-block-a { clear: left; } + +/* grid f: 14/14/14/14/14/14/14 */ +.ui-grid-f .ui-block-a, .ui-grid-f .ui-block-b, .ui-grid-f .ui-block-c, .ui-grid-f .ui-block-d, .ui-grid-f .ui-block-e, .ui-grid-f .ui-block-f, .ui-grid-f .ui-block-g { width: 14.2857%; } +.ui-grid-f .ui-block-a { clear: left; } + /* preset breakpoint to switch to stacked grid styles below 35em (560px) */ @media all and (max-width: 35em) { .ui-responsive .ui-block-a, diff --git a/js/jquery.mobile.grid.js b/js/jquery.mobile.grid.js index 3a25f167af4..d5aa2fd44a8 100644 --- a/js/jquery.mobile.grid.js +++ b/js/jquery.mobile.grid.js @@ -17,12 +17,12 @@ $.fn.grid = function( options ) { grid: null }, options ), $kids = $this.children(), - gridCols = { solo:1, a:2, b:3, c:4, d:5 }, + gridCols = { solo:1, a:2, b:3, c:4, d:5, e:6, f:7 }, grid = o.grid, iterator; if ( !grid ) { - if ( $kids.length <= 5 ) { + if ( $kids.length <= 7 ) { for ( var letter in gridCols ) { if ( gridCols[ letter ] === $kids.length ) { grid = letter; @@ -51,6 +51,12 @@ $.fn.grid = function( options ) { if ( iterator > 4 ) { $kids.filter( ":nth-child(" + iterator + "n+5)" ).addClass( "ui-block-e" ); } + if ( iterator > 5 ) { + $kids.filter(':nth-child(' + iterator + 'n+6)').addClass('ui-block-f'); + } + if ( iterator > 6 ) { + $kids.filter(':nth-child(' + iterator + 'n+7)').addClass('ui-block-g'); + } }); }; })( jQuery );