2009年8月19日 星期三

Simple Tree Menu


Note: Replaces
original Smart Folding menu on same page.


Description: This
is a unobtrusive Tree Menu script that turns any ordinary list (UL element) into
a collapsible tree! Once transformed, the original list and its sublists can be
collapsed/expanded at will, with cookies used to optionally persist its state.
Here's an overview of the script:



  • Plug and play script that turns a UL list into a tree
    menu, with any sublists collapsed by default.

  • Ability to specify that certain sublists be expanded by
    default, by giving that LI element a rel="open" attribute.

  • Expand or contact all sublists by invoking two functions,
    either via links, or inline in the script etc.

  • Simple CSS defines the look of the tree, such as the
    folder and list images to be used.

  • Optional persistence feature to remember the last state
    of the tree by user for x number of days.

  • Ability to define multiple Tree menus on the same page.




    Step 1: Insert the following code into the
    section of your page:




    Select All



    Step 2: The above code references a few
    external files, which you need to save and upload to your webpage directory
    (right click each file and select "Save As"):




Step 2: The above code references a few
external files, which you need to save and upload to your webpage directory
(right click each file and select "Save As"):



Step 3: Insert the following into the <body>
section of your page. It contains 2 sample Tree Menus and a script at the end to
initialize them:



Select All



That's it!


Configuration Help


The HTML for your tree menu as seen in Step 3 is simply an ordinary HTML list
(make sure it's valid syntax wise!), such as:


<ul id="treemenu2" class="treeview">
<li>Item 1</li>

<li>Folder 1
<ul>
<li>Sub Item 1.1</li>
<li>Folder 1.1
<ul rel="open">
<li>Sub Item 1.1.1</li>
<li>Sub Item 1.1.2</li>
<li>Folder 1.1.1
<ul>
<li>Sub item 1.1.1.1</li>
<li>Sub item 1.1.1.2</li>
<li>Sub item 1.1.1.3</li>
<li>Sub item 1.1.1.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>

<li>Item 2</li>
</ul>

As you can see, sublists are simply additional UL elements contained inside a
LI element. Following the list, to turn it into a dynamic menu tree, just call
the function ddtreemenu.createTree():


<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
ddtreemenu.createTree("treemenu2", true, 5)

</script>

where:



  1. 1st parameter is the ID of the list to transform.

  2. 2nd parameter is a Boolean value (true of false) indicating whether you
    want persistence to be enabled.

  3. 3rd parameter is the number of days to persist menu state assuming
    persistence is enabled. This last parameter is optional, and if
    omitted, defaults to 1 (day).


This function can be invoked multiple times to transform multiple lists on
the page each to their own independent tree menu.


Changing the contract/expand state of a tree menu


By default when you transform a list into tree menu, all sublists are
contracted until clicked on. You can set a particular sublist (and all of its
parent sublists, if any) to be expanded by default by inserting the attribute:


    <li>Folder 1.1
<ul rel="open">
<li>Sub Item 1.1.1</li>
<li>Sub Item 1.1.2</li>
<li>Folder 1.1.1
<ul>
<li>Sub item 1.1.1.1</li>
<li>Sub item 1.1.1.2</li>
<li>Sub item 1.1.1.3</li>
<li>Sub item 1.1.1.4</li>
</ul>
</li>
</ul>

inside the UL element you wish to be expanded automatically when the page
loads.


-Contract all/ expand all functionality

You can also cause a menu tree to contract or expand all of its sublists by
calling two methods of the script. For example, to do so via links would look
like:


<a href="javascript:ddtreemenu.flatten('treemenu2', 'expand')">Expand All</a> 
<a href="javascript:ddtreemenu.flatten('treemenu2', 'contact')">Contact All</a>

where "treemenu2" is the ID of the list. These methods can also be called
inside your script, for example, to cause a menu tree to be completely expanded
by default:


<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
ddtreemenu.createTree("treemenu2", true, 5)
ddtreemenu.flatten('treemenu2', 'expand')

</script>

Cool!

沒有留言:

張貼留言