Tree View Example Static

$('#tree_content').customTree({

	root : 'top',
	init : {
		callback : function (controller, tree) {
			info('Init callback.');
		}
	},

	// for leaf callbacks
	handlers : {
		added : function (leaf, controller, tree) {
		},
		loaded : function (leaf, controller, tree) {
		},
		parsed : function (leaf, controller, tree) {
		},
		open : function (leaf, controller, tree) {
		},
		close : function (leaf, controller, tree) {
		},
		hover : function (leaf, controller, tree) {
		},
		unhover : function (leaf, controller, tree) {
		},
		focus : function (leaf, controller, tree) {
		},
		beforeblur : function (callback, leaf, controller, tree) {
		},
		blur : function (leaf, controller, tree) {
		},
		deleted : function (leaf, controller, tree) {
		},
		dblclick : function (leaf, controller, tree) {
		}
	},

	listeners : {
		// click, dblclick, contextmenu up the element Label
		contextmenu : function (leaf, controller, tree, event) {
		},
		dblclick : function (leaf, controller, tree, event) {
		}
	},

	storeLoaded : false,
	focusParentOnClose : true,
	// focusByDblClick: true,
	// blurFromContainerClick : false,
	// blurFromContainerDblClick : false,

	labelsBreak : {
		by : 50,
		expandOnHover : false,
		expandOnSelect : true
	},

	loader : function (path, callback) {
		... your code for nodes loading
	}

});

{
	// – inside of current branch must be unique name, used as tree object property inside of code,
	'unique_naming_string' : {

		// – optional, that will be user for presentation instead of .name,
		text : 'string',

		// – optional boolean, that indicates leaf is folder or not, "folder" means there are children inside,
		folder : [true || false],

		// – optional boolean, indicates leaf children must be loaded and leaf must be open during rendering
		open : [true || false]
		
		// and all that You need could be used as other leaf properties
		
	}
}

// parameters used while init and loading root branch
init : {
	
	// delay before loading root in miliseconds, or null
	delay : null,
	
	// class name, used for tree container while loading rood branch
	// case not provided, there will be no preloader
	preloader : 'preloader',
	
	// function (controller, tree) used imediately after init
	callback : null,
	
	// method user for expanding rood branch
	method : 'fadeIn',
	
	// make auto init, means tree component will load itself without any other options
	auto : true,
	
	// path of the leaf for initial focus()
	focus : null

},

cls : {

	// tree root class name
	root : 'tree_root',

	// tree controll class name, is there where plus and minuse indicates folder is open or not
	control : 'tree_control',
	
	// status used for indication that leaf is loading, if you need class name there -- use this option
	status : 'tree_leaf_status',
	
	// leaf text is name for symbols of leaf, this is what is written on leaf
	text : 'tree_leaf_text',

	// if you need optional folder class name
	folder : 'folder',
	
	// this will be used when leaf is selected, when .focus() handles
	selected : 'selected',
	
	// when mouse is over leaf text
	hover : 'hover',

	// when leaf is loading, used for 'status'
	loader : 'loader',
	
	// used for indicating open leaf
	open : 'open',

	// tree container class name
	container : 'container',

	// when you don't whant to use tree text selection
	supressLabelTextSelection : 'unselectable',
	supressTreeTextSelection : 'unselectable'

}

html : {

	// tree root container tagName
	tree : '<UL>',
	
	// leaf container tagName
	leaf : '<LI>',
	
	// where children stored inside of leaf
	children : '<UL>',

	// what you will use for leaf text and control elements
	heading : '<DIV>',
	
	// there wher + & - are
	control : '<SPAN>',
	
	// there wher current status and 'loading' caption indicates
	status : '<SPAN>',
	
	// there where leaf.text is
	text : '<SPAN>',

	// whole container for tree container
	container : '<DIV>'

},

control : {
	close : '+',
	open : '–'
},

labelsBreak : {

	// how many symbols to break text string by
	by : 0,
	
	// with what you wish to break 
	str : '\n',
	
	// if you wish whole string is always shown
	expandAlways : false,
	
	// if shown only when hover
	expandOnHover : false,
	
	// if shown only when focused
	expandOnSelect : true
}