http://expert.csdn.net/Expert/topic/2188/2188654.xml?temp=.4591181
解决方案 »
- javascript遍历无限级html标签!!!
- 求一javascript正则表达式
- 如何把JSP中的值传到JS里???
- 怎么设置Chrome浏览器的cookie?
- jQuery $([])是什么意思?
- 妈哟,这是啥子 javascript 代码哟!!!
- -----textarea 的问题----
- 好心人请来看看,帮我。
- 请问<style type="text/css">中的type说明什么??还有<javascript>???还有没有其他的type???
- 求大侠帮忙看看js不能给父页面的select动态添加option的问题
- 如何判断用户输入的数据类型?!(在线等!急。。。。。。。。。。!)
- 如何删除HTML对象?比如:<div>~~
<HTML>
<HEAD>
<TITLE> DSTree </TITLE>
<META NAME="Author" CONTENT="[email protected]" >
<style>
body,td{font:12px verdana}
#treeBox{background-color:#fffffa;}
#treeBox .ec{margin:0 5 0 5;}
#treeBox .hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;}
#treeBox .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}
</style>
<base href="http://www.isyuan.com/star/dstree/" />
<script>
//code by star 20003-4-7
var HC = "color:#990000;border:1px solid #cccccc";
var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000;";
var IO = null;
function initTree(){
var rootn = document.all.menuXML.documentElement;
var sd = 0;
document.onselectstart = function(){return false;}
document.all.treeBox.appendChild(createTree(rootn,sd));
}
function createTree(thisn,sd){
var nodeObj = document.createElement("span");
var upobj = document.createElement("span");
with(upobj){
style.marginLeft = sd*10;
className = thisn.hasChildNodes()?"hasItems":"Items";
innerHTML = "<img src=expand.gif class=ec>" + thisn.getAttribute("text") +"";
onmousedown = function(){
if(event.button != 1) return;
if(this.getAttribute("cn")){
this.setAttribute("open",!this.getAttribute("open"));
this.cn.style.display = this.getAttribute("open")?"inline":"none";
this.all.tags("img")[0].src = this.getAttribute("open")?"expand.gif":"contract.gif";
}
if(IO){
IO.runtimeStyle.cssText = "";
IO.setAttribute("selected",false);
}
IO = this;
this.setAttribute("selected",true);
this.runtimeStyle.cssText = SC;
}
onmouseover = function(){
if(this.getAttribute("selected"))return;
this.runtimeStyle.cssText = HC;
}
onmouseout = function(){
if(this.getAttribute("selected"))return;
this.runtimeStyle.cssText = "";
}
oncontextmenu = contextMenuHandle;
onclick = clickHandle;
} if(thisn.getAttribute("treeId") != null){
upobj.setAttribute("treeId",thisn.getAttribute("treeId"));
}
if(thisn.getAttribute("href") != null){
upobj.setAttribute("href",thisn.getAttribute("href"));
}
if(thisn.getAttribute("target") != null){
upobj.setAttribute("target",thisn.getAttribute("target"));
} nodeObj.appendChild(upobj);
nodeObj.insertAdjacentHTML("beforeEnd","<br>") if(thisn.hasChildNodes()){
var i;
var nodes = thisn.childNodes;
var cn = document.createElement("span");
upobj.setAttribute("cn",cn);
if(thisn.getAttribute("open") != null){
upobj.setAttribute("open",(thisn.getAttribute("open")=="true"));
upobj.getAttribute("cn").style.display = upobj.getAttribute("open")?"inline":"none";
if( !upobj.getAttribute("open"))upobj.all.tags("img")[0].src ="contract.gif";
}
for(i=0;i<nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));
nodeObj.appendChild(cn);
}
else{
upobj.all.tags("img")[0].src ="endnode.gif";
}
return nodeObj;
}
window.onload = initTree;
</script><script>
function clickHandle(){
// your code here
}
function contextMenuHandle(){
event.returnValue = false;
var treeId = this.getAttribute("treeId");
// your code here
}
</script>
</HEAD>
<xml id=menuXML>
<?xml version="1.0" encoding="gb2312"?>
<all>
<menu text="网站" href="http://www.blueidea.com">
<DSMenu_ITEM text="技术论坛" href="http://www.blueidea.com" target="_self" >
<DSMenu_ITEM text="5DMedia">
<DSMenu_ITEM text="网页编码" href="http://" target="_self" />
<DSMenu_ITEM text="手绘" href="http://" target="_self" />
<DSMenu_ITEM text="灌水" href="http://" target="_self" />
<DSMenu_ITEM text="网页编码" href="http://" target="_self" />
<DSMenu_ITEM text="手绘" href="http://" target="_self" />
<DSMenu_ITEM text="灌水" href="http://" target="_self" />
</DSMenu_ITEM>
<DSMenu_ITEM text="BlueIdea">
<DSMenu_ITEM text="DWEAM WEAVER" href="http://" target="_self" />
<DSMenu_ITEM text="手绘" href="http://" target="_self" />
<DSMenu_ITEM text="灌水" href="http://" target="_self" >
<DSMenu_ITEM text="DWEAM WEAVER" href="http://" target="_self" />
<DSMenu_ITEM text="手绘" href="http://" target="_self" />
<DSMenu_ITEM text="灌水" href="http://" target="_self" />
<DSMenu_ITEM text="DW" href="http://" target="_self" />
<DSMenu_ITEM text="手绘" href="http://" target="_self" >
<DSMenu_ITEM text="DWEAM WEAVER" href="http://" target="_self" />
<DSMenu_ITEM text="手绘" href="http://" target="_self" />
<DSMenu_ITEM text="灌水" href="http://" target="_self" >
<DSMenu_ITEM text="DWEAM WEAVER" href="http://" target="_self" />
<DSMenu_ITEM text="手绘" href="http://" target="_self" />
<DSMenu_ITEM text="灌水" href="http://" target="_self" >
</DSMenu_ITEM>
<DSMenu_ITEM text="DW" href="http://" target="_self" />
<DSMenu_ITEM text="手绘" href="http://" target="_self" />
<DSMenu_ITEM text="灌水" href="http://" target="_self" />
<DSMenu_ITEM text="DreamWeaver & JS" href="http://" target="_self" />
<DSMenu_ITEM text="FlashActionScript" href="http://" target="_self" />
</DSMenu_ITEM>
<DSMenu_ITEM text="DW" href="http://" target="_self" />
<DSMenu_ITEM text="手绘" href="http://" target="_self" />
<DSMenu_ITEM text="灌水" href="http://" target="_self" />
<DSMenu_ITEM text="DreamWeaver & JS" href="http://" target="_self" />
<DSMenu_ITEM text="FlashActionScript" href="http://" target="_self" />
</DSMenu_ITEM>
<DSMenu_ITEM text="灌水" href="http://" target="_self" />
<DSMenu_ITEM text="DreamWeaver & JS" href="http://" target="_self" />
<DSMenu_ITEM text="FlashActionScript" href="http://" target="_self" />
</DSMenu_ITEM>
<DSMenu_ITEM text="DW" href="http://" target="_self" />
<DSMenu_ITEM text="手绘" href="http://" target="_self" />
<DSMenu_ITEM text="灌水" href="http://" target="_self" />
<DSMenu_ITEM text="DreamWeaver & JS" href="http://" target="_self" />
<DSMenu_ITEM text="FlashActionScript" href="http://" target="_self" />
</DSMenu_ITEM>
<DSMenu_ITEM text="CSDN">
<DSMenu_ITEM text="JS" href="http://" target="_self" />
<DSMenu_ITEM text="XML" href="http://" target="_self" />
</DSMenu_ITEM>
</DSMenu_ITEM>
<DSMenu_ITEM text="资源站点">
<DSMenu_ITEM text="素材屋" href="http://" target="_self" />
<DSMenu_ITEM text="桌面城市">
<DSMenu_ITEM text="壁纸" href="http://" target="_self" />
<DSMenu_ITEM text="字体" href="http://" target="_self" />
</DSMenu_ITEM>
<DSMenu_ITEM text="MSDN">
<DSMenu_ITEM text="DHTML" href="http://" target="_self" />
<DSMenu_ITEM text="HTC" href="http://" target="_self" />
<DSMenu_ITEM text="XML" href="" target="_self" />
</DSMenu_ITEM>
</DSMenu_ITEM>
<DSMenu_ITEM text="资源站点">
<DSMenu_ITEM text="素材屋" href="http://" target="_self" />
<DSMenu_ITEM text="桌面城市">
<DSMenu_ITEM text="壁纸" href="http://" target="_self" />
<DSMenu_ITEM text="字体" href="http://" target="_self" />
</DSMenu_ITEM>
<DSMenu_ITEM text="MSDN">
<DSMenu_ITEM text="DHTML" href="http://" target="_self" />
<DSMenu_ITEM text="HTC" href="http://" target="_self" >
<DSMenu_ITEM text="资源站点">
<DSMenu_ITEM text="素材屋" href="http://" target="_self" />
<DSMenu_ITEM text="桌面城市">
<DSMenu_ITEM text="壁纸" href="http://" target="_self" />
<DSMenu_ITEM text="字体" href="http://" target="_self" />
</DSMenu_ITEM>
<DSMenu_ITEM text="MSDN">
<DSMenu_ITEM text="DHTML" href="http://" target="_self" />
<DSMenu_ITEM text="HTC" href="http://" target="_self" />
<DSMenu_ITEM text="XML" href="" target="_self" />
</DSMenu_ITEM>
</DSMenu_ITEM>
</DSMenu_ITEM>
<DSMenu_ITEM text="XML" href="http://www.blueida.com" target="_self" />
</DSMenu_ITEM>
</DSMenu_ITEM>
</menu><menu text="Java">
<DSMenu_ITEM text="Java"></DSMenu_ITEM>
<DSMenu_ITEM text="websphere"></DSMenu_ITEM>
<DSMenu_ITEM text="IBM Websphere 信息中心" target="_blank" href="http://www-4.ibm.com/software/webservers/appserv/doc/v35/se/infocenter-zh/index.html">
<DSMenu_ITEM text="Java"></DSMenu_ITEM>
<DSMenu_ITEM text="websphere"></DSMenu_ITEM>
</DSMenu_ITEM>
</menu>
</all>
</xml>
<table style="position:absolute;left:100;top:100;">
<tr><td id=treeBox style="width:400px;height:200px;border:1px solid #cccccc;padding:5 3 3 5;" valign=top></td></tr>
<tr><td style="font:10px verdana;color:#999999" align=right>by <font color=#660000>sTar</font><br> 2003-4-8</td></tr>
</table>
</BODY>
</HTML>
去看看applet做的tree吧,超炫,绝对不是JS所能比的,还有很多其他特效,都是APPLET:)
<%@page contentType="text/html;charset=gb2312"%>
<%@page language="java" import="java.sql.*"%>
<%//设置session,提供用户登陆接口
session.setAttribute("userName","blueriver");
String topMenu;
topMenu=(String)session.getAttribute("userName");
%>
<%
String sDBDriver="sun.jdbc.odbc.JdbcOdbcDriver";
try
{
Class.forName(sDBDriver);
}
catch(java.lang.ClassNotFoundException e)
{
System.err.println(e.getMessage());
}
%>
<%!
public ResultSet executeQuery(String sql)
{
String sConnStr="jdbc:odbc:tree";
Connection conn=null;
ResultSet rs=null;
rs=null;
try
{
conn=DriverManager.getConnection(sConnStr);
Statement stmt=conn.createStatement();
rs=stmt.executeQuery(sql);
}
catch(SQLException ex)
{
System.err.println(ex.getMessage());
}
return rs;
}
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>树状菜单 </title>
<style><!--
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:hover {color:#99CCFF;text-decoration:none}
-->
</style>
<script LANGUAGE="JavaScript">
<!--
//每个节点有一个数组,包含 4+n个元素
// node[0]为0/1 对应节点的展开/关闭
// node[1]为0/1 对应文件夹的关闭/展开
// node[2]为1 如果节点的子节点是文档
// node[3]是节点的名称
// node[4]...node[4+n]为n个子节点// 初始化菜单的数据function generateTree()
{
//var aux1, aux2, aux3, aux4
var aux
aux=new ArrayfoldersTree = folderNode("我的网站")
<%
//menu_id,menu_name,parent_menu_id,folder_or_file,menu_location
String sql="select * from tree_menu ";
ResultSet RS;
RS=executeQuery(sql);
try
{
while(RS.next())
{
String foldersTree;
int id=RS.getInt("menu_id");
int loc=RS.getInt("menu_location");
int parent=RS.getInt("parent_menu_id");
int folder_or_file=RS.getInt("folder_or_file");
if(loc==1){
foldersTree="foldersTree";
}else{
//foldersTree="aux"+(int)(loc-1);
foldersTree="aux["+parent+"]";
}
//if(folder_or_file==1){
//out.println("aux"+loc+" = appendChild("+foldersTree+", folderNode('<a href=main.jsp?menuid="+id+"&loc="+loc+" target=folderFrame>"+RS.getString("menu_name")+"</a>'));");
out.println("aux["+id+"]"+" = appendChild("+foldersTree+", folderNode('<a href=main.jsp?menuid="+id+"&loc="+loc+" target=folderFrame>"+RS.getString("menu_name")+"</a>'));");
//}else{
//aux[id]=appendchild(foldersTree, folderNode("<a href=main.jsp?menuid="+id+"&loc="+loc+" target=folderFrame>"+RS.getString("menu_name")+"</a>"))
//out.println("appendChild("+foldersTree+", generateDocEntry(0, '"+RS.getString("menu_name")+"', 'sample1.htm', ''));");
//}
}
}
catch(Exception e)
{
out.println(e.toString());
}
%>
}// 创建节点的辅助函数
function folderNode(name)
{
var arrayAux
arrayAux = new Array
arrayAux[0] = 0
arrayAux[1] = 0
arrayAux[2] = 0
arrayAux[3] = name
return arrayAux
}
function leafNode(name)
{
var arrayAux
arrayAux = new Array
arrayAux[0] = 0
arrayAux[1] = 0
arrayAux[2] = 1
arrayAux[3] = name
return arrayAux
}function appendChild(parent, child)
{
parent[parent.length] = child
return child
}function generateDocEntry(icon, docDescription, link)
{
var retString ="" if (icon==0)
retString = "<A href='"+link+"' target=folderFrame><img src='doc.gif' alt='在右边框架中打开'"
else
retString = "<A href='"+link+"' target=_blank><img src='link.gif' alt='在新窗口中打开'"
retString = retString + " border=0></a><td nowrap><font style='font-size:9pt;font-family:宋体'>" + docDescription + "</font>" return retString}
//刷新树状菜单
function redrawTree()
{
var doc = top.treeFrame.window.document doc.clear()
doc.write("<body bgcolor='white'>")
redrawNode(foldersTree, doc, 0, 1, "")
doc.close()
}function redrawNode(foldersNode, doc, level, lastNode, leftSide)
{
var j=0
var i=0 doc.write("<table border=0 cellspacing=0 cellpadding=0>")
doc.write("<tr><td valign = middle nowrap>") doc.write(leftSide) if (level>0)
if (lastNode) //'brother'子节点数组中有否兄弟节点
{
doc.write("<img src='lastnode.gif' width=16 height=22>")
leftSide = leftSide + "<img src='blank.gif' width=16 height=22>"
}
else
{
doc.write("<img src='node.gif' width=16 height=22>")
leftSide = leftSide + "<img src='vertline.gif' width=16 height=22>"
} displayIconAndLabel(foldersNode, doc)
doc.write("</table>") if (foldersNode.length > 4 && foldersNode[0]) //有更低层的节点和文件夹展开着
{
if (!foldersNode[2])//带文件夹的文件夹
{
level=level+1
for (i=4; i<foldersNode.length;i++)
if (i==foldersNode.length-1)
redrawNode(foldersNode[i], doc, level, 1, leftSide)
else
redrawNode(foldersNode[i], doc, level, 0, leftSide)
}
else //带文档的文件夹
{
for (i=4; i<foldersNode.length;i++)
{
doc.write("<table border=0 cellspacing=0 cellpadding=0 valign=center>")
doc.write("<tr><td nowrap>")
doc.write(leftSide)
if (i==foldersNode.length - 1)
doc.write("<img src='lastnode.gif' width=16 height=22>")
else
doc.write("<img src='node.gif' width=16 height=22>")
doc.write(foldersNode[i])
doc.write("</table>")
}
}
}
}function displayIconAndLabel(foldersNode, doc)
{
doc.write("<A href='javascript:top.openBranch(\"" + foldersNode[3] + "\")'><img src=")
if (foldersNode[1])
doc.write("openfolder.gif width=24 height=22 border=noborder></a>")
else
doc.write("closedfolder.gif width=24 height=22 border=noborder></a>")
doc.write("<td valign=middle align=left nowrap>")
doc.write("<font style='font-size:9pt;font-family:宋体'>"+foldersNode[3]+"</font>")
}
//树收拢时调用的函数//当父节点关闭,其所有的子节点也都闭合
function closeFolders(foldersNode)
{
var i=0 if (!foldersNode[2])
{
for (i=4; i< foldersNode.length; i++)
closeFolders(foldersNode[i]) }
foldersNode[0] = 0
foldersNode[1] = 0
}//收拢节点
function clickOnFolderRec(foldersNode, folderName)
{
var i=0 if (foldersNode[3] == folderName)
{
if (foldersNode[0])
closeFolders(foldersNode)
else
{
foldersNode[0] = 1
foldersNode[1] = 1
}
}
else
{
if (!foldersNode[2])
for (i=4; i< foldersNode.length; i++)
clickOnFolderRec(foldersNode[i], folderName)
}
}
//打开分支
function openBranch(branchName)
{
clickOnFolderRec(foldersTree, branchName)
if (branchName=="Start folder" && foldersTree[0]==0)
top.folderFrame.location="basefolder.htm"
timeOutId = setTimeout("redrawTree()",100)
}//页面载入时的初始化
function initializeTree()
{
generateTree()
redrawTree()
}var foldersTree = 0
var timeOutId = 0
generateTree()
-->
</script>
</HEAD>
<FRAMESET cols="200,*" onLoad='initializeTree()'>
<FRAME src="basetree.htm" name="treeFrame">
<FRAME SRC="basefolder.htm" name="folderFrame">
</FRAMESET>
<noframes>
</noframes>
</HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body bgcolor="#FFFFFF" >
<style>
<!--
.skin0 {
position:absolute;
text-align:left;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems {
padding-left:15px;
padding-right:10px;
}
-->
</style><SCRIPT LANGUAGE="JavaScript1.2">
<!-- Web Site: http://www.painting-effects.co.uk --><!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com --><!-- Begin
var menuskin = "skin1"; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
}
}
// End -->
</script>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class="menuitems" url="javascript:history.back();">返回</div>
<div class="menuitems" url="http://javacool.3322.net">回首页</div>
<hr>
<div class="menuitems" url="http://www.163.com">网易</div>
<div class="menuitems" url="http://www.sohu.com">搜狐</div>
<hr>
<div class="menuitems" url="http://www.sina.com.cn">新浪</div>
<div class="menuitems" url="http://www.yahoo.com.cn">雅虎</div>
</div>
<script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>
</body>
</html>