Вы правы. JQM ограничивает количество столбцов до 5. При просмотре кода эта функция выглядит следующим образом:
/*
* jQuery Mobile Framework : plugin for creating CSS grids
* Copyright (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function($, undefined ) {
$.fn.grid = function(options){
return this.each(function(){
var o = $.extend({
grid: null
},options);
var $kids = $(this).children(),
gridCols = {solo:1, a:2, b:3, c:4, d:5},
grid = o.grid,
iterator;
if( !grid ){
if( $kids.length <= 5 ){
for(var letter in gridCols){
if(gridCols[letter] == $kids.length){ grid = letter; }
}
}
else{
grid = 'a';
}
}
iterator = gridCols[grid];
$(this).addClass('ui-grid-' + grid);
$kids.filter(':nth-child(' + iterator + 'n+1)').addClass('ui-block-a');
if(iterator > 1){
$kids.filter(':nth-child(' + iterator + 'n+2)').addClass('ui-block-b');
}
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');
}
});
};
Это займет некоторую работу, но вы можете расширить ее до желаемой 7 колонок.
Вам также нужно будет добавить собственный CSS для обработки новых столбцов, чтобы ваша новая функция выглядела примерно так
/*
* jQuery Mobile Framework : plugin for creating CSS grids
* Copyright (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function($, undefined ) {
$.fn.grid = function(options){
return this.each(function(){
var o = $.extend({
grid: null
},options);
var $kids = $(this).children(),
gridCols = {solo:1, a:2, b:3, c:4, d:5, e:6, f:7},
grid = o.grid,
iterator;
if( !grid ){
if( $kids.length <= 7 ){
for(var letter in gridCols){
if(gridCols[letter] == $kids.length){ grid = letter; }
}
}
else{
grid = 'a';
}
}
iterator = gridCols[grid];
$(this).addClass('ui-grid-' + grid);
$kids.filter(':nth-child(' + iterator + 'n+1)').addClass('ui-block-a');
if(iterator > 1){
$kids.filter(':nth-child(' + iterator + 'n+2)').addClass('ui-block-b');
}
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');
}
if(iterator > 5){
$kids.filter(':nth-child(6n+6)').addClass('ui-block-f');
}
if(iterator > 6){
$kids.filter(':nth-child(7n+7)').addClass('ui-block-g');
}
});
};
}); // end
В CSS:
изменить это:
.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;}
к этому:
.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;}
и добавить эти:
/* grid e: 16/16/16/16/16/16 */
.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e .ui-block-f { width: 16%; }
.ui-grid-d .ui-block-a { clear: left; }
/* grid f: 14/14/14/14/14/14/14 */
.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e .ui-block-f .ui-block-g { width: 14%; }
.ui-grid-d .ui-block-a { clear: left; }
Могут быть и другие изменения, но это те, которые выделяются на данный момент.
Ошибка Попытка использовать кнопки для панели навигации, но они также накладываются друг на друга: Live Link