eZColumns

Basic Example

Sample JavaScript

$("#groups").ezColumns();

Sample HTML

<style>
   #groups {overflow:hidden;} 
   .col{float:left; width:20%; padding:5px; background:#C6F; margin-right:10px;}
</style>

<div id="groups">
   <p>A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>D - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>E - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>F - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>G - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
   <p>H - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
</div>

Results: Notice the first letter of each paragraph. It shows how the columns are organized top-down.

Example with 4 columns and custom column template

JavaScript

$("#groups").ezColumns({columns: 4, colWrapper: '<div class="col" style="background: black; color:white;"></div>'});

Before Plugin

Results after plugin

Example with data option and search ability

JavaScript

$(function(){
   // group parent selector
   $(".list").ezColumns({colWrapper: '<ul class="col"></ul>', target: $(".countries")});
	
   jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())>=0;
   };

   // or use :StartsWith()
   jQuery.expr[':'].StartsWith = function(a,i,m){
      return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())== 0;
   };
	
   $("#search").bind("change keyup", function(){ 
      var filter = jQuery.trim($(this).val());
		
      var LIs = false;
      if(filter){
         LIs = $(".list").data("groups").clone().filter(":Contains(" + filter + ")");
      } else {
         LIs = $(".list").data("groups").clone();
      }
      
      $(".list").ezColumns({groups: LIs, colWrapper: '<ul class="col"></ul>', target: $(".countries")});
      LIs = null;
   });
});

Sample HTML

<form>
   <p><label>Search Countries: <input id="search" type="text"></label></p>
</form>

<div class="countries"></div>
	
<ul class="list">
<li>Afghanistan</li> 
<li>Albania</li> 
<li>Algeria</li> 
<li>American Samoa</li> 
<li>Andorra</li> 
<li>Angola</li> 
<li>Anguilla</li> 
<li>Antarctica</li> 
<li>Antigua and Barbuda</li> 
<li>Argentina</li> 
<li>Armenia</li> 
<li>Aruba</li> 
<li>Australia</li> 
<li>Austria</li> 
<li>Azerbaijan</li> 
<li>Bahamas</li> 
<li>Bahrain</li> 
<li>Bangladesh</li> 
<li>Barbados</li> 
<li>Belarus</li> 
<li>Belgium</li> 
<li>Belize</li> 
<li>Benin</li> 
<li>Bermuda</li> 
<li>Bhutan</li> 
<li>Bolivia</li> 
<li>Bosnia and Herzegovina</li> 
<li>Botswana</li> 
<li>Bouvet Island</li> 
<li>Brazil</li> 
<li>British Indian Ocean Territory</li> 
<li>Brunei Darussalam</li> 
<li>Bulgaria</li> 
<li>Burkina Faso</li> 
<li>Burundi</li> 
<li>Cambodia</li> 
<li>Cameroon</li> 
<li>Canada</li> 
<li>Cape Verde</li> 
<li>Cayman Islands</li> 
<li>Central African Republic</li> 
<li>Chad</li> 
<li>Chile</li> 
<li>China</li> 
<li>Christmas Island</li> 
<li>Cocos (Keeling) Islands</li> 
<li>Colombia</li> 
<li>Comoros</li> 
<li>Congo</li> 
<li>Congo, The Democratic Republic of The</li> 
<li>Cook Islands</li> 
<li>Costa Rica</li> 
<li>Cote D'ivoire</li> 
<li>Croatia</li> 
<li>Cuba</li> 
<li>Cyprus</li> 
<li>Czech Republic</li> 
<li>Denmark</li> 
<li>Djibouti</li> 
<li>Dominica</li> 
<li>Dominican Republic</li> 
<li>Ecuador</li> 
<li>Egypt</li> 
<li>El Salvador</li> 
<li>Equatorial Guinea</li> 
<li>Eritrea</li> 
<li>Estonia</li> 
<li>Ethiopia</li> 
<li>Falkland Islands (Malvinas)</li> 
<li>Faroe Islands</li> 
<li>Fiji</li> 
<li>Finland</li> 
<li>France</li> 
<li>French Guiana</li> 
<li>French Polynesia</li> 
<li>French Southern Territories</li> 
<li>Gabon</li> 
<li>Gambia</li> 
<li>Georgia</li> 
<li>Germany</li> 
<li>Ghana</li> 
<li>Gibraltar</li> 
<li>Greece</li> 
<li>Greenland</li> 
<li>Grenada</li> 
<li>Guadeloupe</li> 
<li>Guam</li> 
<li>Guatemala</li> 
<li>Guinea</li> 
<li>Guinea-bissau</li> 
<li>Guyana</li> 
<li>Haiti</li> 
<li>Heard Island and Mcdonald Islands</li> 
<li>Holy See (Vatican City State)</li> 
<li>Honduras</li> 
<li>Hong Kong</li> 
<li>Hungary</li> 
<li>Iceland</li> 
<li>India</li> 
<li>Indonesia</li> 
<li>Iran, Islamic Republic of</li> 
<li>Iraq</li> 
<li>Ireland</li> 
<li>Israel</li> 
<li>Italy</li> 
<li>Jamaica</li> 
<li>Japan</li> 
<li>Jordan</li> 
<li>Kazakhstan</li> 
<li>Kenya</li> 
<li>Kiribati</li> 
<li>Korea, Democratic People's Republic of</li> 
<li>Korea, Republic of</li> 
<li>Kuwait</li> 
<li>Kyrgyzstan</li> 
<li>Lao People's Democratic Republic</li> 
<li>Latvia</li> 
<li>Lebanon</li> 
<li>Lesotho</li> 
<li>Liberia</li> 
<li>Libyan Arab Jamahiriya</li> 
<li>Liechtenstein</li> 
<li>Lithuania</li> 
<li>Luxembourg</li> 
<li>Macao</li> 
<li>Macedonia, The Former Yugoslav Republic of</li> 
<li>Madagascar</li> 
<li>Malawi</li> 
<li>Malaysia</li> 
<li>Maldives</li> 
<li>Mali</li> 
<li>Malta</li> 
<li>Marshall Islands</li> 
<li>Martinique</li> 
<li>Mauritania</li> 
<li>Mauritius</li> 
<li>Mayotte</li> 
<li>Mexico</li> 
<li>Micronesia, Federated States of</li> 
<li>Moldova, Republic of</li> 
<li>Monaco</li> 
<li>Mongolia</li> 
<li>Montserrat</li> 
<li>Morocco</li> 
<li>Mozambique</li> 
<li>Myanmar</li> 
<li>Namibia</li> 
<li>Nauru</li> 
<li>Nepal</li> 
<li>Netherlands</li> 
<li>Netherlands Antilles</li> 
<li>New Caledonia</li> 
<li>New Zealand</li> 
<li>Nicaragua</li> 
<li>Niger</li> 
<li>Nigeria</li> 
<li>Niue</li> 
<li>Norfolk Island</li> 
<li>Northern Mariana Islands</li> 
<li>Norway</li> 
<li>Oman</li> 
<li>Pakistan</li> 
<li>Palau</li> 
<li>Palestinian Territory, Occupied</li> 
<li>Panama</li> 
<li>Papua New Guinea</li> 
<li>Paraguay</li> 
<li>Peru</li> 
<li>Philippines</li> 
<li>Pitcairn</li> 
<li>Poland</li> 
<li>Portugal</li> 
<li>Puerto Rico</li> 
<li>Qatar</li> 
<li>Reunion</li> 
<li>Romania</li> 
<li>Russian Federation</li> 
<li>Rwanda</li> 
<li>Saint Helena</li> 
<li>Saint Kitts and Nevis</li> 
<li>Saint Lucia</li> 
<li>Saint Pierre and Miquelon</li> 
<li>Saint Vincent and The Grenadines</li> 
<li>Samoa</li> 
<li>San Marino</li> 
<li>Sao Tome and Principe</li> 
<li>Saudi Arabia</li> 
<li>Senegal</li> 
<li>Serbia and Montenegro</li> 
<li>Seychelles</li> 
<li>Sierra Leone</li> 
<li>Singapore</li> 
<li>Slovakia</li> 
<li>Slovenia</li> 
<li>Solomon Islands</li> 
<li>Somalia</li> 
<li>South Africa</li> 
<li>South Georgia and The South Sandwich Islands</li> 
<li>Spain</li> 
<li>Sri Lanka</li> 
<li>Sudan</li> 
<li>Suriname</li> 
<li>Svalbard and Jan Mayen</li> 
<li>Swaziland</li> 
<li>Sweden</li> 
<li>Switzerland</li> 
<li>Syrian Arab Republic</li> 
<li>Taiwan, Province of China</li> 
<li>Tajikistan</li> 
<li>Tanzania, United Republic of</li> 
<li>Thailand</li> 
<li>Timor-leste</li> 
<li>Togo</li> 
<li>Tokelau</li> 
<li>Tonga</li> 
<li>Trinidad and Tobago</li> 
<li>Tunisia</li> 
<li>Turkey</li> 
<li>Turkmenistan</li> 
<li>Turks and Caicos Islands</li> 
<li>Tuvalu</li> 
<li>Uganda</li> 
<li>Ukraine</li> 
<li>United Arab Emirates</li> 
<li>United Kingdom</li> 
<li>United States</li> 
<li>United States Minor Outlying Islands</li> 
<li>Uruguay</li> 
<li>Uzbekistan</li> 
<li>Vanuatu</li> 
<li>Venezuela</li> 
<li>Viet Nam</li> 
<li>Virgin Islands, British</li> 
<li>Virgin Islands, U.S.</li> 
<li>Wallis and Futuna</li> 
<li>Western Sahara</li> 
<li>Yemen</li> 
<li>Zambia</li> 
<li>Zimbabwe</li>
</ul>

Results

• Afghanistan
• Albania
• Algeria
• American Samoa
• Andorra
• Angola
• Anguilla
• Antarctica
• Antigua and Barbuda
• Argentina
• Armenia
• Aruba
• Australia
• Austria
• Azerbaijan
• Bahamas
• Bahrain
• Bangladesh
• Barbados
• Belarus
• Belgium
• Belize
• Benin
• Bermuda
• Bhutan
• Bolivia
• Bosnia and Herzegovina
• Botswana
• Bouvet Island
• Brazil
• British Indian Ocean Territory
• Brunei Darussalam
• Bulgaria
• Burkina Faso
• Burundi
• Cambodia
• Cameroon
• Canada
• Cape Verde
• Cayman Islands
• Central African Republic
• Chad
• Chile
• China
• Christmas Island
• Cocos (Keeling) Islands
• Colombia
• Comoros
• Congo
• Congo, The Democratic Republic of The
• Cook Islands
• Costa Rica
• Cote D'ivoire
• Croatia
• Cuba
• Cyprus
• Czech Republic
• Denmark
• Djibouti
• Dominica
• Dominican Republic
• Ecuador
• Egypt
• El Salvador
• Equatorial Guinea
• Eritrea
• Estonia
• Ethiopia
• Falkland Islands (Malvinas)
• Faroe Islands
• Fiji
• Finland
• France
• French Guiana
• French Polynesia
• French Southern Territories
• Gabon
• Gambia
• Georgia
• Germany
• Ghana
• Gibraltar
• Greece
• Greenland
• Grenada
• Guadeloupe
• Guam
• Guatemala
• Guinea
• Guinea-bissau
• Guyana
• Haiti
• Heard Island and Mcdonald Islands
• Holy See (Vatican City State)
• Honduras
• Hong Kong
• Hungary
• Iceland
• India
• Indonesia
• Iran, Islamic Republic of
• Iraq
• Ireland
• Israel
• Italy
• Jamaica
• Japan
• Jordan
• Kazakhstan
• Kenya
• Kiribati
• Korea, Democratic People's Republic of
• Korea, Republic of
• Kuwait
• Kyrgyzstan
• Lao People's Democratic Republic
• Latvia
• Lebanon
• Lesotho
• Liberia
• Libyan Arab Jamahiriya
• Liechtenstein
• Lithuania
• Luxembourg
• Macao
• Macedonia, The Former Yugoslav Republic of
• Madagascar
• Malawi
• Malaysia
• Maldives
• Mali
• Malta
• Marshall Islands
• Martinique
• Mauritania
• Mauritius
• Mayotte
• Mexico
• Micronesia, Federated States of
• Moldova, Republic of
• Monaco
• Mongolia
• Montserrat
• Morocco
• Mozambique
• Myanmar
• Namibia
• Nauru
• Nepal
• Netherlands
• Netherlands Antilles
• New Caledonia
• New Zealand
• Nicaragua
• Niger
• Nigeria
• Niue
• Norfolk Island
• Northern Mariana Islands
• Norway
• Oman
• Pakistan
• Palau
• Palestinian Territory, Occupied
• Panama
• Papua New Guinea
• Paraguay
• Peru
• Philippines
• Pitcairn
• Poland
• Portugal
• Puerto Rico
• Qatar
• Reunion
• Romania
• Russian Federation
• Rwanda
• Saint Helena
• Saint Kitts and Nevis
• Saint Lucia
• Saint Pierre and Miquelon
• Saint Vincent and The Grenadines
• Samoa
• San Marino
• Sao Tome and Principe
• Saudi Arabia
• Senegal
• Serbia and Montenegro
• Seychelles
• Sierra Leone
• Singapore
• Slovakia
• Slovenia
• Solomon Islands
• Somalia
• South Africa
• South Georgia and The South Sandwich Islands
• Spain
• Sri Lanka
• Sudan
• Suriname
• Svalbard and Jan Mayen
• Swaziland
• Sweden
• Switzerland
• Syrian Arab Republic
• Taiwan, Province of China
• Tajikistan
• Tanzania, United Republic of
• Thailand
• Timor-leste
• Togo
• Tokelau
• Tonga
• Trinidad and Tobago
• Tunisia
• Turkey
• Turkmenistan
• Turks and Caicos Islands
• Tuvalu
• Uganda
• Ukraine
• United Arab Emirates
• United Kingdom
• United States
• United States Minor Outlying Islands
• Uruguay
• Uzbekistan
• Vanuatu
• Venezuela
• Viet Nam
• Virgin Islands, British
• Virgin Islands, U.S.
• Wallis and Futuna
• Western Sahara
• Yemen
• Zambia
• Zimbabwe