This takes an unordered list (UL) that has ‘data-‘ attributes and a jqDockAuto class, and automatically runs jqdock on it. A new menu is constructed from the list – one that jqdock can work with – and is displayed. (This is new functionality introduced in v2.0)
- the minimum requirement for jQuery is v1.7 because the jqDock code has been upgraded to use API constructs that only appeared in this version
- support for the $.metadata plugin has been removed
- versioning has changed to Major.Minor.Patch (this is a Major release) in line with jQuery’s upcoming requirements for plugins
- added support for HTML5 data-jqdock-[option name] attributes on the menu element, eg.
<div ... data-jqdock-align='middle' data-jqdock-fade-in='800'> (note conversion of ‘camelbacked’ option names to hyphenated names!)
- added support for data-jqdock-altsrc=’large image path’ attribute on any image, as an alternative to (and higher priority than) using the alt attribute, eg.
<img ... data-jqdock-altsrc='larger-image.png' src='small-image.gif' />
- new option, sizeMax (default 0), which does the same as the size option but for the fully expanded image, ie. sets the minor axis dimension for full expansion
- new option, capSizing (default Off), which changes the ‘at rest’ (size option) and fully expanded (sizeMax option) minor axis dimension calculations from absolute to capped (ie. only applied if the dimension in question is greater than the target value set by the option)
- new option, noAntiFlutter (default Off), allows the anti-flutter (anti-oscillation) code to be disabled/bypassed
- new custom event – dockitem – which is triggered on the original menu element whenever an item leaves or returns to the ‘at rest’ position; the event is passed 2 extra parameters : the related image DOM element, and a boolean (true=expanded, false=at rest)
- while an item is expanded (ie. not ‘at rest’) to whatever degree, the .jqDockItem wrapper element now gets an additional class of ‘jqDockExpand’
- added the ability to ‘convert’ UL & OL lists; $().jqdock() will do it automatically (returning the conversion in the chain in place of the original), or $.jqdock.convert(list element) will return the conversion element; destroying a conversion will revert the list
- added provision for a ‘jqDockAuto’ class on the menu element to automatically run jqDock()
- storage of the Dock’s working variables has been shifted into the menu element’s data() (as data(‘JQDOCK’))
- some tweaks and re-structuring to reduce the compressed footprint
- documentation updated, and a couple of examples added
The only difference between this and an earlier example (Multiple horizontal menus, with selectable loader) is that there is virtually no gap between rows here, and an expanding image overlaps the neighbouring rows.
Wide horizontal menu, using background images, and a slider to move the menu left/right. onReady is set by overriding the defaults, rather than from options.
HTML5 version of preceding example, utilising ‘data-‘ attributes to set options, and calling $( ).jqdock() instead of $( ).jqDock().
Horizontal & vertical menus of links, with a ‘top’ level activating 1 or more of 3 ‘sub-levels’. Out-of-sight menus are positioned outside the viewport.
Horizontal menu of links with ‘top’ alignment. Similar to the preceding ‘jigsaw’ example, but with labels enabled at mid-centre.
Horizontal menu of links with ‘top’ alignment. Uses clear images as the main elements, and the setLabel option to append other images directly to the link.
Horizontal menu of images with ‘top’ alignment, using setLabel to set and permanently show labels, *without* setting the ‘labels’ option!