SPLI(S)T – A jQuery Plugin

There really is no good flexible way to create columns from a ordered or unordered (X)HTML list. Having run into this problem on more then one occasion, I decided to create this jQuery function that I call SPLI(S)T—a fusion of slit and list, though simply pronounced splist.

This lightweight function quickly and effortlessly will target any list(s) (order, unordered or a mixture of both) that you target with a class and split it into the desired number of pieces. If you add a new list item, no need to fret, it will automatically stick that list item into the appropriate column.

DEMO
Have a look to see what it is all about: Splist demo

DOWNLOAD
Down load the files and get started: Splist.zip

HOW TO USE IT
1.Link your (X)HTML file to the most recent version of jQuery
2.Link your (X)HTML file to this script
3.Adjust the first five variables of the Splist script to your specifications

-numCols: This sets the number of lists you want to break your list into.

-cWidth: Here you can set the width of the columns. The script will automatically determine the width of each column if you leave it blank (”).

-f: This will determine if the list float (line up). If you want them to float, set this to true (note, NO quotation marks!).

-wrapper: This defines the class of the element that holds your list. This will automatically get assigned the proper height to hold the new list (based on the size of the content).

-c: This is the class of the list(s) that you want split into multiple lists.

4.You are good to go. Sit back and enjoy.

TERMS OF USE
You can use this script as described by Creative Commons Attribution-NonCommercial-ShareAlike License. Basically you are welcome to use this script and/or modify it for FREE as long as you are not selling it and provided that you are willing to then share any modifications that you make with others as well. If you do use it, I would love to know how/where. Similarly if you have any questions or concerns regarding the script, please feel free to contact me. Enjoy :-)

Tags: JavaScript, JQuery, jQuery Plug-in, splist, Tricks of the Trade, Web Dev, Web Development

This entry was posted on Tuesday, February 15th, 2011 at 9:41 am and is filed under JQuery, Tutorials, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.