tafeltree

最新推荐文章于 2021-06-04 13:59:46 发布

最新推荐文章于 2021-06-04 13:59:46 发布 · 99 阅读

文章标签：

#tafeltree

js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用HTML、JavaScript及一系列库文件如Prototype、Scriptaculous等来创建一个可拖拽的树形菜单。该菜单包含ROOT节点及其子节点CHILD1和CHILD2，并详细配置了节点图标、初始状态等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<html>
	<head>
		<title>测试tree</title>
		<link rel="stylesheet" type="text/css" href="css/tree.css" />
		<script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript" src="js/scriptaculous.js"></script>
		<script type="text/javascript" src="js/Tree.js"></script>
		<script type="text/javascript" src="js/dragdrop.js"></script>
		<script type="text/javascript" src="js/builder.js"></script>
		<script type="text/javascript" src="js/controls.js"></script>
		<script type="text/javascript" src="js/effects.js"></script>
		<script type="text/javascript" src="js/slider.js"></script>
		<script type="text/javascript" src="js/unittest.js"></script>
	</head>

	<body>
		<div id="mytree"></div>
		<script type="text/javascript">
			var mystrut = [{'id':'root', 'txt':'ROOT', 'items':[{
				'id':'child1', 'txt':'CHILD1'}, {'id':'child2', 'txt':'CHILD2'}]}];
			var tree = null;

			function TafelTreeInit() {
					tree = new TafelTree('mytree', mystrut, 
					{
						'generate' : true, //生成的树，是否显示，true显示，false不显示
						'imgBase' : 'imgs/', //需要图形的路径,用tafeltree自带的就可以
						"defaultImg" : "page.gif", //所有节点都默认显示这个图形
						"defaultImgOpen" : "folderopen.gif", //父节点展开时，显示的图形
						"defaultImgClose" : "folder.gif", //父节点关闭时，显示的图行
						"defaultImgSelected" : "page.gif",
						"defaultImgOpenSelected" : "folderopen.gif", //父节点展开时，选中显示的图片
						"defaultImgCloseSelected" : "folder.gif", //父节点关闭时，选中显示的图片
						'width' : '100%', // default value : 100%
						'height' : '150px', // default value : auto
						'openAtLoad' : true, //树的初始状态是打开
						'cookies' : false
					}
				);
			}
		</script>
	</body>
</html>