Lists

 

Lists in jqDock

As of v2.0, for either an ordered (OL) or unordered (UL) list, jqDock will construct a new Dock using each list item’s first image (or anchor surrounding that image) as a menu item, and it will return the new Dock menu element in the jQuery object, in place of the original list element.

Important : When using Javascript initialisation on a jQuery collection that contains a list, eg. $('ul').jqdock(); the returned collection contains the successfully converted Dock structures in place of their original lists. This is a modification of the jQuery ‘chain’, in that what you put in is not necessarily what you get out! Also note that if a list cannot be converted it remains in the returned collection as the original list, so to find successfully initialised Docks, you should filter the returned collection, eg. $('ul').jqdock().filter('.jqDocked');

The new Dock behaves exactly like any other Dock, and can be even be destroyed, whereupon the original list it was based on is returned to its initial state. Handlers already bound directly to images (or their parent anchors) will be transferred to the new Dock, but handlers already bound to either the list or the list items will not. The new Dock will also get the id (if there is one) of the original list, but not the class(es).

What do you need to do? In the simplest case, nothing. For example, if you had HTML along the lines of…

… then jqDock would do everything automatically for you.

Note: The list will only be converted if it contains at least one convertable item. For each list item, the convertable item is determined to be:
  • an anchor … if the sole child of that anchor is the first image within the list item, or
  • the first image within the list item … if that image does not have an anchor as its parent

There is one subtle difference between list and non-list initialisation : because the conversion of a list is the first thing done by jqDock’s initialisation process, the converter will actually filter out ‘illegal’ menu items, so it is possible to end up with a Dock that contains fewer menu items than there were list items in the original list. This is slightly different to a ‘standard’ non-list initialisation, where the initialisation would simply fail to produce a Dock if it encountered any ‘illegal’ menu items.

Warning : Please be aware that the list content gets modified! The first image (or its anchor parent) in each list item gets moved to the new Dock structure. Also, if the list has an id, it gets transferred across to the element at the top of the new Dock. Note that everything gets replaced if you ‘destroy‘ the Dock.

Conversion Utility

There is also a utility that will pre-convert a list, should you have a need for it. It does not initialise jqDock, it merely builds the new Dock structure from the provided list, in the same way that the initialisation would.

Please note the warning above. Also, you can not ‘destroy‘ the new Dock structure unless/until it has been initialised by jqDock.

Share
 Posted by at 3:31 pm

  2 Responses to “Lists”

Comments (2)
  1. Why need a link?? :O, i dont undertand why tag a is necesary. we want that the html will be free for tags 😀

    • You do not have to have links! The example I gave had links because that tends to be what I use in order to simplify navigation when clicking on images. If your list items simply contain images then that’s fine. In the Note that explains how a convertable item is determined, the second point states that the first image within the list item will be used as long as its immediate parent is not an anchor (a link).

      For example:

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)