Jquery.nestedlist NPM

jquery.nestedlist

Creates a browsable nested list.

Features

Additional features

The up-link (anything with class ".nestedlist-up") can be anywhere on the page
All cards have the same width
Height is dynamic
Shows first list on load
HTML fallback with deactivated javascript possible
At the moment, child lists can not be shared between list items
It is possible to create a horizontal list by disabling the animation and setting a width for <li>

Call "nestedList" on a jQuery object with the topmost <ul> element of the list.

$("ul.demo-list").nestedList()

$(selector).nestedList({
  optionName: optionValue, ...
})

optionName	description	optionValue
onBeforeChange	called before showing a list	function(-1 or 1, nextList, nestedList)
onAfterChange	called after showing a list	function(-1 or 1, nextList, nestedList)
upButton	for retrieving the upButton anywhere in the document by jQuery-selector or jQuery object. The upButton is one container that is moved around and inserted where it is needed.	string, jQuery
upButtonShow	the default is function(upButton, nextList) { nextList.prepend(upButton) }	function(upButton, nextList)
shiftAnimation	options for jQuery.animate()	object
noScriptLinks	true or a selector relative to the nestedlist container to select links that should be replaced with their content text	boolean, string

ul
  li
    content
  li
    content
    ul
      li
      li
      li

See demo/demo.css for an example stylesheet

$.nestedList returns a nestedListsObject

var nestedLists = jQuery(".demo-list").nestedList()

{
  nestedLists: [nestedListObject, ...],
  closeAll: closeAll
}

name	description
closeAll()	closes all open sub-lists of all nestedLists and shows the toplevel/first list

{
  container: container,
  toplevelClass: toplevelClass,
  closeList: closeList
}

name	description
closeList()	close the currently active sub-list and show its parent list

9 years ago