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

  • Apple

    Apple

    22 HAZİRAN 2005
  • Brandon McCrary

    Brandon McCr

    15 Ocak 2012
  • Evan Coury

    Evan Coury

    29 NİSAN 2007