1 | /** |
---|
2 | # * Copyright (c) 2008 Pasyuk Sergey (www.codeasily.com) |
---|
3 | # * Licensed under the MIT License: |
---|
4 | # * http://www.opensource.org/licenses/mit-license.php |
---|
5 | # * |
---|
6 | # * Splits a <ul>/<ol>-list into equal-sized columns. |
---|
7 | # * |
---|
8 | # * Requirements: |
---|
9 | # * <ul> |
---|
10 | # * <li>"ul" or "ol" element must be styled with margin</li> |
---|
11 | # * </ul> |
---|
12 | # * |
---|
13 | # * @see http://www.codeasily.com/jquery/multi-column-list-with-jquery |
---|
14 | # */ |
---|
15 | jQuery.fn.makeacolumnlists = function(settings){ |
---|
16 | settings = jQuery.extend({ |
---|
17 | cols: 2, // set number of columns |
---|
18 | colWidth: 0, // set width for each column or leave 0 for auto width |
---|
19 | equalHeight: false, // can be false, 'ul', 'ol', 'li' |
---|
20 | startN: 1 // first number on your ordered list |
---|
21 | }, settings); |
---|
22 | |
---|
23 | if(jQuery('> li', this)) { |
---|
24 | this.each(function(y) { |
---|
25 | var y=jQuery('.li_container').size(), |
---|
26 | height = 0, |
---|
27 | maxHeight = 0, |
---|
28 | t = jQuery(this), |
---|
29 | classN = t.attr('class'), |
---|
30 | listsize = jQuery('> li', this).size(), |
---|
31 | percol = Math.ceil(listsize/settings.cols), |
---|
32 | contW = t.width(), |
---|
33 | bl = ( isNaN(parseInt(t.css('borderLeftWidth'),10)) ? 0 : parseInt(t.css('borderLeftWidth'),10) ), |
---|
34 | br = ( isNaN(parseInt(t.css('borderRightWidth'),10)) ? 0 : parseInt(t.css('borderRightWidth'),10) ), |
---|
35 | pl = parseInt(t.css('paddingLeft'),10), |
---|
36 | pr = parseInt(t.css('paddingRight'),10), |
---|
37 | ml = parseInt(t.css('marginLeft'),10), |
---|
38 | mr = parseInt(t.css('marginRight'),10), |
---|
39 | col_Width = Math.floor((contW - (settings.cols-1)*(bl+br+pl+pr+ml+mr))/settings.cols); |
---|
40 | if (settings.colWidth) { |
---|
41 | col_Width = settings.colWidth; |
---|
42 | } |
---|
43 | var colnum=1, |
---|
44 | percol2=percol; |
---|
45 | jQuery(this).addClass('li_cont1').wrap('<div id="li_container' + (++y) + '" class="li_container"></div>'); |
---|
46 | for (var i=0; i<=listsize; i++) { |
---|
47 | if(i>=percol2) { percol2+=percol; colnum++; } |
---|
48 | var eq = jQuery('> li:eq('+i+')',this); |
---|
49 | eq.addClass('li_col'+ colnum); |
---|
50 | if(jQuery(this).is('ol')){eq.attr('value', ''+(i+settings.startN))+'';} |
---|
51 | } |
---|
52 | jQuery(this).css({cssFloat:'left', width:''+col_Width+'px'}); |
---|
53 | for (colnum=2; colnum<=settings.cols; colnum++) { |
---|
54 | if(jQuery(this).is('ol')) { |
---|
55 | jQuery('li.li_col'+ colnum, this).appendTo('#li_container' + y).wrapAll('<ol class="li_cont'+colnum +' ' + classN + '" style="float:left; width: '+col_Width+'px;"></ol>'); |
---|
56 | } else { |
---|
57 | jQuery('li.li_col'+ colnum, this).appendTo('#li_container' + y).wrapAll('<ul class="li_cont'+colnum +' ' + classN + '" style="float:left; width: '+col_Width+'px;"></ul>'); |
---|
58 | } |
---|
59 | } |
---|
60 | if (settings.equalHeight=='li') { |
---|
61 | for (colnum=1; colnum<=settings.cols; colnum++) { |
---|
62 | jQuery('#li_container'+ y +' li').each(function() { |
---|
63 | var e = jQuery(this); |
---|
64 | var border_top = ( isNaN(parseInt(e.css('borderTopWidth'),10)) ? 0 : parseInt(e.css('borderTopWidth'),10) ); |
---|
65 | var border_bottom = ( isNaN(parseInt(e.css('borderBottomWidth'),10)) ? 0 : parseInt(e.css('borderBottomWidth'),10) ); |
---|
66 | height = e.height() + parseInt(e.css('paddingTop'), 10) + parseInt(e.css('paddingBottom'), 10) + border_top + border_bottom; |
---|
67 | maxHeight = (height > maxHeight) ? height : maxHeight; |
---|
68 | }); |
---|
69 | } |
---|
70 | for (colnum=1; colnum<=settings.cols; colnum++) { |
---|
71 | var eh = jQuery('#li_container'+ y +' li'); |
---|
72 | var border_top = ( isNaN(parseInt(eh.css('borderTopWidth'),10)) ? 0 : parseInt(eh.css('borderTopWidth'),10) ); |
---|
73 | var border_bottom = ( isNaN(parseInt(eh.css('borderBottomWidth'),10)) ? 0 : parseInt(eh.css('borderBottomWidth'),10) ); |
---|
74 | mh = maxHeight - (parseInt(eh.css('paddingTop'), 10) + parseInt(eh.css('paddingBottom'), 10) + border_top + border_bottom ); |
---|
75 | eh.height(mh); |
---|
76 | } |
---|
77 | } else |
---|
78 | if (settings.equalHeight=='ul' || settings.equalHeight=='ol') { |
---|
79 | for (colnum=1; colnum<=settings.cols; colnum++) { |
---|
80 | jQuery('#li_container'+ y +' .li_cont'+colnum).each(function() { |
---|
81 | var e = jQuery(this); |
---|
82 | var border_top = ( isNaN(parseInt(e.css('borderTopWidth'),10)) ? 0 : parseInt(e.css('borderTopWidth'),10) ); |
---|
83 | var border_bottom = ( isNaN(parseInt(e.css('borderBottomWidth'),10)) ? 0 : parseInt(e.css('borderBottomWidth'),10) ); |
---|
84 | height = e.height() + parseInt(e.css('paddingTop'), 10) + parseInt(e.css('paddingBottom'), 10) + border_top + border_bottom; |
---|
85 | maxHeight = (height > maxHeight) ? height : maxHeight; |
---|
86 | }); |
---|
87 | } |
---|
88 | for (colnum=1; colnum<=settings.cols; colnum++) { |
---|
89 | var eh = jQuery('#li_container'+ y +' .li_cont'+colnum); |
---|
90 | var border_top = ( isNaN(parseInt(eh.css('borderTopWidth'),10)) ? 0 : parseInt(eh.css('borderTopWidth'),10) ); |
---|
91 | var border_bottom = ( isNaN(parseInt(eh.css('borderBottomWidth'),10)) ? 0 : parseInt(eh.css('borderBottomWidth'),10) ); |
---|
92 | mh = maxHeight - (parseInt(eh.css('paddingTop'), 10) + parseInt(eh.css('paddingBottom'), 10) + border_top + border_bottom ); |
---|
93 | eh.height(mh); |
---|
94 | } |
---|
95 | } |
---|
96 | jQuery('#li_container' + y).append('<div style="clear:both; overflow:hidden; height:0px;"></div>'); |
---|
97 | }); |
---|
98 | } |
---|
99 | } |
---|
100 | |
---|
101 | jQuery.fn.uncolumnlists = function(){ |
---|
102 | jQuery('.li_cont1').each(function(i) { |
---|
103 | var onecolSize = jQuery('#li_container' + (++i) + ' .li_cont1 > li').size(); |
---|
104 | if(jQuery('#li_container' + i + ' .li_cont1').is('ul')) { |
---|
105 | jQuery('#li_container' + i + ' > ul > li').appendTo('#li_container' + i + ' ul:first'); |
---|
106 | for (var j=1; j<=onecolSize; j++) { |
---|
107 | jQuery('#li_container' + i + ' ul:first li').removeAttr('class').removeAttr('style'); |
---|
108 | } |
---|
109 | jQuery('#li_container' + i + ' ul:first').removeAttr('style').removeClass('li_cont1').insertBefore('#li_container' + i); |
---|
110 | } else { |
---|
111 | jQuery('#li_container' + i + ' > ol > li').appendTo('#li_container' + i + ' ol:first'); |
---|
112 | for (var j=1; j<=onecolSize; j++) { |
---|
113 | jQuery('#li_container' + i + ' ol:first li').removeAttr('class').removeAttr('style'); |
---|
114 | } |
---|
115 | jQuery('#li_container' + i + ' ol:first').removeAttr('style').removeClass('li_cont1').insertBefore('#li_container' + i); |
---|
116 | } |
---|
117 | jQuery('#li_container' + i).remove(); |
---|
118 | }); |
---|
119 | } |
---|