[21579] | 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 | } |
---|