Js树型控件Dtree使用
dtree地址:http://destroydrop.com/javascripts/tree/
Key features
- 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
- Alternative images for each node
Dtree的源码非常短,可以分析下。
http://destroydrop.com/javascripts/tree/api/
add()
Adds a node to the tree.
Can only be called before the tree is drawn.
id, pid and name are required.
Parameters
Name | Type | Description |
---|---|---|
id | Number | Unique identity number. |
pid | Number | Number refering to the parent node. The value for the root node has to be -1. |
name | String | Text label for the node. |
url | String | Url for the node. |
title | String | Title for the node. |
target | String | Target for the node. |
icon | String | Image file to use as the icon. Uses default if not specified. |
iconOpen | String | Image file to use as the open icon. Uses default if not specified. |
open | Boolean | Is the node open. |
Example
mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');
<head>
<title>Destroydrop » Javascripts » Tree</title> <link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script> </head> <body> <h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1> <h2>Example</h2> <div class="dtree"> <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p> <script type="text/javascript">
<!-- d = new dTree('d'); d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif'); document.write(d); //-->
</script> </div>
Js树型控件Dtree使用的更多相关文章
- 强大的Js树型控件Dtree使用详解
http://www.lmwlove.com/ac/ID868 在学习文章之前,要学会看官方网站http://destroydrop.com/javascripts/tree.从官方页面你能知道:dt ...
- VC中实现带有背景位图的树型控件
当前许多应用程序都在使用树型控件时为其添加了背景位图,增强的控件的魅力,然而对于Visual C++编程爱好者来说,使用Visual C++MFC提供的树型控件(CTreeCtrl)本身就是一个难点, ...
- JS数量输入控件
JS数量输入控件 很早看到kissy首页 有数量输入控件,就随便看了下功能 感觉也不怎么难 所以也就试着自己也做了一个, 当然基本的功能和他们的一样,只是用了自己的编码思想来解决这么一个问题.特此给大 ...
- MVC4加载zTree树小控件
前言: 第一次学习使用MVC框架,找了个练手项目,加载zTree树小控件.下面我就一步步说明我这次练手的经历以记录.如果有什么错误,希望各位大神帮忙指正,谢谢. 第一步: 利用VS2010新建一个MV ...
- vs2010开发activex(MFC)控件/ie插件(三),js调用ocx控件的接口函数
原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50802280 js调用ocx控件的接口函数,先看demo效果: 简单测试过程 ...
- UIStepper步进器 ——事件驱动型控件,(一个+和-按钮的)
- (void)viewDidLoad { [super viewDidLoad]; //步进器 固定的size (94*27), 事件驱动型控件 UIStepper *st ...
- 用js给html控件赋值
用js给html控件赋值 <script> window.onload=function setValue()//在页面加载时赋值 { document.getElementById( ...
- 老李推荐:第14章9节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-遍历控件树查找控件
老李推荐:第14章9节<MonkeyRunner源码剖析> HierarchyViewer实现原理-遍历控件树查找控件 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员 ...
- 2.23 js处理日历控件(修改readonly属性)
2.23 js处理日历控件(修改readonly属性) 前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...
随机推荐
- poj2114 Boatherds
Description Boatherds Inc. is a sailing company operating in the country of Trabantustan and offerin ...
- 为什么p标签不能嵌套div??
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Python模拟登录实战(一)
今天,学习了模拟登录新浪微博.模拟登录主要有两种方式,一.利用Cookie:二.模仿浏览器的请求,发送表单. 法一: Cookie:指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密 ...
- error in Swift. “Consecutive Declarations On A Line Must Be Separated By ';'”
当输入的时候以上代码的时候出现这个错误,经过尝试发现条件表达式?前面应该有一个空格 不然会和swift中的?和 !混淆
- 採集和输出 DeckLink Studio 4K
- 广播接收者 BroadcastReceiver 示例-2
BaseActivity /**所有Activity的基类*/ public class BaseActivity extends Activity { @Override prote ...
- 锚点链接和hash属性
相信大家挺经常见过这样一个效果.有一个很长很长的页面,分成好几部分,目录中一点击,就能定位到页面某个位置. 例如:有这样一个目录,例如你点击一下“HTML”,就会直接跳转到“HTML”的页面位置 这就 ...
- IDEA 运行 控制台显示一堆乱码,一些问号
如下: 问题: 配置程序运行参数的时候,配置到了"VM options",应该为配置到"Program arguments",如图:
- .NET定时发送邮件
添加一个全局应用程序类Global.asax 代码会在访问网站时运行 Global.asax代码: void Application_Start(object sender, EventArgs e) ...
- Flex布局摆脱float带来的布局问题
完整文章地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 使用浮动(float)的一个比较疑惑 ...