SORU
7 ŞUBAT 2013, PERŞEMBE


Nasıl iki sütun sıralanmamış bir listesini görüntülemek için?

Aşağıdaki html ile ne iki sütun olarak görüntülemek için en kolay yöntemdir

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

Görüntülemek istediğiniz:

A B
C D
E

Edit: çözüm IE üzerinde çalışması gereken bir söz Lazım :( Teşekkürler

CEVAP
7 ŞUBAT 2013, PERŞEMBE


Modern Tarayıcılar

kaldıraç css3 sütunlar için aradığı destek için bir modül.

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

http://jsfiddle.net/HP85j/8/

Eski Tarayıcılar

YANİ destek için ne yazık ki JavaScript ve dom manipülasyon içeren bir kod çözümü gerekir. Bu listenin içeriğini değiştirir her zaman sütunlara listesi sıralama ve tıpkı Basım işlemi gerçekleştirmek için ihtiyacınız olacak demektir. Çözüm aşağıda kısaltma için jQuery kullanır.

http://jsfiddle.net/HP85j/19/

HTML:

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

JavaScript:

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length)   (column * idx)){
                column  = 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column   < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column  ;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS:

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}

DÜZENLEME:

Bu aşağıdaki gibi sütunlar sırası aşağıda dikkat çekti

A  E
B  F
C  G
D

OP aşağıdaki eşleştirme: bir değişken için süre istedi

A  B
C  D
E  F
G

Varyant gerçekleştirmek için sadece aşağıdaki kodu değiştirin:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column > columns.length){
            column = 0;
        }
        $(columns.get(column)).append(el);
        column  = 1;
    });
}

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Max Lee

    Max Lee

    18 AĞUSTOS 2006
  • ShoSho

    ShoSho

    20 Ocak 2010
  • TomOdellVEVO

    TomOdellVEVO

    29 Mayıs 2012