index.htm | searchcode

/0.1/ccds_library/jquery/plugins/simpletree/index.htm

http://ccds.googlecode.com/
HTML | 333 lines | 288 code | 45 blank | 0 comment | 0 complexity | abde2e9bde15400e86e048ada1b078fe MD5 | raw file
Possible License(s): GPL-2.0, AGPL-1.0, LGPL-2.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>SimpleTree Drag&Drop</title>
<style>
body
{
	font: normal 12px arial, tahoma, helvetica, sans-serif;
	margin:0;
	padding:20px;
}
.simpleTree
{
	overflow:auto;
	margin:0;
	padding:0;
	/*
	width: 250px;
	height:350px;
	overflow:auto;
	border: 1px solid #444444;
	*/
}
.simpleTree li
{
	list-style: none;
	margin:0;
	padding:0 0 0 34px;
	line-height: 14px;
}
.simpleTree li span
{
	display:inline;
	clear: left;
	white-space: nowrap;
}
.simpleTree ul
{
	margin:0; 
	padding:0;
}
.simpleTree .root
{
	margin-left:-16px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/root.gif) no-repeat 16px 0 #ffffff;
}
.simpleTree .line
{
	margin:0 0 0 -16px;
	padding:0;
	line-height: 3px;
	height:3px;
	font-size:3px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/line_bg.gif) 0 0 no-repeat transparent;
}
.simpleTree .line-last
{
	margin:0 0 0 -16px;
	padding:0;
	line-height: 3px;
	height:3px;
	font-size:3px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/spacer.gif) 0 0 no-repeat transparent;
}
.simpleTree .line-over
{
	margin:0 0 0 -16px;
	padding:0;
	line-height: 3px;
	height:3px;
	font-size:3px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/line_bg_over.gif) 0 0 no-repeat transparent;
}
.simpleTree .line-over-last
{
	margin:0 0 0 -16px;
	padding:0;
	line-height: 3px;
	height:3px;
	font-size:3px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/line_bg_over_last.gif) 0 0 no-repeat transparent;
}
.simpleTree .folder-open
{
	margin-left:-16px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/collapsable.gif) 0 -2px no-repeat #fff;
}
.simpleTree .folder-open-last
{
	margin-left:-16px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/collapsable-last.gif) 0 -2px no-repeat #fff;
}
.simpleTree .folder-close
{
	margin-left:-16px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/expandable.gif) 0 -2px no-repeat #fff;
}
.simpleTree .folder-close-last
{
	margin-left:-16px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/expandable-last.gif) 0 -2px no-repeat #fff;
}
.simpleTree .doc
{
	margin-left:-16px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/leaf.gif) 0 -1px no-repeat #fff;
}
.simpleTree .doc-last
{
	margin-left:-16px;
	background: url(/ccds_library/jquery/plugins/simpletree/images/leaf-last.gif) 0 -1px no-repeat #fff;
}
.simpleTree .ajax
{
	background: url(/ccds_library/jquery/plugins/simpletree/images/spinner.gif) no-repeat 0 0 #ffffff;
	height: 16px;
	display:none;
}
.simpleTree .ajax li
{
	display:none;
	margin:0; 
	padding:0;
}
.simpleTree .trigger
{
	display:inline;
	margin-left:-32px;
	width: 28px;
	height: 11px;
	cursor:pointer;
}
.simpleTree .text
{
	cursor: default;
}
.simpleTree .active
{
	cursor: default;
	background-color:#F7BE77;
	padding:0px 2px;
	border: 1px dashed #444;
}
#drag_container
{
	background:#ffffff;
	color:#000;
	font: normal 11px arial, tahoma, helvetica, sans-serif;
	border: 1px dashed #767676;
}
#drag_container ul
{
	list-style: none;
	padding:0;
	margin:0;
}

#drag_container li
{
	list-style: none;
	background-color:#ffffff;
	line-height:18px;
	white-space: nowrap;
	padding:1px 1px 0px 16px;
	margin:0;
}
#drag_container li span
{
	padding:0;
}

#drag_container li.doc, #drag_container li.doc-last
{
	background: url(/ccds_library/jquery/plugins/simpletree/images/leaf.gif) no-repeat -17px 0 #ffffff;
}
#drag_container .folder-close, #drag_container .folder-close-last
{
	background: url(/ccds_library/jquery/plugins/simpletree/images/expandable.gif) no-repeat -17px 0 #ffffff;
}

#drag_container .folder-open, #drag_container .folder-open-last
{
	background: url(/ccds_library/jquery/plugins/simpletree/images/collapsable.gif) no-repeat -17px 0 #ffffff;
}
</style>

   	<script type="text/javascript" src="/ccds_library/jquery/core.js"> </script> 
   	<script type="text/javascript" src="/ccds_library/jquery/ajax.js"> </script> 
   	<script type="text/javascript" src="/ccds_library/jquery/dimensions.js"> </script> 
   	<script type="text/javascript" src="/ccds_library/jquery/event.js"> </script> 
   	<script type="text/javascript" src="/ccds_library/jquery/fx.js"> </script> 
   	<script type="text/javascript" src="/ccds_library/jquery/offset.js"> </script> 
   	<script type="text/javascript" src="/ccds_library/jquery/selector.js"> </script> 
   	<script type="text/javascript" src="/ccds_library/jquery/ui.core.js"> </script> 
   	<script type="text/javascript" src="/ccds_library/jquery/ui.dialog.js"></script> 
   	<script type="text/javascript" src="/ccds_library/jquery/ui.draggable.js"></script> 
   	<script type="text/javascript" src="/ccds_library/jquery/ui.droppable.js"></script> 

<script type="text/javascript" src="jquery.simple.tree.js"></script>

<script type="text/javascript">
var simpleTreeCollection;
$(document).ready(function(){
	simpleTreeCollection = $('.simpleTree').simpleTree({
		autoclose: true,
		afterClick:function(node){
			//alert("text-"+$('span:first',node).text());
		},
		afterDblClick:function(node){
			//alert("text-"+$('span:first',node).text());
		},
		afterMove:function(destination, source, pos){
			//alert("destination-"+$('span:first',destination).text()+" source-"+$('span:first',source).text()+" pos-"+pos);
		},
		afterAjax:function()
		{
			//alert('Loaded');
		},
		animate:true
		//,docToFolderConvert:true
		});
	
});
</script>
</head>

<body>
<p onclick="alert(simpleTreeCollection.get(0).getSelected().find('>span').text())">get Selected Text</p>
	<ul class="simpleTree">
	<li class="root" id='1'><span>Tree Root 1</span>
		<ul>
			
			<li class="open" id='2'><span>Tree Node 1</span>
				<ul>
					
					<li id='3'><span>Tree Node 1-1</span>
						<ul class="ajax">
							<li id='4'>{url:loadTree.php?tree_id=1}</li>
						</ul>
					</li>
					
				</ul>
			</li>
			
			<li id='5'><span>Tree Node 2</span>
				<ul>
					
					<li id='6'><span>Tree Node 2-1</span>
						<ul>
							
							<li id='7'><span>Tree Node 2-1-1</span></li>
							
							<li id='8'><span>Tree Node 2-1-2</span></li>
							
							<li id='9'><span>Tree Node 2-1-3</span></li>
							
							<li id='10'><span>Tree Node 2-1-4</span>
								<ul class="ajax">
									<li id='11'>{url:loadTree.php?tree_id=1}</li>
								</ul>
							</li>
							
						</ul>
					</li>
					
					<li id='12'><span>Tree Node 2-2</span>
						<ul>
							
							<li id='13'><span>Tree Node 2-2-1</span></li>
							
						</ul>
					</li>
					
					
					<li id='14'><span>Tree Node 2-3</span>
						<ul>
							
							<li id='15'><span>Tree Node 2-3-1</span>
									<ul>
										
										<li id='16'><span>Tree Node 2-3-1-1</span></li>
										
										<li id='17'><span>Tree Node 2-3-1-2</span></li>
										
										<li id='18'><span>Tree Node 2-3-1-3</span>
											<ul>
												
												<li id='19'><span>Tree Node 2-3-1-3-1</span></li>
												
											</ul>
										</li>
										
										<li id='20'><span>Tree Node 2-3-1-4</span></li>
										
										<li id='21'><span>Tree Node 2-3-1-5</span></li>
										
										<li id='22'><span>Tree Node 2-3-1-6</span>
											<ul>
												
												<li id='23'><span>Tree Node 2-3-1-6-1</span></li>
												
											</ul>
										</li>
										
										<li id='24'><span>Tree Node 2-3-1-7</span></li>
										
										<li id='25'><span>Tree Node 2-3-1-8</span></li>
										
										<li id='26'><span>Tree Node 2-3-1-9</span>
											<ul>
												
												<li id='27'><span>Tree Node 2-3-1-9-1</span></li>
												
											</ul>
										</li>
										
									</ul>
							</li>
							
						</ul>
					</li>
					
				</ul>
			</li>
			
		</ul>
	</li>
	</ul>

</body>

</html>