Более 5 элементов на линии в JQuery Mobile навигационной панели

голоса
24

Я безуспешно искал переменную, чтобы изменить максимальное число элементов в одной строке в навигационной панели.

Я только начиная с JQuery Mobile, пытаясь создать Navbar с около 7 односимвольных пунктов. Navbar обертывания автоматически, когда более чем 5 деталей присутствуют, что нежелательно для моего проекта.

Может кто-нибудь мне точку к куску в коде или CSS, который регулирует это поведение?

Задан 28/05/2011 в 12:34
источник пользователем
На других языках...                            


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

Там могут быть и другие изменения, как хорошо, но это те, которые выделяются как сейчас.

Неудачная попытка использовать кнопки для навигационной панели , но они складывают друг на друга , а также: Живая Ссылка

Ответил 28/05/2011 в 14:31
источник пользователем

голоса
14

Использование JQuery мобильного 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 мобильной версии неправильно)

Ответил 06/01/2014 в 04:35
источник пользователем

голоса
5

От Phill Pafford

"И добавить эти: ...." {CSS код}

пожалуйста, изменится .... (Примечание: ширина изменяется на 16,65% Это примечание добавлено потому, что StackOverflow не позволяет буквы изменения.).

/ * Сетка е: 16/16/16/16/16/16 * /
.ui-сетка-е .ui-блок-а, .ui-сетка-е .ui-блок-б, .ui-сетка-е .ui-блок-с, .ui-сетка-е .ui-блок- д, .ui-сетка-е .ui-блок-е, .ui-сетка-е .ui-блок-F {ширина: 16,65%; }
.ui-сетка-е .ui-блок-а {ясно: левый; }

/ * Сетка е: 14/14/14/14/14/14/14 * /
.ui-сетка-е .ui-блок-а, .ui-сетка-е .ui-блок-б, .ui-сетка-е .ui-блок-с, .ui-сетка-е .ui-блок- д, .ui-сетка-е .ui-блок-е, .ui-сетка-е .ui-блок-е, .ui-сетка-е .ui-блок-г {ширина: 14,2857%; }
.ui-сетка-е .ui-блок-а {ясно: слева; }
Ответил 15/06/2011 в 16:52
источник пользователем

голоса
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 для удаления класса UI-сетка-а от <ul>что ограничивает число элементов на панели навигации.

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

Это оно :)

Я использовал его для меня, и она отлично работает.

Ответил 09/03/2013 в 10:01
источник пользователем

голоса
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>
Ответил 26/07/2014 в 21:38
источник пользователем

голоса
2

После:

/ * Сетки д: 20/20/20/20/20 * / .ui-сетка-д .ui-блок-а, .ui-сетка-д-.ui блок-б, .ui-сетка-д .ui -блок-с, .ui-сетка-д-.ui блок-д, .ui-сетка-д .ui-блок-е {ширина: 19,925%; } .ui-сетка-д>: п-й ребенок (п) {ширина: 20%; } .ui-сетка-д .ui-блок-а {ясно: слева; }

в CSS, ADD

/ * Сетка е: 16/16/16/16/16/16 * / .ui-сетка-е .ui-блок-а, .ui-сетка-е .ui-блок-б, .ui-сетка-е .ui-блок-с, .ui-сетка-е .ui-блок-д, .ui-сетка-е .ui-блок-е, .ui-сетка-е .ui-блок-F {ширина: 16.66% ; } .ui-сетка-е>: п-й ребенок (п) {ширина: 16,6%; } .ui-сетка-е .ui-блок-а {ясно: слева; }

/ * Сетка F: 14/14/14/14/14/14/14 * / .ui-сетка-е .ui-блок-а, .ui-сетка-е .ui-блок-б, .ui сетки -f .ui-блок-с, .ui-сетка-е .ui-блок-д, .ui-сетка-е .ui-блок-е, .ui-сетка-е .ui-блок-е, .ui -grid-е .ui-блок-г {ширина: 14,28%; } .ui-сетка-F>: п-й ребенок (п) {ширина: 14,28%; } .ui-сетка-е .ui-блок-а {ясно: слева; }

И сделать небольшое изменение в ЯШАХ:

(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 сетки, данные сетки = «е» для 7 сетки.

Ответил 07/05/2013 в 06:41
источник пользователем

голоса
0

Я хотел бы посмотреть на другой шаблон пользовательского интерфейса. Это будет очень сложно Navbar на небольшом Iphone 4, или даже на iphone 5 устройства. Просто потому, что вы можете сделать, это не значит, что вы должны.

Ответил 07/01/2014 в 14:50
источник пользователем

голоса
0

Свойство белого пространства определяет, как бело-пространство внутри элемента обрабатывается.

Nowrap: Последовательности пробельных разрушится в один пробел. Текст никогда не переносится на следующую строку. Текст продолжается на той же строке , пока <br />метка не встречается

Также CSS слово завернуть свойство

брейк-слова: содержание будет перенесено на следующую строку при необходимости, и слово-перерыв будет происходить, если это необходимо.

Источник этого ответа: 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%; }

Так что, возможно, за счет уменьшения этой суммы, которую вы должны быть в состоянии сжать больше элементов в списке. (Судя по ним также необходимо будет определить п и г, так как это один только встал е)

Ответил 28/05/2011 в 12:54
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more