Ich habe erfolglos nach einer Variablen gesucht, um die maximale Anzahl von Elementen in einer einzelnen Zeile in einer Navigationsleiste zu ändern.
Ich fange gerade mit jQuery Mobile an und versuche, eine Navigationsleiste mit etwa 7 Einzelbuchstabenelementen zu erstellen. Die Navigationsleiste wird automatisch umbrochen, wenn mehr als 5 Elemente vorhanden sind, was für mein Projekt unerwünscht ist.
Kann mir jemand auf ein Stück im Code oder CSS verweisen, das dieses Verhalten regelt?
Phil Pafford
Sie haben Recht, jQM begrenzt die Spalten auf 5. Wenn Sie sich den Code ansehen, scheint dies die Funktion zu sein:
/*
* 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');
}
});
};
Es wird einige Arbeit erfordern, aber Sie können dies auf das gewünschte 7-Spalten-Layout erweitern. Sie müssen auch das benutzerdefinierte CSS hinzufügen, um die neuen Spalten zu handhaben, sodass Ihre neue Funktion in etwa so aussehen würde
/*
* 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
Im CSS:
ändere das:
.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;}
dazu:
.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;}
und füge diese hinzu:
/* 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; }
Es könnte auch andere Änderungen geben, aber diese sind die, die jetzt auffallen.
Fehlgeschlagener Versuch, Schaltflächen für die Navigationsleiste zu verwenden, aber sie stapeln sich auch übereinander: Live-Link
Siehe Khwans Fix für das CSS unten.
– Jeroen K
10. September 2012 um 9:56 Uhr
Mit jQuery mobile 1.4.0 musste ich lediglich meine eigene CSS-Klasse erstellen:
.mytab {
width: 12.5% !important; /* 12.5% for 8 tabs wide */
clear: none !important; /* Prevent line break caused by ui-block-a */
}
..und nimm es in meine Liste auf:
<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>
(ursprüngliche Antwort hatte die mobile Version von jQuery falsch)
Ich habe Ihre Lösung nicht getestet, aber möglicherweise ist dies mit späteren mobilen Versionen von jQuery einfacher geworden. Die Frage ist mehrere Jahre alt.
– Lyschoening
7. Januar 2014 um 16:16 Uhr
Ich dachte mir, dass jemand auf die Frage stoßen könnte (so wie ich) und eine aktuelle Alternative haben möchte
– David Nottage
15. Januar 2014 um 3:31 Uhr
@lyschoening, kennst du einen besseren Weg? In meiner (kurzen) Recherche war dies die einzige Methode, die ich gefunden habe, die kein Monkey-Patching der Quelle oder JavaScript beinhaltete, das viel komplizierter war als diese vier CSS-Zeilen.
– Josch
26. Juli 2014 um 22:25 Uhr
Noch eine Anmerkung: Wenn ja width: inherit !important; die Elemente werden automatisch skaliert, anstatt alle die gleiche Größe zu haben. Unter manchen Umständen kann dies wünschenswert sein; Wenn die uneinheitlichen Breiten akzeptabel sind, profitieren Sie von CSS, das für eine beliebige Anzahl von Elementen funktioniert.
– Josch
26. Juli 2014 um 22:27 Uhr
Khwan Tawatsiri
Von Phil Pafford
“und füge diese hinzu: ….” { CSS-Code }
bitte ändern Sie zu …. (HINWEIS: Die Breite wurde auf 16,65 % geändert. Dieser Hinweis wurde hinzugefügt, weil StackOverflow keine Bearbeitungen von einem Buchstaben zulässt.)
/* 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; }
Mamoon Rashid
Sie können einen anderen Weg ausprobieren, um so viele Elemente wie nötig zur Navigationsleiste hinzuzufügen. Lassen Sie mich erklären.
HTML der Navbar ist wie Brachland.
<div data-role="navbar" id="my-navbar">
<ul>
<li><a href="https://stackoverflow.com/questions/6161377/a.html">One</a></li>
<li><a href="b.html">Two</a></li>
<li><a href="https://stackoverflow.com/questions/6161377/a.html">Three</a></li>
<li><a href="b.html">Four</a></li>
<li><a href="https://stackoverflow.com/questions/6161377/a.html">Five</a></li>
<li><a href="b.html">Seven</a></li>
</ul>
Fügen Sie diese Jquery-Funktion hinzu, um die Klasse ui-grid-a zu entfernen <ul> das begrenzt die Anzahl der Elemente in der Navigationsleiste.
$(document).ready(function() {
$("#my-navbar > ul").removeClass("ui-grid-a");
});
Jetzt müssen Sie die Breite jedes Navigationsleistenelements berechnen ODER Sie können sie manuell festlegen. In diesem Beispiel haben wir 7 Elemente, die in der Navigationsleiste angezeigt werden sollen, und wir möchten den Platz gleichmäßig auf jedes Element aufteilen.
Für eine PHP-Seite werden wir dies tun.
<?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 ///
?>
Bei statischen HTML-Seiten können Sie die Breite jedes Elements manuell festlegen
<style>
.ui-block-a {
width:14.28% !important;
}
.ui-block-b {
width:14.28% !important;
}
</style>
Das ist es 🙂
Ich habe es für mich verwendet und es funktioniert gut.
Nach:
/* Raster 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 { Breite: 19,925 %; } .ui-grid-d > :nth-child(n) { Breite: 20%; } .ui-grid-d .ui-block-a { löschen: links; }
in CSS, HINZUFÜGEN
/* Raster e: 16/16/16/16/16/16 */ .ui-raster-e .ui-block-a, .ui-raster-e .ui-block-b, .ui-raster-e .ui-block-c, .ui-grid-e .ui-block-d, .ui-grid-e .ui-block-e, .ui-grid-e .ui-block-f { Breite: 16,66 % ; } .ui-grid-e > :nth-child(n) { Breite: 16,6 %; } .ui-grid-e .ui-block-a { löschen: links; }
/* Gitter f: 14/14/14/14/14/14/14 */ .ui-Gitter-f .ui-Block-a, .ui-Gitter-f .ui-Block-b, .ui-Gitter -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 {Breite: 14,28 %; } .ui-grid-f > :nth-child(n) { Breite: 14,28 %; } .ui-grid-f .ui-block-a { löschen: links; }
Und machen Sie eine kleine Änderung in 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 );
Dabei können Sie bis zu 7 Raster verwenden.
Verwenden Sie im HTML-Code data-grid=”e” für 6-Raster, data-grid=”f” für 7-Raster.
fzzylogik
Das OP war nicht ausdrücklich darauf bedacht, eine ungerade Anzahl von Elementen über 5 zu haben. Für gerade Zahlen können wir die responsiven Raster von jQuery in Verbindung mit der Navigationsleiste verwenden.
z.B
<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>
Die Eigenschaft white-space gibt an, wie Leerzeichen innerhalb eines Elements gehandhabt werden.
nowrap: Sequenzen von Leerzeichen werden zu einem einzigen Leerzeichen zusammenfallen. Text wird niemals in die nächste Zeile umbrochen. Der Text wird in derselben Zeile fortgesetzt, bis a <br /> Tag gefunden wird
Auch CSS-Wortumbruch-Eigenschaft
Break-Wort: Der Inhalt wird bei Bedarf in die nächste Zeile umgebrochen, und bei Bedarf wird auch ein Wortumbruch durchgeführt.
Quelle für diese Antwort: W3C
Ich habe mir auch den jQuery-Mobilcode angesehen und diesen Abschnitt gefunden:
.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%; }
Wenn Sie also diesen Betrag reduzieren, sollten Sie in der Lage sein, mehr Elemente in die Liste aufzunehmen. (Wie es aussieht, müssten Sie auch f und g definieren, da dieses nur bis e gekommen ist.)
Habe die Antwort nochmal aktualisiert. Kannst du auch einen Link zu deinem Versuch einfügen, damit ich ihn mir ansehen kann?
– Mach esmenschlicher
28. Mai 2011 um 12:33 Uhr
