js之dtree

1 dtree是一款开源的树形的js。用于输出树形菜单。主要是这两个文件:dtree.js和dtree.css


2 现在jsp中引入css和js。
如:<link rel="stylesheet" type="text/css" href="<%=basePath %>css/dtree.css"/>
<script type="text/javascript" language="javascript" src="<%=basePath %>js/dtree.js"></script>


这里注意:dtree的所需的img的文件,都在WebRoot下建立一个img文件夹。然后将dtree的图片文件都放在这里。因为系统会默认调用WebRoot下的img文件夹中的图片。这点要记住。


3 在jsp中使用dtree。首先记住不要在onload方法中使用。根节点的父节点是-1
如:<script type="text/javascript">
d12=new dTree('d12');//!!!这点要记住 d12没有定义类型。是因为dTree的参数名需要和对象名保持一致。这两个名字要一致不然会报错。名字可以随便起。只要保持一致即可。
d12.add(0,-1,"0");//使用add方法。第一个参数为节点id。第二个参数为父节点(根节点的父节点是-1)。第三个参数为节点的名称,还有第四个参数为节点的url。还有第五个参数为节点的title。第六个参数为目标的frame。
d12.add(10,0,"10");
d12.add(11,10,"11","qq");
d12.add(12,10,"12","ddd");
d12.add(20,0,"20");
document.write(d12);//通过document.write()将显示出来。
</script>


document.write方法是将内容显示在页面上。未来的规划是将从后台来拼接dtree的数据。然后再前台显示出来(菜单)


完整的例子:webroot文件夹下有js、css、img。分别将dtree的文件放入其中。


<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
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">
-->

<link rel="stylesheet" type="text/css" href="<%=basePath %>css/dtree.css"/>
<script type="text/javascript" language="javascript" src="<%=basePath %>js/dtree.js"></script>
  </head>
  
  <body>
  </body>
<script type="text/javascript">
d=new dTree('d');
d.add(0,-1,"0");
d.add(10,0,"10");
d.add(11,10,"11","qq");
d.add(12,10,"12","ddd");
d.add(20,0,"20");
document.write(d);
</script>
</html>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。dtree   目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。   dTree可以不用添加任何页面而直接用代码实现多个栏目,并可以实现无限分级,下面是官方介绍的优点:   - Unlimited number of levels(无限分级)   - Can be used with or without frames(可用于框架或非框架页面)   - Remembers the state of the tree between pages(在不同页面之间可记住当前状态)   - Possible to have as many trees as you like on a page(可以得到你想要数量的树型)   - All major browsers suported(支持的浏览器)   Internet Explorer 5+ Netscape 6+ Opera 7+ Mozilla   - Generates XHTML 1.0 strict validated output(严格支持XHTML 1.0)   - Alternative images for each node(每个节点用图片代替) [编辑本段]创建dtree   1)从官网上下载dtree的源文件压缩包“dtree.zip”,包内包含以下几个文件:   img文件夹: 包含树形菜单显示需要的图标   api.html : 作者写的dtree帮助文档   dtree.css: 树形菜单的样式   dtree.jsjs核心文件,代码都在其中   example01.html:树形菜单实例   2)将压缩包内的文件拷贝到项目webroot下(example01.html可以不拷贝)   3)新建一个web文件(*.html、*.jsp...都可以),首先引入css和js文件:   <link rel="StyleSheet" href="dtree.css" type="text/css" />   <script type="text/javascript" src="dtree.js"></script>   然后在<body>里创建一个div层,指定class为“dtree”,此时该层就引用了dtree的样式   <div class="dtree">   <script type="text/javascript">   tree = new dTree('tree');   ......   </script>   </div>   注:具体代码可以参照example01.html   4)最后保存执行即可看到一个树形菜单。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值