jQuery Mobile导航栏中每行超过5个项目

我没有成功地查找变量来更改导航栏中单行中的最大项目数。

我刚刚开始使用jQuery Mobile，尝试创建一个包含大约7个单字母项目的导航栏。 当存在超过5个项目时，导航栏会自动换行，这对我的项目来说是不可取的。

任何人都可以指出我在代码或css中控制这种行为吗？

Answer 1

使用jQuery mobile 1.4.0，我所要做的就是创建自己的CSS类：

.mytab { width: 12.5% !important; /* 12.5% for 8 tabs wide */ clear: none !important; /* Prevent line break caused by ui-block-a */ } 

..并将其包含在我的列表中：

 
 
One
 
Two
 
Three
 
Four
 
Five
 
Six
 
Seven
 
Eight
  

（原来的答案有jQuery手机版错了）

Answer 2

你是对的，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; } 

可能还有其他变化，但这些变化是迄今为止突出的变化。

• 链接到JS
• 链接到CSS

失败尝试使用导航栏按钮，但它们也相互堆叠： 实时链接

Answer 3

来自Phill Pafford

“并添加以下内容：……”{css code}

请更改为….（注意：宽度更改为16.65％。此注释已添加，因为StackOverflow不允许进行单字母编辑。）

 / * 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;  }

Answer 4

您可以尝试其他方式在导航栏中添加所需数量的项目。 让我解释。

导航栏的HTML就像休闲一样。

 
 
 
One
 
Two
 
Three
 
Four
 
Five
 
Seven
  

添加此Jquery函数以从

中删除类ui-grid-a，以限制导航栏上的项目数。

 $(document).ready(function() { $("#my-navbar > ul").removeClass("ui-grid-a"); }); 

现在您必须计算每个导航栏项的宽度，或者您可以手动设置它。 在此示例中，我们在导航栏上显示了7个项目，我们希望将空间平均分配给每个项目。

对于PHP页面，我们将执行此操作。

对于静态HTML页面，您可以手动设置每个项目的宽度

而已 ：）

我已经把它用于我，它工作正常。

Answer 5

后：

/ * grid d：20/20/20/20/20 * / .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 {width：19.925％; } .ui-grid-d>：nth-​​child（n）{width：20％; } .ui-grid-d .ui-block-a {clear：left; }

在CSS中，ADD

/ * 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.66％ ; } .ui-grid -e>：nth-​​child（n）{width：16.6％; } .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.28％; } .ui-grid-f>：nth-​​child（n）{width：14.28％; } .ui-grid-f .ui-block-a {clear：left; }

并在js做一点修改：

 (function( $, undefined ) { $.fn.grid = function( options ) { return this.each(function() { var $this = $( this ), o = $.extend({ grid: null }, options ), $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"; $this.addClass( "ui-grid-duo" ); } } iterator = gridCols[grid]; //alert(iterator); $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(" + iterator + "n+3)" ).addClass( "ui-block-c" ); } if ( iterator > 3 ) { $kids.filter( ":nth-child(" + iterator + "n+4)" ).addClass( "ui-block-d" ); } 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 ); 

最多可以使用7个网格。 在html代码中，对于6个网格使用data-grid =“e”，对于7个网格使用data-grid =“f”。

Answer 6

OP没有明确表示奇数个项目的数量高于5.对于偶数，我们可以将jQuery的响应网格与navbar结合使用。

例如

 
 
 
 
 
camera
 
edit
 
settings
 
 
 
 
 
grid
 
about
 
mail
 
 
 
  

Answer 7

white-space属性指定如何处理元素内的空白。

nowrap：空格的序列将折叠成一个空格。 文本永远不会换行到下一行。 文本继续在同一行，直到遇到
标记

还有CSS自动换行属性

break-word：必要时内容将换行到下一行，如果需要，也会发生分词。

这个答案的来源：W3C

我也查看了jQuery移动代码并找到了这一部分：

 .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 { width:20%; } 

因此，通过减少此数量，您应该可以在列表中挤出更多项目。 （从它的外观来看，你还需要定义f和g，因为这个只能达到e）

Answer 8

我会看一个不同的ui模式。 这对于小型iphone 4，甚至是iphone 5设备来说都是一个非常棘手的导航栏。 仅仅因为你能做到这一点并不意味着你应该这样做。