求常用的javascript类库
求常用的javascript类库
我需要一个树状结构展示的JS代码,JS代码我不会写,网上找了找,找到了但不会用...
谁有写好的类库?就是给我提供一个方法,我往方法里传参进去就能展现我需要的树状结构.
谢谢...
--------------------------------
以下内容为自动编辑的内容，并非楼主的发贴内容,此仅用于显示而已，并无任何其他特殊作用
楼主【jingulang】截止到2008-08-04 22:01:51的历史汇总数据(不包括此帖)：
发帖的总数量:35 发帖的总分数:1170 每贴平均分数:33
回帖的总数量:472 得分贴总数量:197 回帖的得分率:41%
结贴的总数量:35 结贴的总分数:1170
无满意结贴数:2 无满意结贴分:40
未结的帖子数:0 未结的总分数:0
结贴的百分比:100.00% 结分的百分比:100.00%
无满意结贴率:5.71 % 无满意结分率:3.42 %
敬礼!
取消马甲机器人，请点这里：http://www.java2000.net/mycsdn/robotStop.jsp?usern=jingulang
[解决办法]
这是以前我参考网上代码改写的，实现的效果跟window左边的效果差不多。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
<title></title>
<STYLE type=text/css>
BODY {
SCROLLBAR-FACE-COLOR: #799AE1;
SCROLLBAR-HIGHLIGHT-COLOR: #799AE1;
SCROLLBAR-SHADOW-COLOR: #799AE1;
SCROLLBAR-3DLIGHT-COLOR: #ececec;
SCROLLBAR-ARROW-COLOR: #ececec;
SCROLLBAR-TRACK-COLOR: #ececec;
SCROLLBAR-DARKSHADOW-COLOR: #ececec;
BACKGROUND: #799ae1; MARGIN: 0px; FONT: 9pt 宋体
}
TABLE {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
TD {
FONT: 12px 宋体
}
IMG {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
A {
FONT: 12px 宋体; COLOR: #215dc6; TEXT-DECORATION: none
}
A:hover {
COLOR: #428eff
}
.sec_menu {
BORDER-RIGHT: white 1px solid; BACKGROUND: #d6dff7; OVERFLOW: hidden; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid
}
.menu_title {
}
.menu_title SPAN {
FONT-WEIGHT: bold; LEFT: 8px; COLOR: #215dc6; POSITION: relative; TOP: 2px
}
.menu_title2 {
}
.menu_title2 SPAN {
FONT-WEIGHT: bold; LEFT: 8px; COLOR: #428eff; POSITION: relative; TOP: 2px
}
</STYLE>
<SCRIPT language=javascript>
function menuShow(obj,maxh,obj2)
{
if(obj.style.pixelHeight<maxh)
{
obj.style.pixelHeight+=maxh/20;
obj.filters.alpha.opacity+=5;
obj2.background="images/pics/title_bg_hide.gif";
if(obj.style.pixelHeight==maxh/10)
obj.style.display='block';
myObj=obj;
myMaxh=maxh;
myObj2=obj2;
setTimeout('menuShow(myObj,myMaxh,myObj2)','4');
}
}
function menuHide(obj,maxh,obj2)
{
if(obj.style.pixelHeight>0)
{
if(obj.style.pixelHeight==maxh/20)
obj.style.display='none';
obj.style.pixelHeight-=maxh/20;
obj.filters.alpha.opacity-=5;
obj2.background="images/pics/title_bg_show.gif";
myObj=obj;
myMaxh=maxh
myObj2=obj2;
setTimeout('menuHide(myObj,myMaxh,myObj2)','4');
}
else
if(whichContinue)
whichContinue.click();
}
function menuChange(obj,maxh,obj2)
{
if(obj.style.pixelHeight)
{
menuHide(obj,maxh,obj2);
whichOpen='';
whichcontinue='';
}
else
if(whichOpen)
{
whichContinue=obj2;
whichOpen.click();
}
else
{
menuShow(obj,maxh,obj2);
whichOpen=obj2;
whichContinue='';
}
}
</SCRIPT>
<SCRIPT lanuage="Javascript">
var tt='start';
var ii='start';
function turnit(ss,bb) {
if (ss.style.display=="none") {
if(tt!='start') tt.style.display="none";
if(ii!='start') ii.src="dian.gif";
ss.style.display="";
tt=ss;
ii=bb;
bb.src="ball.gif";
}
else {
ss.style.display="none";
bb.src="dian.gif";
}
}
function openWindow(url) {
popupWin = window.open(url, 'new_page', 'width=400,height=410,scrollbars')
}
</SCRIPT>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#FFFFFF">
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=left border=0>
<TR>
<TD vAlign=top>
<TABLE cellSpacing=0 cellPadding=0 width=158 align=center>
<TR style="CURSOR: hand">
<TD vAlign=bottom height=42><IMG height=38
src="images/pics/title.gif" width=158>
</TD></TR></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=158 align=center>
<TR style="CURSOR: hand">
<TD class=menu_title onMouseOver="this.className='menu_title2';"
onmouseout="this.className='menu_title';"
background="images/pics/title_bg_quit.gif"
height=25><SPAN>
<a href="index.asp" target="blank"><B>首页</B></A>|<a href="Main.asp" target="_parent"><B>管理中心</B></A>|<a href="login.asp?action=loginout" target="_parent"><B>退出</B></A></SPAN>
</TD>
</TR></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=158 align=center>
<TR style="CURSOR: hand">
<TD class=menu_title id=menuTitle1
onmouseover="this.className='menu_title2';"
onclick=menuChange(menu1,80,menuTitle1);
onmouseout="this.className='menu_title';"
background="images/pics/title_bg_hide.gif"
height=25><SPAN>用户管理</SPAN> </TD>
</TR>
<TR>
<TD>
<DIV class=sec_menu id=menu1
style="DISPLAY: none; FILTER: alpha(Opacity=0); WIDTH: 158px; HEIGHT: 0px">
<TABLE style="POSITION: relative; top: 10px;" cellSpacing=0
cellPadding=0 width=135 align=center>
<TR>
<TD height=20><a href="admin_user.asp?action=adduser" target="FDRight">添加用户</a></TD>
</TR>
<TR>
<TD height=20><a href="admin_user.asp?action=modifyuser" target="FDRight">修改密码</a></TD>
</TR>
<TR>
<TD height=20><a href="admin_user.asp?action=userlist" target="FDRight">管理用户</a></TD>
</TR>
</TABLE>
</DIV></TD></TR></TABLE>
[解决办法]
我们项目用的是Yahoo UI的Tree，不但易于实现，而且很容易扩展出各种各样的业务需求
我们对树的节点添加点击事件，onmouseover事件，甚至做search，都很方便！
而且这个Js库完全开源，又提供大量的Example和API查阅，性能上总体评价还不错的！推荐你使用！
[解决办法]
yahoo ui是不是大了点儿.
我碰到一个网站ext2开发的.
公司的网速也算不错的了,打开还是很慢.
[解决办法]
树形，我推荐你使用DTREE，
或者使用JQUERY加插件的形式也很容易实现．
以下是JQUERY加插件的实现例子，类库自己去下载．
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!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>菜单</title> <link rel="stylesheet" href="../javascript/jquery.treeview.css" /> <link rel="stylesheet" href="../javascript/red-treeview.css" /> <link rel="stylesheet" href="../javascript/screen.css" /> <script src="../javascript/jquery.js" type="text/javascript"></script> <script src="../javascript/jquery.cookie.js" type="text/javascript"></script> <script src="../javascript/jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#browser").treeview(); $("#add").click(function() { var branches = $("<li><span class='folder'>New Sublist</span><ul>" + "<li><span class='file'>Item1</span></li>" + "<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser"); $("#browser").treeview({ add: branches }); branches = $("<li class='closed'><span class='folder'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>").prependTo("#folder21"); $("#browser").treeview({ add: branches }); }); }); </script> <style type="text/css"> #black.treeview li { background: url(images/black/tv-item.gif) 0 0 no-repeat; } #black.treeview .collapsable { background-image: url(images/black/tv-collapsable.gif); } #black.treeview .expandable { background-image: url(images/black/tv-expandable.gif); } #black.treeview .last { background-image: url(images/black/tv-item-last.gif); } #black.treeview .lastCollapsable { background-image: url(images/black/tv-collapsable-last.gif); } #black.treeview .lastExpandable { background-image: url(images/black/tv-expandable-last.gif); } #gray.treeview li { background: url(images/gray/tv-item.gif) 0 0 no-repeat; } #gray.treeview .collapsable { background-image: url(images/gray/tv-collapsable.gif); } #gray.treeview .expandable { background-image: url(images/gray/tv-expandable.gif); } #gray.treeview .last { background-image: url(images/gray/tv-item-last.gif); } #gray.treeview .lastCollapsable { background-image: url(images/gray/tv-collapsable-last.gif); } #gray.treeview .lastExpandable { background-image: url(images/gray/tv-expandable-last.gif); } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}</style></head><body> <ul id="browser" class="filetree"> <li><span class="folder">数据采集管理</span> <ul> <li><span class="file"><a href="1.jsp" target="mainFrame">录入</a></span></li> </ul> <ul> <li><span class="file"><a href="1.jsp" target="mainFrame">查询</a></span></li> </ul> <ul> <li><span class="file"><a href="1.jsp" target="mainFrame">统计</a></span></li> </ul> </li> <li><span class="folder">五种对象采集</span> <!-- <ul> <li><span class="folder">Subfolder 2.1</span> <ul id="folder21"> <li><span class="file">File 2.1.1</span></li> <li><span class="file">File 2.1.2</span></li> </ul> </li> <li><span class="file">File 2.2</span></li> </ul> --> </li> <li class="closed"><span class="folder">Folder 3 (closed at start)</span> <ul> <li><span class="file">File 3.1</span></li> </ul> </li> <li><span class="file">退出系统</span></li> </ul> <!--<button id="add">Add!</button>--></body></html>