2.76 KB
Newer Older
Kjetil Thuen's avatar
Kjetil Thuen committed
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

This is a jQuery plugin that will place a "target-area" over a given html list,
and present further information (or perform some other action) on whatever list
element is currently under the target.

The target and "further information" area are both divs that should be styled
from your own CSS. Their default ids are "listPeakTargetArea" and
"listPeakRevealArea", but both of these can be overridden.


If you want to build the ListEntryInfo plugin yourself, you need
[npm]( and [Grunt](  Assuming npm is
installed, first install Grunt and dependencies like this:

> npm install grunt-cli -g
> npm install

Then you can build the package like this:

> grunt build

The package will be in the `dist` directory which you can copy to your app.


ListEntryInfo can be included in your project using Bower by mentioning
[The ListEntryInfo git repo](
in your `bower.json` file.

To enrich a html list with the EntryInfo functionallity, call the plugin like
any other jQuery plugin:


The arguments object is a javascript object containing several optional
arguments to modify the behaviour of the plugin. They are:

 * `extendedInfoFunc`: The function to be called when a list entry has focus. The function should accept an DOM id as its argument and either directly manipulate the DOM or call some function that does so. For convenience, a function, `defaultPopulateRevealDivFunc` that populates the revealDiv with a given string and then slides it into view. The default function just puts the given id into the DOM element:
function(id){defaultPopulateRevealDivFunc("<strong>" + id + "</strong>");}                  


 * `selectedClass`: The class to append to the selected list element. For styling. The default value is "listPeekSelected".

 * `targetId`: The DOM id of the target area. The element must be created by the plugin. If and element with the given id already exists, the plugin initialisation will fail silently. The default value is "listPeekTargetArea".

 * `revealDivId`: The DOM id of the div holding the extended info. The element will be created if it does not already exist. If you use your own element you can place it wherever you want. If the plugin needs to create the element, it will create a div right after the target area. The element will be hidden and shown depending on whether a list element is focused or not. The default value is "listPeekRevealArea".

 * `timeout`: How long to wait after scrolling has stopped before calling the callback function. In milliseconds. Default value is 100.

See the file `example.html` for example usage.