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

  • Associated Press

    Associated P

    18 EYLÜL 2006
  • Doug Bernards

    Doug Bernard

    7 Kasım 2007
  • MagmaRhino

    MagmaRhino

    16 Temmuz 2011