In an effort to expand on the treeView basic, it has been requested multiple times to create a pre-collapsed state on certain elements. In this example, a source code style of "tvclosed" will cause that branch to be pre-collapsed.
This plugin uses: Stable /* Built Fri May 12 13:01:23 2006 */
Chris Domigan was kind enough to start a working model:
I needed to have my tree closed by default and to have more control over open/close behaviour, so I've made some changes to the TreeView code for a project I'm doing. You can now specify whether or not a <li> node displays its contents by default by using the classes "open" and "closed". A good idea to rename these to be better namespaced :). […]
This was a starting point for this version, but I found his CSS suggestion, didn't work in IE.
ul.tv .closed>ul { display:none; }
Instead this CSS worked better:
.tvclosed ul,
.tvclosed li.tvclosed ul {
display: none;
}
.tvclosed ul ul {
display: block;
}
Usage: class="tv"
$(document).ready(function(){
$("ul.tv") // Find all unordered lists with class of "tv"
.find("li:last-child").addClass("tvil").end() // Apply class "TVIL aka TreeView Item - Last"
.find("li.tvclosed[ul]").addClass("tvie").swapClass("tvil", "tvile").append("<div class=\"tvca\">").end()
.find("li[ul]").not(".tvclosed").addClass("tvopen").addClass("tvic").swapClass("tvil", "tvilc").append("<div class=\"tvca\">").end()
.find("li.tvclosed>div.tvca").toggle(
function(){ $(this).parent("li").swapClass("tvic", "tvie").swapClass("tvilc", "tvile").find(">ul").slideDown("normal"); },
function(){ $(this).parent("li").swapClass("tvic", "tvie").swapClass("tvilc", "tvile").find(">ul").slideUp("normal"); }
).end()
.find("li.tvopen>div.tvca").toggle(
function(){ $(this).parent("li").swapClass("tvic", "tvie").swapClass("tvilc", "tvile").find(">ul").slideUp("normal"); },
function(){ $(this).parent("li").swapClass("tvic", "tvie").swapClass("tvilc", "tvile").find(">ul").slideDown("normal"); }
);
});
$.fn.swapClass = function(c1,c2) {
return this.each(function() {
if ($.hasWord(this, c1)) {
$(this).removeClass(c1);
$(this).addClass(c2);
} else if ($.hasWord(this, c2)) {
$(this).removeClass(c2);
$(this).addClass(c1);
}
});
/*
Code Highlighting
Courtesy of Dean Edwards star-light
http://dean.edwards.name/my/behaviors/#star-light.htc
- with jQuery methods added, of course
*/
ul.tv, .tv ul {
padding: 0;
margin: 0;
list-style: none;
}
.tv li {
position: relative;
margin: 0;
padding: 4px 0 3px 20px;
z-index: 10;
}
div.tvca { /* Clickable Area */
_background: #fff;
_filter: alpha(opacity=0);
/*
border: 1px solid #fdd;
*/ /* Useful for showing the hit area */
height: 15px;
width: 15px;
position: absolute;
top: 1px;
left: -1px;
_left: -21px; /* IE... damnit! */
cursor: pointer;
z-index: 50;
}
.tv li, .tv .tvi /* Tree View Item */ { background: url(img/treeView/dotted/tvi.gif) 0 0 no-repeat; }
.tv .tvic /* Tree View Item, Collapsable */ { background-image: url(img/treeView/dotted/tvic.gif); }
.tv .tvie /* Tree View Item, Expandable */ { background-image: url(img/treeView/dotted/tvie.gif); }
.tv .tvil /* Tree View Last Item */ { background-image: url(img/treeView/dotted/tvil.gif); }
.tv .tvilc /* Tree View Last Item, Collapsable */ { background-image: url(img/treeView/dotted/tvilc.gif); }
.tv .tvile /* Tree View Last Item, Expandable */ { background-image: url(img/treeView/dotted/tvile.gif); }
.tvload /* Loading Icon */ { background-image: url(img/treeView/dotted/tviload.gif); }
.tvclosed ul,
.tvclosed li.tvclosed ul {
display: none;
}
.tvclosed ul ul {
display: block;
}
Some recursive PHP to randomly load variations.
These examples are here for your own learning. If you find yourself using part or all of them, give credit where appropriate. Enjoy!
Myles Angell August 9th, 2006