24

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

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

谁能指出我在规范这种行为的代码或 CSS 中的一块？

4

8 回答 8

18

没错，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

于 2011-05-28T13:31:18.210 回答
15

使用 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移动版错误）

于 2014-01-06T03:35:10.673 回答
5

从菲尔帕福德

“并添加这些：....” { css code }

请更改为 .... （注意：宽度更改为 16.65%。添加此注释是因为 StackOverflow 不允许单字母编辑。）

/* 网格 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 { 清除：左；}
于 2011-06-15T15:52:07.707 回答
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>

而已 ：）

我已经为我使用过它并且效果很好。

于 2013-03-09T09:01:59.580 回答
2

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>
于 2014-07-26T20:38:43.427 回答
2

后：

/* 网格 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 个网格。

于 2013-05-07T05:41:25.373 回答
0

The white-space property specifies how white-space inside an element is handled.

nowrap: Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br /> tag is encountered

Also CSS word wrap property

break-word: Content will wrap to the next line when necessary, and a word-break will also occur if needed.

Source for this answer: W3C

I looked at the jQuery mobile code also and found this section:

.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%; }

So perhaps by reducing this amount you should be able to squeeze more items in the list. (By the looks of it you also would need to define f and g as this one has only got up to e)

于 2011-05-28T11:54:46.317 回答
0

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

于 2014-01-07T13:50:40.937 回答