here is a version that adds a + - sign besides the list. the only
problem is that it won't expand when i click on the + or - sign..
anyway to accomplish that?
thanks!
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<style>
ul.mktree li.liOpen ul { display: block; border-left:1px }
ul.mktree li.liClosed ul { display: none; }
ul.mktree li.liOpen .bullet { cursor: pointer; background:
url(minus.gif) center left no-repeat; }
ul.mktree li.liClosed .bullet { cursor: pointer; background:
url(plus.gif) center left no-repeat; }
ul.mktree li.liBullet .bullet { cursor: default; background:
url(bullet.gif) center left no-repeat; }
/* Turn off list bullets */
ul.mktree li { list-style: none; }
/* Provide space for our own "bullet" inside the LI */
ul.mktree li .bullet { padding-left: 15px;}
ul.mktree, ul.mktree ul , ul.mktree li { margin-left:10px; padding:
0px; white-space: nowrap}
</style>
</head>
<body>
<div id="tree_menu" >
<ul class="mktree">
<li class='liClosed'><span class="bullet"> </span>1
<ul>
<li class='liBullet'><span class="bullet"> </span>1.1</li>
<li class='liBullet'><span class="bullet"> </span>1.2</li>
<li class='liClosed'><span class="bullet"> </span>1.2
<ul>
<li class='liBullet'><span
class="bullet"> </span>1.2.1</li>
</ul>
</li>
</ul>
</li>
<li class='liClosed'><span class="bullet"> </span>2
<ul>
<li class='liBullet'><span class="bullet"> </span>2.1</li>
<li class='liBullet'><span class="bullet"> </span>2.2</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("tree_menu").observe("click", function(event) {
var element = Event.element(event);
if (element.tagName == "LI") {
if( $(element).hasClassName("liOpen") ) {
element.removeClassName("liOpen");
element.addClassName("liClosed");
} else if ( $(element).hasClassName("liClosed") ) {
element.removeClassName("liClosed");
element.addClassName("liOpen");
}
}
});
</script>
</body>
</html>
On Jun 1, 12:14 pm, David Dashifen Kees <[EMAIL PROTECTED]> wrote:
> You don't need to put open/closed classes on your <ul> tags, only the
> <li> ones which contain lists. With the CSS that we've defined, there's
> not a problem with doing so, but since the class is undefined it may not
> really help very much. Other than that, looks good to me.
>
> - Dash -
>
> [EMAIL PROTECTED] wrote:
> > thank you very much, David. here is the simple test html that works
>
> > <html>
> > <head>
> > <script type="text/javascript" src="prototype.js"></script>
> > <style>
> > li.open ul { display: block; }
> > li.closed ul { display: none; }
> > </style>
> > </head>
> > <body>
>
> > <div id="tree_menu">
>
> > <ul>
> > <li class='open'>
> > <li class='closed'>1
> > <ul class='closed'>
> > <li>1.1</li>
> > <li>1.2</li>
> > </ul>
> > </li>
> > </li>
> > </ul>
>
> > </div>
>
> > <script type="text/javascript">
>
> > $("tree_menu").observe("click", function(event) {
> > var element = Event.element(event);
> > if (element.tagName == "LI") {
> > if( element.hasClassName("open") ) {
> > element.removeClassName("open");
> > element.addClassName("closed");
> > } else {
> > element.removeClassName("closed");
> > element.addClassName("open");
> > }
> > }
>
> > });
>
> > </script>
>
> > </body>
> > </html>
>
> > On Jun 1, 11:38 am, David Dashifen Kees <[EMAIL PROTECTED]> wrote:
>
> >> Yes, the JS can do that. Assuming your tree menu is within an element,
> >> probably a div, with an ID of "treemenu", you can do this:
>
> >> $("treemenu").observe("click", function(event) {
> >> var element = Event.element(event);
> >> /* ... other stuff ... */
>
> >> }
>
> >> The Event.element() function will return the DOM object which caused the
> >> Event to happen. Thus, if you click a specific list item within the
> >> tree menu div, then it will (a) call the function above and (b) know
> >> exactly which list item was clicked using the Event.element() function.
>
> >> - Dash -
>
> >> [EMAIL PROTECTED] wrote:
>
> >>> er. i am wrong. I need the ID to identify which list item i am working
> >>> on.
> >>> i thought that when i click on certain list that js will figure out
> >>> which one i am clicking..
>
> >>> James.
>
> >>> On Jun 1, 11:26 am, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote:
>
> >>>> On Jun 1, 11:09 am, "Richard Quadling" <[EMAIL PROTECTED]>
> >>>> wrote:
>
> >>>>> Each node should have a unique ID. The classname is just to alter the
> >>>>> styling from open to close.
>
> >>>> I don't see why i need ID for it. All i need is to show or hide a
> >>>> branch with onclick. a classname should do it, no?
>
> >>>> James.
>
> >>>>> On 01/06/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
> >>>>>> Hi,
>
> >>>>>> I want to make a tree menu that is only need to be viewed (no drag/
> >>>>>> drop, editing ).
>
> >>>>>> searched the groups and i found this post. http://xrl.us/wsgg
>
> >>>>>> quote the 6th post from David Dashifen Kees
> >>>>>> ====
> >>>>>> I'd suggest using a structure rather than hierarchical divs; I've made
> >>>>>> tree menus mostly out of unordered lists. The children of any node in
> >>>>>> a
> >>>>>> list are then contained within an internal <ul> within the <li> of the
> >>>>>> node. Then, when a list item is clicked, you can open or close it's
> >>>>>> internal <ul> with toggling or, as I usually do it, changing the class
> >>>>>> name of the list item that you click. That way the class name can not
> >>>>>> only control the display of any internal <ul> but it can also alter
> >>>>>> the
> >>>>>> image that appears to the left of the <li> which indicates whether the
> >>>>>> list is expanded or collapsed.
> >>>>>> ====
>
> >>>>>> that seems to be a simple solution but i don't understand the
> >>>>>> "changing the class
> >>>>>> name of the list item that you click".. I thought i would give a
> >>>>>> unique classname for each <ul> when i generate the whole tree. then i
> >>>>>> can expand this <ul> when user click on it. why changing the
> >>>>>> classname ? I reread his explanation few time but still can't figure
> >>>>>> out the reason..
>
> >>>>>> thanks,
>
> >>>>>> James.
>
> >>>>> --
> >>>>> -----
> >>>>> Richard Quadling
> >>>>> Zend Certified Engineer
> >>>>> :http://zend.com/zce.php?c=ZEND002498&r=213474731
> >>>>> "Standing on the shoulders of some very clever giants!"
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
