Plus de 5 articles par ligne en jQuery Mobile navbar

j'ai en vain cherché une variable pour modifier le nombre maximal d'éléments dans une seule ligne dans une barre de navigation.

Je ne fais que commencer avec jQuery Mobile, essayant de créer une navbar avec environ 7 items d'une seule lettre. Le navbar s'enroule automatiquement lorsque plus de 5 éléments sont présents, ce qui est indésirable pour mon projet.

est-ce que quelqu'un peut m'indiquer un élément dans le code ou css qui régule ce comportement?

24
demandé sur lyschoening 2011-05-28 15:34:10
la source

8 ответов

en utilisant jQuery mobile 1.4.0, tout ce que j'avais à faire était de créer ma propre classe CSS:

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

..et l'inclure dans ma liste:

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

(la réponse originale était erronée dans la version mobile de jQuery)

14
répondu Dave Nottage 2014-01-06 07:35:10
la source

vous avez raison jQM limite les colonnes à 5. En regardant le code, on dirait que c'est la fonction:

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

    }); 
};

il faudra du travail, mais vous pouvez étendre cela à la disposition désirée de 7 colonnes. Vous aurez également besoin d'ajouter le CSS personnalisé ainsi pour gérer les nouvelles colonnes, de sorte que vous Nouvelle fonction ressemblerait à quelque chose comme ceci

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

Dans le CSS:

changer ceci:

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

et ajouter les présentes:

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

Il y a peut être d'autres changements aussi, mais ce sont ceux qui se démarquent dès maintenant.

tentative ratée D'utiliser des boutons pour la barre de navigation, mais ils empilent les uns sur les autres: Lien Direct

18
répondu Phill Pafford 2014-07-26 22:34:27
la source

À Partir De Phill Pafford

"et ajouter ceux-ci: .... " { le code css }

s'il vous plaît changer .... (Note: la largeur est passée à 16,65%. Cette note a été ajoutée parce que StackOverflow ne permet pas les modifications à une lettre.)

/* 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; }
5
répondu Khwan Tawatsiri 2011-09-28 06:41:55
la source

vous pouvez essayer une autre façon d'ajouter des éléments dans navbar autant que vous avez besoin. Laissez-moi vous expliquer.

HTML de navbar est comme fallows.

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

ajouter cette fonction Jquery pour supprimer la classe ui-grid-a de <ul> qui limite le nombre d'éléments sur la barre de navigation.

$(document).ready(function() {

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

});

maintenant, vous devez calculer la largeur de chaque élément de la barre de navigation ou vous pouvez le régler manuellement. Dans cet exemple, nous avons 7 éléments à afficher sur navbar et nous voulons diviser l'espace de façon identique à chaque élément.

pour une page PHP nous le ferons.

<?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 ///
?>

pour les pages statiques HTML vous pouvez définir la largeur de chaque élément manuellement

<style>

.ui-block-a {
width:14.28% !important;
}
.ui-block-b {
width:14.28% !important;
}

</style>

c'est ça :)

je l'ai utilisé pour moi et il fonctionne très bien.

4
répondu Mamoon Rashid 2013-04-30 19:41:21
la source

Après:

/ * grille d: 20/20/20/20/20 */ .ui-grille-d .ui-bloc-a, .ui-grille-d .ui-bloc b, .ui-grille-d .ui-bloc c, .ui-grille-d .ui-bloc d, .ui-grille-d .iu-bloc - e {Largeur: 19.925%; } .ui-grid-d>: nth-child (n) { width: 20%; } .ui-grille-d .ui-bloc-{ clear: left; }

dans le CSS, AJOUTER

/ * Grille e: 16/16/16/16/16 */ .l'interface utilisateur-réseau-e .ui-bloc-a, .l'interface utilisateur-réseau-e .ui-bloc b, .l'interface utilisateur-réseau-e .ui-bloc c, .l'interface utilisateur-réseau-e .ui-bloc-d, .l'interface utilisateur-réseau-e .ui-bloc-e, .l'interface utilisateur-réseau-e .iu-bloc-f {largeur: 16.66%; } .l'interface utilisateur-réseau-e > :nth-child(n) { largeur: 16.6%; } .l'interface utilisateur-réseau-e .ui-bloc-{ clear: left; }

/ * grille f: 14/14/14/14/14/14 */ .l'interface utilisateur-réseau-f .ui-bloc-a, .l'interface utilisateur-réseau-f .ui-bloc b, .l'interface utilisateur-réseau-f .ui-bloc c, .l'interface utilisateur-réseau-f .ui-bloc d, .l'interface utilisateur-réseau-f .ui-bloc-e, .l'interface utilisateur-réseau-f .ui-bloc-f, .l'interface utilisateur-réseau-f .ui-bloc-g { width: 14.28%; } .l'interface utilisateur-réseau-f > :nth-child(n) { width: 14.28%; } .l'interface utilisateur-réseau-f .ui-bloc-a {clair: à gauche; }

Et faire un peu de modification en 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 );

Vous pouvez utiliser jusqu'à 7 grille. Dans le code html utiliser les données de la grille="e" pour 6 grille, grille de données="f" pour 7 grille.

2
répondu Towhidur Rahman 2013-05-07 09:41:25
la source

L'OP n'était pas explicite sur le fait d'avoir un nombre impair d'éléments au-dessus de 5. Pour des nombres pairs, nous pouvons utiliser les grilles responsive de jQuery en conjonction avec navbar.

e.g.

<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
répondu fzzylogic 2014-07-27 00:38:43
la source

la propriété white-space spécifie comment l'espace blanc à l'intérieur d'un élément est manipulé.

nowrap: Séquences d'espaces s'effondrera en un seul espace. Le texte ne passera jamais à la ligne suivante. Le texte continue sur la même ligne jusqu'à un <br /> balise est rencontré

aussi propriété CSS word wrap

break-word: le contenu s'enroule à la ligne suivante si nécessaire, et un break-word se produit également si nécessaire.

Source pour cette réponse: W3C

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

donc peut-être en réduisant ce montant vous devriez être en mesure de presser plus d'articles dans la liste. (Par son apparence, vous auriez aussi besoin de définir f et g comme celui-ci a seulement obtenu jusqu'à e)

0
répondu XGreen 2011-05-28 16:36:20
la source

je voudrais regarder un modèle d'interface utilisateur différent. Cela va être un navbar vraiment délicat sur un petit iphone 4, ou même sur iphone 5 appareil. Ce n'est pas parce que tu peux le faire que tu dois le faire.

0
répondu imaginethepoet 2014-01-07 17:50:40
la source

Autres questions sur