曾俊达 5 年之前
父节点
当前提交
9f2c2a4d2c
共有 5 个文件被更改,包括 373 次插入0 次删除
  1. 70 0
      WebRoot/SimpleTree.js
  2. 112 0
      WebRoot/demo.html
  3. 25 0
      WebRoot/index.jsp
  4. 15 0
      WebRoot/jquery-1.6.min.js
  5. 151 0
      WebRoot/zhuyem.jsp

+ 70 - 0
WebRoot/SimpleTree.js

@@ -0,0 +1,70 @@
+/*
+Author:张浩华
+Date:2011.11.25 0:12
+Version:SimpleTree 1.0
+*/
+
+$(function(){
+	$.fn.extend({
+		SimpleTree:function(options){
+			
+			//初始化参数
+			var option = $.extend({
+				click:function(a){ }
+			},options);
+			
+			option.tree=this;	/* 在参数对象中添加对当前菜单树的引用,以便在对象中使用该菜单树 */
+			
+			option._init=function(){
+				/*
+				 * 初始化菜单展开状态,以及分叉节点的样式
+				 */				
+				this.tree.find("ul ul").hide();	/* 隐藏所有子级菜单 */
+				this.tree.find("ul ul").prev("li").removeClass("open");	/* 移除所有子级菜单父节点的 open 样式 */
+				
+				this.tree.find("ul ul[show='true']").show();	/* 显示 show 属性为 true 的子级菜单 */
+				this.tree.find("ul ul[show='true']").prev("li").addClass("open");	/* 添加 show 属性为 true 的子级菜单父节点的 open 样式 */
+			}/* option._init() End */
+			
+			/* 设置所有超链接不响应单击事件 */
+			this.find("a").click(function(){ $(this).parent("li").click(); return false; });
+			
+			/* 菜单项 <li> 接受单击 */
+			this.find("li").click(function(){
+				/*
+				 * 当单击菜单项 <li>
+				 * 1.触发用户自定义的单击事件,将该 <li> 标签中的第一个超链接做为参数传递过去
+				 * 2.修改当前菜单项所属的子菜单的显示状态(如果等于 true 将其设置为 false,否则将其设置为 true)
+				 * 3.重新初始化菜单
+				 */
+				
+				option.click($(this).find("a")[0]);	/* 触发单击 */
+				
+				/* 
+				 * 如果当前节点下面包含子菜单,并且其 show 属性的值为 true,则修改其 show 属性为 false
+				 * 否则修改其 show 属性为 true
+				 */
+				if($(this).next("ul").attr("show")=="true"){
+					$(this).next("ul").attr("show","false");					
+				}else{
+					$(this).next("ul").attr("show","true");
+				}
+				
+				/* 初始化菜单 */
+				option._init();
+			});
+			
+			/* 设置所有父节点样式 */
+			this.find("ul").prev("li").addClass("folder");
+			
+			/* 设置节点“是否包含子节点”属性 */
+			this.find("li").find("a").attr("hasChild",false);
+			this.find("ul").prev("li").find("a").attr("hasChild",true);
+			
+			/* 初始化菜单 */
+			option._init();
+			
+		}/* SimpleTree Function End */
+		
+	});
+});

+ 112 - 0
WebRoot/demo.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>SimpleTree</title>
+<link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/>
+<link rel="stylesheet" href="js/tree_themes/style.css" media="screen" type="text/css" />
+<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
+<script type="text/javascript" src="js/SimpleTree.js"></script>
+<script type="text/javascript">
+$(function(){
+	$(".st_tree").SimpleTree({
+		click:function(a){
+			if(!$(a).attr("hasChild"))
+				alert($(a).attr("ref"));
+		}
+	});
+});
+	window.onload = function () {
+		var add = document.getElementById("add");
+		add.onclick = function(){
+				prompt("请添加课程:");
+			}
+		
+		var txt = document.getElementById("txt");
+    txt.onfocus = function(){
+        if (txt.value == "请输入关键字"){
+            txt.value = "";
+            txt.style.color = "#333";
+        }
+    }
+    txt.onblur = function () {
+        if (txt.value == ""){
+            txt.value = "请输入关键字";
+            txt.style.color = "#ccc";
+        }
+    }
+            //获取图片
+            var img = document.getElementsByTagName("img");
+            //鼠标经过图片
+		for(i=0;i<img.length;i++){
+			img[i].index = i;
+			img[1].onmouseover = function () {
+                this.src = "js/tree_themes/imgs/" + 1 + ".gif";
+            }
+ 			img[2].onmouseover = function () {
+                this.src = "js/tree_themes/imgs/" + 2 + ".gif";
+            }
+			img[3].onmouseover = function () {
+                this.src = "js/tree_themes/imgs/" + 3 + ".gif";
+            }
+            //鼠标离开图片
+			if(i!=0 && i!=4){
+				img[i].onmouseout = function () {
+                this.src = "js/tree_themes/imgs/0.png";
+            }
+			img[1].onclick = function(){
+				prompt("请添加课程:");
+			}
+			img[2].onclick = function(){
+                if(confirm("确实要删除吗?")){
+                    alert("已经删除!");
+                }else {
+                    alert("已经取消了删除操作");
+                }
+              }
+			img[3].onclick = function(){
+				prompt("请编辑课程:","理科");
+			}
+			}
+            
+		}
+        }
+</script>
+</head>
+<body>
+<div align="center">
+	<img id="school" src="js/tree_themes/imgs/school.png">
+</div>	
+<div id="box">
+     <input type="text" name="search" value="请输入关键字" id="txt">
+    <div id="add">添加学科</div> 
+	<div id="search">搜索</div>
+</div>	
+<div id="all">	
+<div class="img">
+	<img id="img" src="js/tree_themes/imgs/0.png">
+	<img id="img" src="js/tree_themes/imgs/0.png">
+	<img id="img" src="js/tree_themes/imgs/0.png">
+</div>	
+<div class="st_tree">
+<ul>
+	<li><a href="#" ref="lk">理科</a></li>
+    <ul show="true">
+		<li><a href="#" ref="jsjykx">计算机与科学</a></li>
+		<li><a href="#" ref="rjgc">软件工程</a></li>
+	</ul>
+	<li><a href="#" ref="wk">文科</a></li>
+    <ul>
+		<li><a href="#" ref="swyy">商务英语</a></li>
+		<li><a href="#" ref="hyyx">汉语言学</a></li>
+		<li><a href="#" ref="lsx">历史学</a></li>
+	</ul>
+</ul>
+</div>
+	<div id="photo">
+	<img src="js/tree_themes/imgs/a.jpg" width="300px" height="300px">
+	</div>
+</div>
+
+</body>
+</html>

+ 25 - 0
WebRoot/index.jsp

@@ -0,0 +1,25 @@
+<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
+<%
+String path = request.getContextPath();
+String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
+%>
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+  <head>
+    <base href="<%=basePath%>">
+    
+    <title>My JSP 'index.jsp' starting page</title>
+	<meta http-equiv="pragma" content="no-cache">
+	<meta http-equiv="cache-control" content="no-cache">
+	<meta http-equiv="expires" content="0">    
+	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
+	<meta http-equiv="description" content="This is my page">
+	<!--
+	<link rel="stylesheet" type="text/css" href="styles.css">
+	-->
+  </head>
+  <body>
+   	<h3><a href="DisciplineListServlet">学科课程管理系统</a></h3>
+  </body>
+</html>

文件差异内容过多而无法显示
+ 15 - 0
WebRoot/jquery-1.6.min.js


+ 151 - 0
WebRoot/zhuyem.jsp

@@ -0,0 +1,151 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8"
+    pageEncoding="UTF-8"%>
+<%@ page import="java.util.*" %>
+<%@ page import="com.it.bean.*" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<!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>SimpleTree</title>
+<link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/>
+<link rel="stylesheet" href="js/tree_themes/style.css" media="screen" type="text/css" />
+<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
+<script type="text/javascript" src="js/SimpleTree.js"></script>
+<script type="text/javascript">
+$(function(){
+ $(".st_tree").SimpleTree({
+  click:function(a){
+   if(!$(a).attr("hasChild"))
+    alert($(a).attr("ref"));
+  }
+ });
+});
+ window.onload = function () {
+  var add = document.getElementById("add");
+  add.onclick = function(){
+    prompt("请添加课程:");
+   }
+  
+  var txt = document.getElementById("txt");
+    txt.onfocus = function(){
+        if (txt.value == "请输入关键字"){
+            txt.value = "";
+            txt.style.color = "#333";
+        }
+    }
+    txt.onblur = function () {
+        if (txt.value == ""){
+            txt.value = "请输入关键字";
+            txt.style.color = "#ccc";
+        }
+    }
+           //获取图片
+        var img = document.getElementsByName("img");
+        //鼠标经过图片
+		for(i=0;i<img.length;i++){
+			if(i%3==0){
+				img[i].onmouseover = function () {
+                		this.src = "js/tree_themes/imgs/" + 1 + ".gif";
+            		}
+				
+				img[i].onclick = function(){
+					$($(this).attr("id")+"form").style.display='block';
+				}
+				
+			}else if(i%3==1){
+				img[i].onmouseover = function () {
+                		this.src = "js/tree_themes/imgs/" + 2 + ".gif";
+               	}
+				
+				img[i].onclick = function(){
+					var name = $(this).attr("id");
+                		if(confirm("确实要删除吗?")){
+                		    window.location.href="DeleteServlet?name="+name;
+                		}
+             	}	
+         	}else if(i%3==2){
+				img[i].onmouseover = function () {
+                		this.src = "js/tree_themes/imgs/" + 3 + ".gif";
+               	}
+				
+				img[i].onclick = function(){
+					alert($(this).attr("id"));//获取到了id
+				}
+			}
+         	
+           	img[i].onmouseout = function () {
+          		 this.src = "js/tree_themes/imgs/0.png";
+			}
+	}
+}
+</script>
+</head>
+<body>
+<div align="center">
+ <img id="school" src="js/tree_themes/imgs/school.png">
+</div> 
+
+<div id="box">
+     <input type="text" name="search" value="请输入关键字" id="txt">
+     <div id="add">添加学科</div> 
+ <div id="search">搜索</div>
+</div>
+<div id="all"> 
+<div class="img">
+ <!-- <img id="img" src="js/tree_themes/imgs/0.png">
+ <img id="img" src="js/tree_themes/imgs/0.png">
+ <img id="img" src="js/tree_themes/imgs/0.png"> -->
+</div> 
+<form action="DisciplineAddServlet" >
+	学科名:<input type="text" name="discipline_name">
+	<input type="submit" value="添加学科">
+</form>
+<form action="CourseAddServlet">
+	学科名:<input type="text" name="discipline_name">
+	课程名:<input type="text" name="course_name">
+	<input type="submit" value="添加课程">
+</form>
+<div class="st_tree">
+<% Map<String,List<Course>> courseMap = (Map<String,List<Course>>)request.getAttribute("courseMap"); 
+ Set<String> courseKeySet = courseMap.keySet();
+ List<String> courseKeyList = new ArrayList<String>(courseKeySet);
+ 
+ for(int i = 0;i < courseKeyList.size();i++)
+ {
+  String discipline = courseKeyList.get(i);
+  
+  List<Course> courseList = courseMap.get(discipline);
+  
+  int size = courseList.size();
+%>
+   <ul>
+    <li><a href="#"><%=discipline%></a><img id="<%=discipline%>" name="img" src="js/tree_themes/imgs/0.png">
+	<img id="<%=discipline%>ds" name="img" src="js/tree_themes/imgs/0.png">
+	<img name="img" src="js/tree_themes/imgs/0.png">
+	
+	<form id="<%=discipline%>form" action="" method="post" style="display: none">
+		<input type="text" name="course_name">
+	</form>
+	
+	</li>
+    <ul>
+     <c:forEach items="<%=courseList%>" var="course">
+      <li><a href="#">${course.getCourse_name()}</a><img id="${course.getCourse_name()}x" name="img" src="js/tree_themes/imgs/0.png">
+ 	  <img id="${course.getCourse_name()}cs" name="img" src="js/tree_themes/imgs/0.png">
+ 	  <img name="img" src="js/tree_themes/imgs/0.png"></li>
+     </c:forEach>
+    </ul>
+   </ul>
+  
+<%
+ }
+ %>
+</div>
+ <div id="photo">
+ <img src="js/tree_themes/imgs/a.jpg" width="300px" height="300px">
+ </div>
+</div>
+
+</body>
+</html>

部分文件因为文件数量过多而无法显示