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

  • echifitness

    echifitness

    9 Kasım 2008
  • jbignacio

    jbignacio

    13 Mart 2006
  • Wronchi Animation

    Wronchi Anim

    9 Mayıs 2011