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

  • BroadCity

    BroadCity

    10 ŞUBAT 2010
  • Jack Vale Films

    Jack Vale Fi

    8 ŞUBAT 2007
  • Microsoft Help & Training Videos

    Microsoft He

    31 Mart 2009