Smart Lists is light-weight script that lets you convert “flat” HTML lists of information into categorized, paginated lists. In essence, it’s a presentation layer for improving the readability of related information, without requiring a database or server-side script. It’s extremely browser friendly.

Smart Lists is available as both a Scriptaculous-Prototype and a jQuery extension. This page documents the jQuery version.

Configurable options:

  • Choice for the item hide/show effect (Blind, Fade/Appear, Grow/Shrink, none)
  • Choice for changing page effect (Blind, Fade/Appear, Grow/Shrink, none)
  • Control over speed at which effects occur
  • Number of items per page
  • Option to show/hide the number of items in each category
  • Complete control over CSS classes (to ensure compatibility with any webpage)
  • Downgrades gracefully (i.e. if JS not enabled)

Demo / Example

You can find the demo here.

Setting up your Smart List

Here’s the basic HTML/JS needed to set up your Smart List with jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.smartlists.js"></script>
 
  <script type="text/javascript">
  $(document).ready(function() { $.smartlist(); });
  </script>
 
  <style type="text/css">
  #sl-pagination span { padding-left: 2px; padding-right: 2px; }
  .sl-pagination-selected { border: 1px solid #336699; background-color: #E5F3FE; font-weight: bold; padding: 2px; }
  .sl-pagination-selected a:link, .sl-pagination-selected a:visited { text-decoration: none; color: #0099FF }
  </style>
 
</head>
<body>
 
  <div id="sl-flag-dropdown"></div>
  <div id="sl-pagination"></div>
 
  <div id="sl">
    <div class="item"><span class="flags">Chicken Rat Elephant</span></div>
    <div class="item"><span class="flags">Rat Bird Spam</span></div>
    <div class="item"><span class="flags">Elephant Chicken</span></div>
  </div>
 
</body>
</html>

The three special page elements have these id’s:

  • sl-flag-dropdown – the flag dropdown will be inserted here.
  • sl-pagination – the << 1 2 3 >> pagination will be inserted here.
  • sl – this contains your entire list. Each item has a class of “item”, and each of the item flags have a class of “flags” (though these CSS rules are customizable).

Configuration Options

Smart Lists are initialized with the following JS code:

1
$.smartlist();

The above initializes them with the default options. Here’s how you initialize one with custom options. This lists all options available:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.smartlist({
  baseName:               "sl",
  itemClass:              "item",
  showFlagCount:          false,
  itemFlagClass:          "flags",
  itemFlagSeparator:      ", ",
  itemChangeEffect:       "Blind", // "FadeAppear", "Blind", ""
  itemChangeDuration:     500, // ms for jQuery
  pageChangeEffect:       "FadeAppear", // "FadeAppear", "Blind", ""
  pageChangeDuration:     500, // ms for jQuery
  numItemsPerPage:        10,
  paginationLeft:         "\u00ab",
  paginationRight:        "\u00bb",
  maxPaginationLinks:     20,
  defaultDropdownOptText: "All items"
});

CSS Reference

For convenience, this page lists all the CSS classes / ids used by the Smart List. All classes are customizable via the configuration options, mentioned in the previous page. Notably: the main smart list (default: #sl) can be changed, which acts as a prefix for all the other classes and IDs.

#sl The Smart List
#sl-pagination The pagination element
#sl-flag-dropdown select The flag dropdown
.sl-pagination-selected The current page in the pagination
.sl-page-previous The previous page link
.sl-page-next The next page link
#sl .item A Smart List item
#sl .item .flags One or more flags that categorizes your Smart List item

Download

You can download the code from github. Just click the “download this repository as a Zip file” button. Click here to view the uncompressed source code.