/** * jQuery Column Navigation Plugin * * version 1.1.0 * * Written by Sam Clark * http://sam.clark.name * * * !!! NOTICE !!! * This library and related library requires jQuery 1.2.6 or higher * http://www.jquery.com * * This library requires the ScrollTo plugin for jQuery by Flesler * http://plugins.jquery.com/project/ScrollTo * * The MIT License * * Copyright (c) 2008 Polaris Digital Limited * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. * * * Quick Example * ============================================================================= * * The column navigation plugin is very quick an easy to use. It provides a very * fast way to arrange and interface with large hierarchial sets of data in a * familiar interface, especially for Mac OS X users. * * You require a unordered list currently (more to follow in later versions) with * nested unordered lists. Each nesting will create a new level within the tree. * * HTML Example * ------------ * * * *
* *
* * * * * Javascript Example * ------------------ * * $("div#myTree").columnNavigation(); * * * Options * ------- * This plugin takes a large number of configuration options, all are defaulted for quick access. * You can control the styling properties of almost every attribute of style and animation. * * All configuration items should be declared on initialisation. * * --- * * $("div#myTree").conlumnNavigation({ * containerBackgroundColor : "rgb(255,255,255)", * columnFontFamily : "Arial,sans-serif", * columnScrollVelocity : 400, * callBackFunction : function() { * alert( $(linkObject).attr("href") ); * } * }); * * --- * * The example above sets some attributes on the column navigation object. * * Notice the callBackFunction. You can attach an additional function to act. * The callback function can be called on the dblClick event if you supply one, the * 'a' element is passed as the object to your handler. * **/ (function($){ $.fn.columnNavigation = function( configuration ) { // Check for incoming ul or ol element if( $(this).get(0).tagName != "UL" && $(this).get(0).tagName != "OL" ) { alert( "FATAL ERROR: columnNavigation requires an UL or OL element\nYou supplied a : " + $(this).get(0).tagName ); return false; } // Setup the selectors if( $(this).get(0).tagName == "UL" ) { var selectorName = "ul"; } else if( $(this).get(0).tagName == "OL" ) { var selectorName = "ol"; } // Setup the column navigation object with configuration settings // Overright existing settings where applicable configuration = $.extend({ callBackFunction:null, wrapperClass: "columnnav-wrapper", itemSelectedClass: "columnnav-item-selected", itemLinkSelectedClass: "columnnav-item-link-selected", columnWidth: 160 }, configuration); // Wrap the submitted element in a new div $(this).wrap( document.createElement("div")); $(this).parent().addClass( configuration.wrapperClass ); var wrapper = $(this).parent(); // check callback is a function if set if( configuration.callBackFunction != null && jQuery.isFunction( configuration.callBackFunction ) == false ) { alert( 'FATAL ERROR: columnNavigation.callBackFunction() is not a function!' ); return false; } // Discover the real container position var containerPosition = $(wrapper).find("ul:first").offset(); var containerSize = $(wrapper).width(); // Setup the column width as a string (for CSS) var columnWidth = configuration.columnWidth + "px"; var myself = $(wrapper); $(wrapper).find(selectorName+":first").find("ul").css({ left:columnWidth, top:"0px", position:"absolute" }).hide(); $(wrapper).find(selectorName).css({ position:"absolute", width:columnWidth, height:"100%" }); // Hide and layout children beneath the first level $(wrapper).find(selectorName+":first").find("ul").hide(); // Create the additional required divs $(wrapper).find(selectorName).wrapInner(document.createElement("div")); // Setup the onclick function for each link within the tree $(wrapper).find(selectorName+" a").click( function(event){ // Discover where this element is on the page var licoords = $(this).parent().offset(); // li position // Hide lower levels $(this).parent().siblings().find(selectorName).hide(); // Deselect other levels $(this).parent().siblings().removeClass( configuration.itemSelectedClass ); // Deselect other levels children $(this).parent().siblings().find("li").removeClass( configuration.itemSelectedClass ); // Deselect other a links $(this).parent().siblings().find("a").removeClass( configuration.itemLinkSelectedClass ); // Show child menu $(this).parent().find(selectorName+":first").show(); // Select this level $(this).parent().addClass( configuration.itemSelectedClass ); // Highlight the text if required $(this).addClass( configuration.itemLinkSelectedClass ); // Add scrolling if required if( (licoords.left - containerPosition.left + ( ( configuration.columnWidth * 2 ) - 1 ) > containerSize ) ) { // Calculate differnce var difference = '+=' + (((licoords.left - containerPosition.left + ( ( configuration.columnWidth * 2 ) - 1) ) ) - containerSize ); scrollToLocale( difference ); } if ( configuration.callBackFunction ) { configuration.callBackFunction( event ); } return false; }); // Scrolls the main view function scrollToLocale( difference ) { //myself.scrollTo( difference, configuration.columnScrollVelocity, {axis:'x'} ); } } }) (jQuery);