首页 > Web开发 > 详细

Js树型控件Dtree使用

时间:2014-02-19 16:29:55      阅读:463      评论:0      收藏:0      [点我收藏+]

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‘);

 

bubuko.com,布布扣
<head>
    <title>Destroydrop &raquo; Javascripts &raquo; 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> &raquo; <a href="/javascripts/">Javascripts</a> &raquo; <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>
bubuko.com,布布扣

bubuko.com,布布扣

更多:http://www.lmwlove.com/ac/ID868

Js树型控件Dtree使用

原文:http://www.cnblogs.com/youxin/p/3554903.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!