Demo of listSplitter jQuery plugin

Please visit my new campsite listing site ukcampingmap.co.uk

This plugin takes a long list where the items have different categories (possibly overlapping) assigned to them (using the class attribute) and builds a tabbed interface for browsing sublists by category. Styles for the plugin can be built at jQuery themeroller as the plugin uses the same styles as the jQuery.ui.tabs widget. The plugin is compatible with jQuery 1.3.2 and later (and probably earlier too, but untested) and works across all major browsers. Download

If you have any feedback please leave a comment on my blog

Documentation

Documentation

To apply the plug-in to a list (ul or ol) add the line

$('ul.portfolio').listSplitter(); 

Settings

The plugin takes 7 optional parameters in JSON form, eg

 $('#demo').listSplitter({
    ignoreList:['lowPriority'],
    excludeList: ['expired'],
    titleList: {Chicken: 'Chicken Farming'}
});
(array) -
jQuery.listSplitter options
Parameter Type Description Default Values and effects
includeList Array A list of all the classes you want to use as categories, eg ['design', 'frontEndDev']. It will automatically over-ride the ignoreList (i.e. if you tell the plugin which classes to include it will ignore all others anyway) null Any array of strings which are valid html class names
ignoreList Array A list of classes to not use as categories, eg ['extraWide', 'blueBG']. List items with these classes will be displayed, but the classes will not appear as tabs. If unspecified all classes used in the list will be used as categories. [ ] Any array of strings which are valid html class names
excludeList Array A list of classes indicating list items not to display ['expired', 'irrelevant']. These classes will also not appear as tabs null Any array of strings which are valid html class names
titleList Object literal A hash which includes category titles to display instead of class names on the tabs eg {bunnyPhoto: 'Photos of Bunnies'} null Any object literal where each entry is of the form {'className': 'category title'}
includeShowAll Boolean Determines whether to include 'Show all' as one of the tabs true
  • true - there is a 'show all' tab
  • false - there is no 'show all' tab
sort String Applies sorting to the tabs ''
  • 'asc' - ascending alphabetical order
  • 'desc' - descending alphabetical order
  • '' (default) - in the order given by either includeList or in order of appearance in the list
initialView String The class name of the category to show show on page load '' - displays all list items