web-dev-qa-db-ja.com

jQueryMobileナビゲーションバーの1行に5つ以上のアイテム

ナビゲーションバーの1行のアイテムの最大数を変更する変数を検索できませんでした。

私はjQueryMobileから始めて、約7つの1文字のアイテムでナビゲーションバーを作成しようとしています。 5つを超えるアイテムが存在する場合、ナビゲーションバーは自動的にラップします。これは私のプロジェクトには望ましくありません。

誰かがこの動作を規制するコードまたはCSSの一部を私に指摘できますか？

jquerymobilejquery-mobilenavbar
24
lyschoening

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 mobileのバージョンが間違っていました）

14
Dave Nottage

そうです、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; }

他の変更もあるかもしれませんが、これらは現在目立っているものです。

失敗したナビゲーションバーのボタンを使用しようとしましたが、それらも互いにスタックしています： ライブリンク

18
Phill Pafford

フィルパフォードから

"そしてこれらを追加します：...." {css code}

...に変更してください（注：幅は16.65％に変更されました。StackOverflowでは1文字の編集が許可されていないため、このメモが追加されました。）

/*グリッド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 {クリア：左; }
5
Khwan Tawatsiri

必要な数だけナビゲーションバーにアイテムを追加する別の方法を試すことができます。説明させてください。

Navbarの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関数を追加して、navbarのアイテム数を制限するクラスui-grid-aを<ul>から削除します。

$(document).ready(function() {

    $("#my-navbar > ul").removeClass("ui-grid-a");

});

次に、各ナビゲーションバーアイテムの幅を計算する必要がありますOR手動で設定できます。この例では、ナビゲーションバーに表示する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>

それでおしまい ：）

私はそれを私のために使用しました、そしてそれはうまく働きます。

4
Mamoon Rashid

後：

/ *グリッド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ではADD

/ *グリッド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コードでは、6グリッドの場合はdata-grid = "e"、7グリッドの場合はdata-grid = "f"を使用します。

2
Towhidur Rahman

OPは、5を超える奇数のアイテムがあることを明示していませんでした。偶数の場合、jQueryのレスポンシブグリッドをnavbarと組み合わせて使用​​できます。

例えば.

<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>
2
fzzylogic

別のUIパターンを見てみます。これは、小さなiphone 4、またはiphone5デバイスでさえ本当にトリッキーなナビゲーションバーになるでしょう。これができるからといって、そうすべきだとは限りません。

0
imaginethepoet

White-spaceプロパティは、要素内の空白の処理方法を指定します。

nowrap：空白のシーケンスは単一の空白に折りたたまれます。テキストが次の行に折り返されることはありません。 <br />タグが検出されるまで、テキストは同じ行に続きます

また、CSSワードラッププロパティ

break-Word：コンテンツは必要に応じて次の行に折り返され、必要に応じてWord-breakも発生します。

この回答の出典：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までしか上がっていないからです）

0
Ali Habibzadeh