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
Summary of an article about cars. Example link to read more
Summary of an article about chicken farming. Example link to read more
Summary of an article about France. Example link to read more
Summary of an article about DIY and chicken farming. Example link to read more
Summary of an article about DIY and cars. Example link to read more
Summary of an article about cars chicken farming and DIY. Example link to read more
Summary of an article about France and Chicken Farming. Example link to read more
Summary of an article about France DIY and Cars. Example link to read more
Summary of an article about DIY and chicken farming. Example link to read more
Summary of an article about DIY and cars. Example link to read more
Summary of an article about cars chicken farming and DIY. Example link to read more
Summary of an article about France and Chicken Farming. Example link to read more
Summary of an article about France DIY and Cars. Example link to read more
To apply the plug-in to a list (ul or ol) add the line
$('ul.portfolio').listSplitter();
The plugin takes 7 optional parameters in JSON form, eg
$('#demo').listSplitter({
ignoreList:['lowPriority'],
excludeList: ['expired'],
titleList: {Chicken: 'Chicken Farming'}
});
| 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 | (array) -
| 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 |
|
| sort | String | Applies sorting to the tabs | '' |
|
| initialView | String | The class name of the category to show show on page load | '' - displays all list items |