Я безуспешно искал переменную для изменения максимального количества элементов в одной строке на панели навигации.
Я только начинаю с jQuery Mobile, пытаясь создать навигационную панель с 7 отдельными буквами. Navbar автоматически включается, когда присутствует более 5 элементов, что нежелательно для моего проекта.
Может ли кто-нибудь указать мне часть кода или css, которые регулируют это поведение?
Используя 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)
Вы правы 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
От Филла Паффорда
"и добавьте следующее:...." { код css }
измените на.... (ПРИМЕЧАНИЕ: ширина изменилась до 16.65%. Эта заметка добавлена, потому что StackOverflow не разрешает однобуквенные изменения.)
/* 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; }
Вы можете попробовать другой способ добавления элементов в navbar столько, сколько вам нужно. Позвольте мне объяснить.
HTML navbar - это паров.
<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 элементов для отображения на navbar, и мы хотим разделить пространство одинаково на каждый элемент.
Для страницы 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>
Вот оно:)
Я использовал его для меня, и он отлично работает.
После того, как:
/* сетка 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) {width: 20%; } .ui-grid-d.ui-block-a {clear: left; }
в 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 {width: 16.66%; } .ui-grid-e > : nth-child (n) {width: 16.6%; } .ui-grid-e.ui-block-a {clear: left; }
/* сетка 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.28%; } .ui-grid-f > : nth-child (n) {width: 14.28%; } .ui-grid-f.ui-block-a {clear: left; }
И сделайте небольшую модификацию в 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 grid, data-grid = "f" для 7-сет.
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>
Свойство white-space указывает, как обрабатывается пустое пространство внутри элемента.
nowrap: Последовательности пробелов рухнут в одно пробелы. Текст не будет переноситься на следующую строку. Текст продолжается в той же строке, пока не будет встречен тег <br />
Также свойство CSS word wrap
break-word: при необходимости содержимое будет перенесено на следующую строку, и при необходимости произойдет разрыв слов.
Источник для этого ответа: 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)
Я бы посмотрел на другой шаблон ui. Это будет очень сложная навигационная панель на небольшом iphone 4 или даже на устройстве iphone 5. Просто потому, что вы можете это сделать, это не значит, что вы должны.