Hello,

            I have some issues while building jstree with salesforce. i have attached following files in the the static resource.

<apex:stylesheet value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/themes/default/style.css')}"/>
     <apex:stylesheet value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/themes/apple/style.css')}"/>  
     <apex:stylesheet value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/themes/classic/style.css')}"/>  
     <apex:stylesheet value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/themes/default-rtl/style.css')}"/>       
     
    
     <apex:includeScript value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/jquery.cookie.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/jquery.hotkeys.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/jquery.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.TreeJsAndStyle, 'jquery/jquery.jstree.js')}"/>
     <apex:includeScript value="{!$Resource.treejs}"/>

i have written following code for that but it is not working and giving me javascript error that jstree is not  a function.here is the javascript code given below.

  <!--  jquery for activity tree -->
        var selectedActivityName = '';
    	var $jq  = jQuery.noConflict();
    	
			function createRootActivity() {
				nd = $jq("#demo").jstree('get_selected');
				$jq("#demo").jstree("create",-1,false,"No rename",false,false);
			}
			
			//NOT USED AS OF NOW
			function createActivity(e) {
				$jq("#demo").jstree("create"); 
			}
			
			//NOT USED AS OF NOW
			function renameActivity(e) {
				$jq("#demo").jstree("rename"); 
			}
			
			function setSelectedActivity(selActivityName) {
				selectedActivityName = selActivityName;
			}
			
			var newActivitParentName = '';
			function setNewActivityParentName(parentActName) {
				newActivitParentName = parentActName;
			}
			
			var newActivityName = '';
			function setActivityNewName(newName) {
				//alert('newName:'+newName);
				newActivityName = newName;
			}
		
			$jq(function () {
				$jq("#create_1").click(createRootActivity);
				//$jq("#create_2").click(createActivity);
				//$jq("#rename").click(renameActivity);
				
			});
			
			var activityMoved = '';
			var newActivityPosition = '';
			var newActivityParent = '';
			var keepOriginalActivity = '';
			function changePositionOfActivity(activityName,newPosition,newParentAcitivityName, keepOrigNode) {
				//alert("activityName:"+activityName);
				//alert("newPosition:"+newPosition);
				//alert("newParentAcitivityName:"+newParentAcitivityName);
				//alert("keepOrigNode:"+keepOrigNode);
				
				activityMoved = activityName;
				newActivityPosition = newPosition;
				newActivityParent = newParentAcitivityName;
				keepOriginalActivity = keepOrigNode;
			}
		
			$jq(function () {
			    $jq("#demo")
			    .bind("open_node.jstree create_node.jstree close_node.jstree select_node.jstree move_node.jstree rename_node.jstree cut_node.jstree", function (e, data) {
					if(e.type == 'create_node') {
						movObject = data.args[0];
						setNewActivityParentName($jq("#demo").jstree("get_text",movObject));
					}
				    if(e.type == 'move_node') {
						movObject = data.args[0];
						var keepOrigNode = false;
						if(data.args[3]) {keepOrigNode=true;}
						changePositionOfActivity(movObject.o.text(),movObject.cp,$jq("#demo").jstree("get_text",movObject.np),keepOrigNode);
					}
					if(e.type == 'select_node') {
						setSelectedActivity($jq("#demo").jstree("get_text",data.inst.get_selected()));
					}
					if(e.type == 'rename_node') {
						alert("node renamed");
						movObject = data.args[0];
						setActivityNewName($("#demo").jstree("get_text",movObject));
					}
			    })
			        
			    .jstree({
			        "core" : { "initially_open" : [ "root" ] },
			        
			        "html_data" : {
			            "data" : "<ul><li id='rhtml_1'><a href='#'>Root node 1</a><ul><li id='rhtml_2'><a href='#'>Child node 1</a></li><li id='rhtml_3'><a href='#'>Child node 2</a></li><li id='rhtml_4'><a href='#'>Child node 3</a></li><li id='rhtml_5'><a href='#'>Child node 4</a></li></ul></li><li id='rhtml_6'><a href='#'>Root node 2</a></li><li id='rhtml_7'><a href='#'>Root node 3</a></li></ul>"
		
			    	},
			    	"dnd" : {
				    	"drop_finish" : function () {
			                alert("DROP");
			            },
			            "drag_finish" : function (data) {
			                alert("DRAG OK");
			                alert(data.r);
			            },
			    	},
			    	"ui" : {
			            "select_limit" : 1
			        },
			        "contextmenu" : {
				        	"select_node"		: true,
							"show_at_node"		: false,
							"rename" : {
								"label"				: "Rename",
								// The function to execute upon a click
								"action"			: function (obj) { alert('1');this.rename(obj); },
								// All below are optional 
								"_disabled"			: false,		// clicking the item won't do a thing
								"_class"			: "class",	// class is applied to the item LI node
								"separator_before"	: false,	// Insert a separator before the item
								"separator_after"	: true,		// Insert a separator after the item
								// false or string - if does not contain `/` - used as classname
								"icon"				: true,
								"submenu"			: { 
									/* Collection of objects (the same structure) */
								}
							}
						},
			        "plugins" : [ "themes", "html_data", "dnd", "ui", "crrm","contextmenu" ]
			    });
			});

and page code is given below.

<apex:outputPanel id="outPanel" >
                                            	<div id="demo" class="demo"></div>   
                                            </apex:outputPanel>

if anyone has any idea pleas tell me.