SPLI(S)T – A jQuery Plugin

Splist, a Simple jQuery Function - Blog Promotion

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.

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

Down load the files and get started: Splist.zip

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.

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: , , , , , ,

Leave a Reply

You must be logged in to post a comment. If you do not have an account, contact me and I will be happy to set one up for you :)