我未能成功地寻找一个变量来更改导航栏中单行中的最大项目数。
我刚刚开始使用 jQuery Mobile,尝试创建一个包含大约 7 个单字母项目的导航栏。当存在超过 5 个项目时,导航栏会自动换行,这对我的项目来说是不可取的。
任何人都可以向我指出规范此行为的代码或 CSS 中的一段吗?
最佳答案
你说得对,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
关于jquery - jQuery Mobile 导航栏中每行超过 5 个项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6161377/