Ένα πρόβλημα που αντιμετωπίζουν συχνά οι developers είναι το πως θα κατασκευάσουν μία λίστα με πολλαπλές στήλες. Πολλές φορές καταφεύγουμε σε ενδιάμεσες λύσεις συνήθως μέσα από τη γλώσσα προγραμματισμού που χρησιμοποιεί ο καθένα και θέτοντας oρόσημα στον κώδικα μας όπου λέμε ότι μετά την εγγραφή Χ εν παραδείγματι δημιούργησε ένα καινούριο div ή ένα td κλπ.
Στη διεύθυνση http://codeasily.com/jquery/multi-column-list-with-jquery μπορείτε να κατεβάσετε κώδικα jquery που κάνει αυτή τη δουλειά.
Η χρήση είναι απλή. Αφού συμπεριλάβετε τον κώδικα στο header της σελίδας σας, μπορείτε να ορίσετε τις ιδιότητες της λίστας σας ως ακολούθως:
$(document).ready(function(){
$('.list_class').makeacolumnlists({cols:2,colWidth:150,equalHeight:false,startN:1})
});
Στο συγκεκριμένο παράδειγμα η λίστα σας με κλάση "list_class" θα σπάσει σε 2 στήλες από 150 pixels η καθεμία.
Browser-Compatibility: Firefox 1.5+, IE6+, Safari 2, Opera 9+
Προβλήματα που βρέθηκαν:
Όταν κάνουμε χρήση jquery 1.4.3 ή πιο πρόσφατη τότε σε IE 6 και 7 δεν εμφανίζει τις δύο πρώτες στήλες τη μία δίπλα στην άλλη αλλά τη μία κάτω από την άλλη. Για να διορθωθεί αυτό βρείτε μέσα στον plugin τη γραμμή:
jQuery(this).css({cssFloat:'left', width:''+col_Width+'px'});
και αντικαταστήστε το cssFloat με απλό float.