Tree Test

最新推荐文章于 2022-01-28 16:32:45 发布

teemai

最新推荐文章于 2022-01-28 16:32:45 发布

阅读量1.3k

点赞数

分类专栏：前端开发专题文章标签： tree class menu url javascript function

本文链接：https://blog.csdn.net/withiter/article/details/7321974

版权

前端开发专题专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="/WEB-INF/tag/c.tld"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS TreeMenu</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<style type="text/css" media="all">

h1,h2,h3,h4,h5,h6 {
	margin: 0;
	padding: 0;
}
ul,li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.TreeWrap {
	width: 200px;
}
.hid{
	display: none;
}

.textStyle{
	margin-left: 10px;
	padding-left: 40px;
	color: #003;
	font-size: 12px;
	display: block;
}


.folderOpened{
	background: url(tempImage/ico_folder_open.gif) no-repeat 0 40%;
}
.folderOpenedFirst{
	background: url(tempImage/ico_folder_open_fst.gif) no-repeat 0 40%;
}
.folderOpenedLast{
	background: url(tempImage/ico_folder_open_lst.gif) no-repeat 0 40%;
}

.liLefPadding{
	padding-left: 65px;
	line-height: 150%;
}

.folderClosed{
	background: url(tempImage/ico_folder.gif) no-repeat 0 40%;
}
.folderClosedFirst{
	background: url(tempImage/ico_folder_fst.gif) no-repeat 0 40%;
}
.exitIcon{
	line-height: 250%;
	background: url(tempImage/icon_exit.gif) no-repeat 0 0;
}


.textUl{
	background: url(tempImage/line_y.gif) repeat-y 16px 0;
}
.textUlLi{
	background: url(tempImage/t.gif) no-repeat 28px 50%;
}
.textUlLiLast{
	background: url(tempImage/t_lst.gif) no-repeat 28px 50%;
}

</style>
</head>
<body>

<div class="TreeWrap">
	<div id="Menu_0">
		<div>
			<h3><a class="textStyle folderOpenedFirst" id="menu0" href="javascript:showMenu(0,'menu0');">Default</a></h3>
		</div>
		<div id="menu0Children">
			<ul class="textUl">
				<li class="liLefPadding textUlLi"><a class="" href="#">Beijing</a></li>
				<li class="liLefPadding textUlLiLast"><a class="" href="#">Shanghai</a></li>
			</ul>
		</div>
	</div>
	<!--MenuBox-->
	
	<div id="Menu_1">
		<div>
			<h3><a class="textStyle folderClosed" id="menu1" href="javascript:showMenu(1,'menu1');">Bank</a></h3>
		</div>
		<div id="menu1Children" class="hid">
			<ul class="textUl">
				<li class="liLefPadding textUlLi"><a href="#">Beijing</a></li>
				<li class="liLefPadding textUlLiLast"><a class="textLast" href="#">Shanghai</a></li>
			</ul>
		</div>
		<div>
			<h3><a class="textStyle exitIcon">Bank</a></h3>
		</div>	
	</div>
	<!--MenuBox-->
	
	<div>
		father:<input title="" id="selectNode" type="text" disabled="disabled"/><br>
		child:<input id="insertNode" type="text" /><br>
		<input type="button" value="add" οnclick="addNode();"/>
	</div>
</div>
</body>
</html>

<script type="text/javascript">
	function ExChgClsName(Obj, NameA, NameB) {
		var Obj = document.getElementById(Obj) ? document.getElementById(Obj)
				: Obj;
		Obj.className = Obj.className == NameA ? NameB : NameA;
	}
	function showMenu(iNo,obj) {
		var nodeText = $('#'+obj).text();
		var nodeId = $('#'+obj).attr('id');
		var menuChildrenId =  obj+"Children";

		alert(menuChildrenId);
		
		$('#selectNode').val(nodeText);
		$('#selectNode').attr('title',nodeId);
		if($('#'+obj).attr('class').indexOf('folderOpenedFirst')!=-1){
			$('#'+obj).removeClass('folderOpenedFirst').addClass('folderClosedFirst');
			$('#'+menuChildrenId).addClass('hid');
		}else if($('#'+obj).attr('class').indexOf('folderClosedFirst')!=-1){
			$('#'+obj).removeClass('folderClosedFirst').addClass('folderOpenedFirst');
			$('#'+menuChildrenId).removeClass('hid');
		}
		if($('#'+obj).attr('class').indexOf('folderClosed')!=-1){
			$('#'+obj).removeClass('folderClosed').addClass('folderOpened');
			$('#'+menuChildrenId).removeClass('hid');
		}

		
		//ExChgClsName("Menu_" + iNo, "MenuBox", "MenuBox2");
	}
	function addNode(){
		var fatherNodeId = $('#selectNode').attr('title');
		
		var nodeText = $('#insertNode').val();
		alert(nodeText);

	}
</script>