Friday, December 03, 2004

DHTML Tree

From http://www.mattkruse.com/javascript/mktree/

Implementing the DHTML Tree is extremely simple. Follow the steps below to have it up and running in your page in no time!

  • Include mktree.js in your page

    • For example, in the <HEAD> of your page, put the following:
      <SCRIPT SRC="mktree.js" LANGUAGE="JavaScript"></SCRIPT>

  • Include mktree.css in your page

    • For example, in the <HEAD< of your page, put the following:
      <LINK REL="stylesheet" HREF="mktree.css">

  • Set CLASS="mktree" in your <UL<

    • For example, change your root <UL< tag to this:
      <UL CLASS="mktree">

That's it! That's all that is needed to make your unordered list an expandable and collapsable tree.

Controlling The Tree
  • Expanding All

    • To have a link or button which fully expands your tree, do the following:
      1. Setup your tree as above

      2. In addition to a CLASS attribute in your UL tag, also give an ID attribute. For example:
      <UL CLASS="mktree" ID="tree1">
      The ID must be unique on the page, that is, no other tag can share the same ID

      3. Fire a javascript function call (most likely via onClick) like this:
      expandTree('tree1');

  • Collapsing All

    • To have a link or button which fully collapses your tree, do the following:
      1. Setup your tree as above

      2. In addition to a CLASS attribute in your UL tag, also give an ID attribute. For example:
      <UL CLASS="mktree" ID="tree1">
      The ID must be unique on the page, that is, no other tag can share the same ID

      3. Fire a javascript function call (most likely via onClick) like this:
      collapseTree('tree1');

  • Opening to a node

    • To have a link or button which fully collapses your tree, do the following:
      1. Setup your tree as above

      2. In addition to a CLASS attribute in your UL tag, also give an ID attribute. For example:
      <UL CLASS="mktree" ID="tree1">
      The ID must be unique on the page, that is, no other tag can share the same ID

      3. Any node which you will want to expand to needs its own unique ID. For example, somewhere in your tree:
      <LI ID="node234">

      4. Fire a javascript function call (most likely via onClick) like this:
      expandToItem('tree1','node234');
By default, this script uses 5 classes defined in the css file: mktree, liClosed, liOpen, liBullet, and bullet.

Files needed:
http://www.mattkruse.com/javascript/mktree/compact/mktree.js
http://www.mattkruse.com/javascript/mktree/mktree.css
http://www.mattkruse.com/javascript/mktree/plus.gif
http://www.mattkruse.com/javascript/mktree/minus.gif
http://www.mattkruse.com/javascript/mktree/bullet.gif

posted by Zhibin at 11:38 AM

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home