Более 5 элементов в строке в jQuery Mobile navbar

ProgramBox

Более 5 элементов в строке в jQuery Mobile navbar

Post author:admin
Запись опубликована:21 апреля, 2023
Post category:Вопросы по программированию

#jquery #mobile #jquery-mobile #navbar

#jquery #Мобильный #jquery-mobile #навигационная панель

Вопрос:

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

Я только начинаю с 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; }

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

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

Ответ №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 для мобильных устройств)

1. Я не тестировал ваше решение, но, возможно, это стало проще с более поздними версиями jQuery для мобильных устройств. Вопросу несколько лет.

2. Я подумал, что кто-то может столкнуться с этим вопросом (как и я) и захочет текущую альтернативу

3. @lyschoening, ты знаешь способ получше? В моем (кратком) исследовании это был единственный метод, который я нашел, который не включал в себя обезьянье исправление исходного кода или JavaScript, который был намного сложнее, чем эти четыре строки CSS.

4. Еще одно замечание: если вы это сделаете width: inherit !important; , элементы будут автоматически изменены вместо того, чтобы быть одинакового размера. При некоторых обстоятельствах это может быть желательно; если неравномерная ширина приемлема, вы можете воспользоваться CSS, который будет работать для произвольного количества элементов.

Ответ №3:

От Phill Pafford

«и добавьте это: …. » {css-код}

пожалуйста, измените на …. (ПРИМЕЧАНИЕ: ширина изменена на 16,65%. Это примечание добавлено, потому что StackOverflow не допускает однобуквенных изменений.)

/* таблица e: 16/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/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, чтобы удалить класс ui-grid-a из <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>

Вот и все 🙂

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

Ответ №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 > :n-й дочерний элемент (n) { ширина: 20% ; } .ui-grid-d .ui-block-a { очистить: слева; }

в CSS ДОБАВЬТЕ

/* сетка e: 16/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 > :n-й дочерний элемент (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 > :n-й дочерний элемент (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:

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

nowrap: последовательности пробелов свернутся в один пробел. Текст никогда не переносится на следующую строку. Текст продолжается на той же строке до тех пор, пока не встретится <br /> тег

Также свойство переноса слов CSS

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

Источник для этого ответа: W3C

Я также просмотрел код jQuery mobile и нашел этот раздел:

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

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