(function($) { // classes used by the plugin // need to be styled via external stylesheet, see first example var CLASSES = { open: "open", closed: "closed", expandable: "expandable", collapsable: "collapsable", lastCollapsable: "lastCollapsable", lastExpandable: "lastExpandable", last: "last", hitarea: "hitarea" }; // styles for hitareas var hitareaCSS = { height: 15, width: 15, marginLeft: "-15px", "float": "left", cursor: "pointer" }; // ie specific styles for hitareas if( $.browser.msie ) $.extend( hitareaCSS, { background: "#fff", filter: "alpha(opacity=0)", display: "inline" }); $.extend($.fn, { swapClass: function(c1, c2) { return this.each(function() { var $this = $(this); if ( $.className.has(this, c1) ) $this.removeClass(c1).addClass(c2); else if ( $.className.has(this, c2) ) $this.removeClass(c2).addClass(c1); }); }, replaceclass: function(c1, c2) { return this.each(function() { var $this = $(this); if ( $.className.has(this, c1) ) $this.removeClass(c1).addClass(c2); }); }, hoverClass: function(className) { className = className || "hover"; return this.hover(function() { $(this).addClass(className); }, function() { $(this).removeClass(className); }); }, Treeview: function(settings) { // currently no defaults necessary, all implicit settings = $.extend({}, settings); // factory for treecontroller function treeController(tree, control) { // factory for click handlers function handler(filter) { return function() { // reuse toggle event handler, applying the elements to toggle // start searching for all hitareas toggler.apply( $("div." + CLASSES.hitarea, tree).filter(function() { // for plain toggle, no filter is provided, otherwise we need to check the parent element return filter ? $(this).parent("." + filter).length : true; }) ); return false; } } // click on first element to collapse tree $(":eq(0)", control).click( handler(CLASSES.collapsable) ); // click on second to expand tree $(":eq(1)", control).click( handler(CLASSES.expandable) ); // click on third to toggle tree $(":eq(2)", control).click( handler() ); } // handle toggle event function toggler() { // this refers to hitareas, we need to find the parent lis first $( this ).parent() // swap classes .swapClass( CLASSES.collapsable, CLASSES.expandable ) .swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable ) // find child lists .find( ">ul" ) // toggle them .toggle( settings.speed, settings.toggle ); if ( settings.unique ) { $( this ).parent() .siblings() .replaceclass( CLASSES.collapsable, CLASSES.expandable ) .replaceclass( CLASSES.lastCollapsable, CLASSES.lastExpandable ) .find( ">ul" ) .hide( settings.speed, settings.toggle ); } } // add treeview class to activate styles this.addClass("treeview"); // mark last tree items $("li:last-child", this).addClass(CLASSES.last); // collapse whole tree, or only those marked as closed, anyway except those marked as open $( (settings.collapsed ? "li" : "li." + CLASSES.closed) + ":not(." + CLASSES.open + ") > ul", this).hide(); /* //var branches = $("li[>ul]", this);// baseline code //$("li:has(ul)", this)// baseline change for new selector syntax */ // find all tree items with child lists //var branches = $("li[>ul]:not([div])", this);//2996jmg base change //$("li:has(ul)", this); from web ba site // var branches = $("li:has(ul)", this);// 2996a variant basically works. needs recursion patch ?? var branches = $("li:has(ul):not(:has(div))", this); if ( settings.navigation ) { var current = this.find("a").filter(function() { return this.href == location.href; }); if ( current.length ) { current.addClass("selected").parents("ul, li").add( current.next() ).show(); } } //$("li[ul]:not([>a])>span", this).click(function(event) { //2996 base $("li:has(ul):not(:has(>a))>span", this).click(function(event) { if ( this == event.target ) { toggler.apply($(this).next()); } }).add( $("a", this) ).hoverClass(); // handle closed ones first //branches.filter("[>ul:hidden]") branches.filter(":has(>ul:hidden)") .addClass(CLASSES.expandable) .swapClass(CLASSES.last, CLASSES.lastExpandable); // handle open ones //branches.not("[>ul:hidden]") branches.not(":has(>ul:hidden)") .addClass(CLASSES.collapsable) .swapClass(CLASSES.last, CLASSES.lastCollapsable); // append hitarea branches.prepend("
") // find hitarea .find("div." + CLASSES.hitarea) // apply styles to hitarea .css(hitareaCSS) // apply click event to hitarea .click( toggler ); // if control option is set, create the treecontroller if ( settings.control ) treeController(this, settings.control); return this; } }); })(jQuery);