Listen in Spalten umschließen

StackOverflow https://stackoverflow.com/questions/4923

Frage

Ich benutze ColdFusion um eine Vorlage zu füllen, die enthält HTML Listen (<ul>'S).

Die meisten davon sind nicht so lang, aber einige sind lächerlich lang und könnten es wirklich vertragen, in 2-3 Spalten zu sein.

Ist dort ein HTML, ColdFusion oder vielleicht JavaScript (Ich habe jQuery verfügbar) Wie geht das einfach?Es lohnt sich nicht, eine überkomplizierte Schwergewichtslösung zu verwenden, um etwas Scrollen zu sparen.

War es hilfreich?

Lösung

Also habe ich diesen Artikel von A List Apart ausgegraben CSS-Swag:Mehrspaltige Listen.Am Ende habe ich die erste Lösung verwendet, sie ist nicht die beste, aber die anderen erfordern entweder die Verwendung von komplexem HTML, das nicht dynamisch generiert werden kann, oder die Erstellung vieler benutzerdefinierter Klassen, was möglich wäre, aber eine Menge Inline-Styling erfordern würde möglicherweise eine riesige Seite.

Andere Lösungen sind jedoch weiterhin willkommen.

Andere Tipps

Wenn die Unterstützung von Safari und Firefox für Sie gut genug ist, gibt es eine CSS-Lösung:

ul {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

Bei Opera bin ich mir nicht sicher.

Soweit ich weiß, gibt es dafür keine reine CSS/HTML-Methode.Am besten machen Sie es in der Vorverarbeitung (if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1).

Die andere Option ist die Verwendung von JavaScript (ich bin damit nicht vertraut). jQuery Bibliothek speziell) würde darin bestehen, Listen zu durchlaufen, wahrscheinlich basierend darauf, dass sie einer bestimmten Klasse angehören, die Anzahl der untergeordneten Elemente zu zählen und, wenn diese hoch genug ist, nach der ersten dynamisch eine neue Liste zu erstellen und eine bestimmte Anzahl von Listenelementen an diese zu übertragen die neue Liste.Was die Implementierung der Spalten angeht, könnten Sie sie wahrscheinlich nach links verschieben, gefolgt von einem Element, das den Stil hat clear: left oder clear: both.

.column {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}
<ul class="column">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- ... -->
  <li>Item 49</li>
  <li>Item 50</li>
</ul>
<ul class="column">
  <li>Item 51</li>
  <li>Item 52</li>
  <!-- ... -->
  <li>Item 99</li>
  <li>Item 100</li>
</ul>
<div class="clear">

Ich habe das mit jQuery gemacht – es ist plattformübergreifend und erfordert ein Minimum an Code.

Wählen Sie die UL aus, klonen Sie sie und fügen Sie sie nach der vorherigen UL ein.Etwas wie:

$("ul#listname").clone().attr("id","listname2").after()

Dadurch wird eine Kopie Ihrer Liste nach der vorherigen eingefügt.Wenn die ursprüngliche Liste mit float:left formatiert ist, sollten sie nebeneinander angezeigt werden.

Anschließend können Sie die geraden Elemente aus der linken Liste und die ungeraden Elemente aus der rechten Liste löschen.

$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();

Jetzt haben Sie eine zweispaltige Liste von links nach rechts.

Um weitere Spalten zu erstellen, die Sie verwenden möchten .slice(begin,end) und/oder die :nth-child Wähler.Das heißt, für 21 LIs könnten Sie .slice(8,14) Um eine neue UL zu erstellen, die nach Ihrer ursprünglichen UL eingefügt wird, wählen Sie dann die ursprüngliche UL aus und löschen Sie die ausgewählten LIs mit ul :gt(8).

Probieren Sie das Bibeault/Katz-Buch über jQuery aus, es ist eine großartige Ressource.

Hier ist eine Variation davon Thumbkins Beispiel (mit Jquery):

var $cat_list = $('ul#catList'); // UL with all list items.
var $cat_flow = $('div#catFlow'); // Target div.
var $cat_list_clone = $cat_list.clone(); // Clone the list.
$('li:odd', $cat_list).remove(); // Remove odd list items.
$('li:even', $cat_list_clone).remove(); // Remove even list items.
$cat_flow.append($cat_list_clone); // Append the duplicate to the target div.

Danke Thumbkin!

Der folgende JavaScript-Code funktioniert nur in Spidermonkey und Rhino und läuft auf E4X-Knoten – d. h. er ist nur für serverseitiges JavaScript nützlich, könnte aber jemandem einen Ausgangspunkt für die Erstellung einer jQuery-Version geben.(Auf der Serverseite war es für mich sehr nützlich, aber auf dem Client brauchte ich es nicht dringend genug, um es tatsächlich zu erstellen.)

function columns(x,num) {
    num || (num = 2);
    x.normalize();

    var cols, i, j, col, used, left, len, islist;
    used = left = 0;
    cols = <div class={'columns cols'+num}></div>;

    if((left = x.length())==1)
        left = x.children().length();
    else
        islist = true;

    for(i=0; i<num; i++) {
        len = Math.ceil(left/(num-i));
        col = islist ? new XMLList
                     : <{x.name()}></{x.name()}>;

        if(!islist && x['@class'].toString())
            col['@class'] = x['@class'];

        for(j=used; j<len+used; j++)
            islist ? (col += x[j].copy()) 
                   : (col.appendChild(x.child(j).copy()));

        used += len;
        left -= len;
        cols.appendChild(<div class={'column'+(i==(num-1) ? 'collast' : '')}>{col}</div>);
    }
    return cols;
}

Du nennst es so columns(listNode,2) für zwei Spalten, und es ergibt sich:

<ul class="foo">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

hinein:

<div class="columns cols2">
  <div class="column">
    <ul class="foo">
      <li>a</li>
      <li>b</li>
    </ul>
  </div>
  <div class="column collast">
    <ul class="foo">
      <li>c</li>
    </ul>
  </div>
</div>

Es soll mit CSS wie folgt verwendet werden:

div.columns {
    overflow: hidden;
    _zoom: 1;
}

div.columns div.column {
    float: left;
}

div.cols2 div.column {
    width: 47.2%;
    padding: 0 5% 0 0;
}

div.cols3 div.column {
    width: 29.8%;
    padding: 0 5% 0 0;
}

div.cols4 div.column {
    width: 21.1%;
    padding: 0 5% 0 0;
}

div.cols5 div.column {
    width: 15.9%;
    padding: 0 5% 0 0;
}

div.columns div.collast {
    padding: 0;
}

Was die meisten Leute vergessen, ist das beim Schweben <li/> Bei den Elementen müssen alle Elemente die gleiche Höhe haben, sonst geraten die Säulen aus dem Gleichgewicht.

Da Sie eine serverseitige Sprache verwenden, würde ich empfehlen, CF zu verwenden, um die Liste in drei Arrays aufzuteilen.Dann können Sie eine äußere verwenden ul um die 3 inneren einzuwickeln ul etwa so:

<cfset thelist = "1,2,3,4,5,6,7,8,9,10,11,12,13">  
<cfset container = []>  
<cfset container[1] = []>  
<cfset container[2] = []>  
<cfset container[3] = []>  

<cfloop list="#thelist#" index="i">  
    <cfif i mod 3 eq 0>  
        <cfset arrayappend(container[3], i)>  
    <cfelseif i mod 2 eq 0>  
        <cfset arrayappend(container[2], i)>  
    <cfelse>  
        <cfset arrayappend(container[1], i)>  
    </cfif>  
</cfloop>  

<style type="text/css"> 
    ul li { float: left; }  
    ul li ul li { clear: left; }  
</style>  

<cfoutput>  
<ul>  
    <cfloop from="1" to="3" index="a">  
    <li>  
        <ul>  
            <cfloop array="#container[a]#" index="i">  
            <li>#i#</li>  
            </cfloop>  
        </ul>  
    </li>  
    </cfloop>  
</ul>  
</cfoutput>

Mithilfe einer Modulo-Operation können Sie Ihre Liste schnell in mehrere Listen aufteilen, indem Sie eine einfügen </ul><ul> während Ihrer Schleife.

<cfset numberOfColumns = 3 />
<cfset numberOfEntries = 34 />
<ul style="float:left;">
    <cfloop from="1" to="#numberOfEntries#" index="i">
        <li>#i#</li>
            <cfif NOT i MOD ceiling(numberOfEntries / numberOfColumns)>
                </ul>
                <ul style="float:left;">
            </cfif>
    </cfloop>
</ul>

Verwenden ceiling() anstatt round() um sicherzustellen, dass am Ende der Liste keine zusätzlichen Werte stehen und die letzte Spalte die kürzeste ist.

Um die Liste in mehrere gruppierte Tags auszugeben, können Sie auf diese Weise eine Schleife durchführen.

<cfset list="1,2,3,4,5,6,7,8,9,10,11,12,13,14">
<cfset numberOfColumns = "3">

<cfoutput>
<cfloop from="1" to="#numberOfColumns#" index="col">
  <ul>
  <cfloop from="#col#" to="#listLen(list)#" index="i" step="#numberOfColumns#">
    <li>#listGetAt(list,i)#</li>
  </cfloop>
  </ul>
</cfloop>
</cfoutput>

Hier ist eine weitere Lösung, die Spaltenlisten im folgenden Stil ermöglicht:

1.      4.      7.       10.
2.      5.      8.       11.
3.      6.      9.       12.

(aber es ist reines Javascript und erfordert jQuery, ohne Fallback)

Das Folgende enthält einen Code, der den Array-Prototyp ändert, um eine neue Funktion namens „chunk“ zu erhalten, die jedes gegebene Array in Stücke einer gegebenen Größe aufteilt.Als nächstes kommt eine Funktion namens „buildColumns“, die eine UL-Selektorzeichenfolge und eine Zahl benötigt, um anzugeben, wie viele Zeilen Ihre Spalten enthalten dürfen.(Hier ist eine funktionierende JSFiddle)

$(document).ready(function(){
    Array.prototype.chunk = function(chunk_size){
        var array = this,
            new_array = [],
            chunk_size = chunk_size,
            i,
            length;

        for(i = 0, length = array.length; i < length; i += chunk_size){
            new_array.push(array.slice(i, i + chunk_size));
        }
        return new_array;
    }

    function buildColumns(list, row_limit) {
        var list_items = $(list).find('li').map(function(){return this;}).get(),
        row_limit = row_limit,
        columnized_list_items = list_items.chunk(row_limit);

        $(columnized_list_items).each(function(i){
            if (i != 0){
                var item_width = $(this).outerWidth(),
                    item_height = $(this).outerHeight(),
                    top_margin = -((item_height * row_limit) + (parseInt($(this).css('margin-top')) * row_limit)),
                    left_margin = (item_width * i) + (parseInt($(this).css('margin-left')) * (i + 1));

                $(this[0]).css('margin-top', top_margin);
                $(this).css('margin-left', left_margin);
            }
        });
    }

    buildColumns('ul#some_list', 5);
});

Mit Flexbox können Elemente sowohl in Zeilen- als auch in Spaltenrichtung umbrochen werden.

Die Hauptidee besteht darin, das festzulegen flex-direction auf dem Behälter entweder row oder column.

Hinweis:Heutzutage Browserunterstützung ist ziemlich gut.

GEIGE

(Beispiel-Markup entnommen aus dieser alte Artikel zum Thema „Auflisten“.) 

ol {
  display: flex;
  flex-flow: column wrap; /* flex-direction: column */
  height: 100px; /* need to specify height :-( */
}
ol ~ ol {
  flex-flow: row wrap; /* flex-direction: row */
  max-height: auto; /* override max-height of the column direction */
}
li {
  width: 150px;
}
a {
  display: inline-block;
  padding-right: 35px;
}
<p>items in column direction</p>
<ol>
  <li><a href="#">Aloe</a>
  </li>
  <li><a href="#">Bergamot</a>
  </li>
  <li><a href="#">Calendula</a>
  </li>
  <li><a href="#">Damiana</a>
  </li>
  <li><a href="#">Elderflower</a>
  </li>
  <li><a href="#">Feverfew</a>
  </li>
  <li><a href="#">Ginger</a>
  </li>
  <li><a href="#">Hops</a>
  </li>
  <li><a href="#">Iris</a>
  </li>
  <li><a href="#">Juniper</a>
  </li>
  <li><a href="#">Kava kava</a>
  </li>
  <li><a href="#">Lavender</a>
  </li>
  <li><a href="#">Marjoram</a>
  </li>
  <li><a href="#">Nutmeg</a>
  </li>
  <li><a href="#">Oregano</a>
  </li>
  <li><a href="#">Pennyroyal</a>
  </li>
</ol>
<hr/>
<p>items in row direction</p>
<ol>
  <li><a href="#">Aloe</a>
  </li>
  <li><a href="#">Bergamot</a>
  </li>
  <li><a href="#">Calendula</a>
  </li>
  <li><a href="#">Damiana</a>
  </li>
  <li><a href="#">Elderflower</a>
  </li>
  <li><a href="#">Feverfew</a>
  </li>
  <li><a href="#">Ginger</a>
  </li>
  <li><a href="#">Hops</a>
  </li>
  <li><a href="#">Iris</a>
  </li>
  <li><a href="#">Juniper</a>
  </li>
  <li><a href="#">Kava kava</a>
  </li>
  <li><a href="#">Lavender</a>
  </li>
  <li><a href="#">Marjoram</a>
  </li>
  <li><a href="#">Nutmeg</a>
  </li>
  <li><a href="#">Oregano</a>
  </li>
  <li><a href="#">Pennyroyal</a>
  </li>
</ol>

Da ich das gleiche Problem hatte und nichts „Sauberes“ finden konnte, dachte ich, ich hätte meine Lösung gepostet.In diesem Beispiel verwende ich ein umgekehrtes while Schleife, damit ich sie verwenden kann splice anstatt slice.Der Vorteil besteht nun darin, dass splice() nur einen Index und einen Bereich benötigt, während Slice() einen Index und die Summe benötigt.Letzteres wird beim Loopen tendenziell schwierig.

Der Nachteil besteht darin, dass ich beim Anhängen den Stapel umkehren muss.

Beispiel:

Spalten = 4;liCount = 35

for-Schleife mit Slice = [0, 9];[9, 18];[18, 27];[27, 35]

umgekehrt while with splice = [27, 8];[18, 9];[9, 9];[0, 9]

Code:

// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("<ul />").addClass(list.prop("class")),
        newItems,
        avg = Math.floor(liCount / cols),
        rest = liCount % cols,
        take,
        stack = [];

    while (cols--) {
        take = rest > cols ? (avg + 1) : avg;
        liCount -= take;

        newItems = children.splice(liCount, take);
        stack.push(newUl.clone().append(newItems));
    }

    target.append(stack.reverse());
    list.remove();
}

Sie können dies versuchen, um es in Spalten umzuwandeln.

CSS:

ul.col {
    width:50%;
    float:left;
}

div.clr {
    clear:both;
}

HTML-Teil:

<ul class="col">
    <li>Number 1</li>
    <li>Number 2</li>

    <li>Number 19</li>
    <li>Number 20</li>
</ul>
<ul class="col">
    <li>Number 21</li>
    <li>Number 22</li>

    <li>Number 39</li>
    <li>Number 40</li>
</ul>

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top