jQuery Mobile 导航栏中每行超过 5 个项目
Posted
技术标签:
【中文标题】jQuery Mobile 导航栏中每行超过 5 个项目【英文标题】：More than 5 items per line in jQuery Mobile navbar 【发布时间】：2011-05-28 11:34:10 【问题描述】：我没有成功地寻找一个变量来更改导航栏中单行中的最大项目数。
我刚开始使用 jQuery Mobile，试图创建一个包含大约 7 个单字母项目的导航栏。当存在超过 5 个项目时，导航栏会自动换行，这对我的项目来说是不可取的。
谁能指出我在规范这种行为的代码或 css 中的一段？
【问题讨论】：
【参考方案1】：你说得对，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;
可能还有其他变化，但这些是目前最突出的变化。
Link to JS Link to CSS尝试使用导航栏按钮失败，但它们也相互堆叠：Live Link
【讨论】：
查看 Khwan 对下面 CSS 的修复。【参考方案2】：使用 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 */
..并将其包含在我的列表中：
<ul id='tabsList'>
<li class="mytab"><a href="#tab1" data-ajax="false">One</a></li>
<li class="mytab"><a href="#tab2" data-ajax="false">Two</a></li>
<li class="mytab"><a href="#tab3" data-ajax="false">Three</a></li>
<li class="mytab"><a href="#tab4" data-ajax="false">Four</a></li>
<li class="mytab"><a href="#tab5" data-ajax="false">Five</a></li>
<li class="mytab"><a href="#tab6" data-ajax="false">Six</a></li>
<li class="mytab"><a href="#tab7" data-ajax="false">Seven</a></li>
<li class="mytab"><a href="#tab8" data-ajax="false">Eight</a></li>
</ul>
（原来的答案有jQuery移动版本错误）
【讨论】：
我还没有测试过你的解决方案，但可能在以后的 jQuery 移动版本中这变得更容易了。这个问题已经有好几年了。 我想有人可能会遇到这个问题（就像我一样）并想要一个当前的替代方案 @lyschoening，你知道更好的方法吗？在我的（简短的）研究中，这是我发现的唯一一种不涉及猴子修补源代码的方法，或者是比这四行 CSS 复杂得多的 javascript。 另一个注意事项：如果你这样做width: inherit !important;，项目将自动调整大小，而不是全部大小相同。在某些情况下，这可能是可取的；如果不均匀的宽度是可以接受的，您可以从适用于任意数量项目的 CSS 中受益。【参考方案3】：
来自菲尔·帕福德
“并添加这些：....” CSS代码
请更改为 ....（注意：宽度更改为 16.65%。添加此注释是因为 *** 不允许单字母编辑。）
/* 网格 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 宽度：16.65%; .ui-grid-e .ui-block-a 清除：左； /* 网格 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 宽度: 14.2857%; .ui-grid-f .ui-block-a 清除：左；【讨论】：
【参考方案4】：您可以尝试其他方式在导航栏中添加任意数量的项目。让我解释一下。
导航栏的html是休闲的。
<div data-role="navbar" id="my-navbar">
<ul>
<li><a href="a.html">One</a></li>
<li><a href="b.html">Two</a></li>
<li><a href="a.html">Three</a></li>
<li><a href="b.html">Four</a></li>
<li><a href="a.html">Five</a></li>
<li><a href="b.html">Seven</a></li>
</ul>
添加此 Jquery 函数以从 <ul> 中删除限制导航栏上项目数量的类 ui-grid-a。
$(document).ready(function()
$("#my-navbar > ul").removeClass("ui-grid-a");
);
现在您必须计算每个导航栏项目的宽度，或者您可以手动设置它。在这个例子中，我们有 7 个项目要显示在导航栏上，我们希望将空间平均分配给每个项目。
对于 PHP 页面，我们会这样做。
<?php
/// calculating width of each navbar ///
$width = 100/7; /// dividing 100% space among 7 items. If data is coming form DB then use mysql_num_rows($resource) instead of static number "7"
?>
<style>
.ui-block-a
width:<?php echo $width;?>% !important;
.ui-block-b
width:<?php echo $width;?>% !important;
</style>
<?php
/// end calculating ///
?>
对于静态 HTML 页面，您可以手动设置每个项目的宽度
<style>
.ui-block-a
width:14.28% !important;
.ui-block-b
width:14.28% !important;
</style>
就是这样:)
我自己用过，效果很好。
【讨论】：
这个解决方案非常适合我和固定大小的导航栏。谢谢！【参考方案5】：之后：
/* 网格 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 宽度：19.925%; .ui-grid-d > :nth-child(n) 宽度：20%; .ui-grid-d .ui-block-a 清除：左；
在 CSS 中，添加
/* 网格 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 宽度：16.66%； .ui-grid-e > :nth-child(n) 宽度：16.6%; .ui-grid-e .ui-block-a 清除：左；
/* 网格 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 宽度：14.28%; .ui-grid-f > :nth-child(n) 宽度：14.28%; .ui-grid-f .ui-block-a 清除：左；
并在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 代码中使用 data-grid="e" 代表 6 个网格，data-grid="f" 代表 7 个网格。
【讨论】：
【参考方案6】：OP 没有明确表示奇数项超过 5。对于偶数，我们可以将 jQuery 的响应式网格与导航栏结合使用。
例如
<div data-role="navbar">
<div class="ui-grid-a center">
<div class="ui-block-a">
<ul>
<li><a href="#" data-icon="camera">camera</a></li>
<li><a href="#" data-icon="edit">edit</a></li>
<li><a href="#" data-icon="gear">settings</a></li>
</ul>
</div>
<div class="ui-block-b">
<ul>
<li><a href="#" data-icon="grid">grid</a></li>
<li><a href="#" data-icon="info">about</a></li>
<li><a href="#" data-icon="mail">mail</a></li>
</ul>
</div>
</div>
</div>
【讨论】：
【参考方案7】：white-space 属性指定如何处理元素内的空白。
nowrap：空格序列将折叠成一个空格。文本永远不会换行到下一行。文本在同一行继续，直到遇到<br /> 标记
也是 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）
【讨论】：
再次更新了答案。您能否也粘贴一个链接到您的工作，以便我看一下？【参考方案8】：我会看一个不同的 ui 模式。在小型 iphone 4 甚至 iphone 5 设备上，这将是一个非常棘手的导航栏。仅仅因为你能做到这一点并不意味着你应该这样做。
【讨论】：
以上是关于jQuery Mobile 导航栏中每行超过 5 个项目的主要内容，如果未能解决你的问题，请参考以下文章
Jquery Mobile Footer NavBar 水平滚动