shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-Jun-01 15:05 UTC
question on making tree menu
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. --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Each node should have a unique ID. The classname is just to alter the styling from open to close. On 01/06/07, shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org <shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Consider this: you can have two states to an branch of your tree: open
and closed. If you click an open branch, it should be closed and if you
click a closed branch, it should be opened. Thus, you can define
something like this:
li.open ul { display: block; }
li.closed ul { display: none; }
Thus, unordered lists contained within open list items are shown while
those within closed list items are hidden. Then, when a list item is
clicked, swap their class for the other one. For example:
$("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");
}
}
});
If your code would ensure that only the open and close classes were used
on list items you could simplify it, but the above code takes care to
avoid mangling other class names which might be set for a clicked list
item.
Anyway, the CSS that we''ve scetched out above will make sure that lists
within branches of a tree that are closed are not shown. Then, the
Javascript will open a branch when it''s clicked thus showing interior
lists of your tree menu. Click on an open branch and the Javascript
will once again close the branch and the CSS ensures that the interior
lists of the menu are once more hidden.
I would suggest, too, that you define a state for all list items in the
tree to start. In other words: all list items in your tree should be
explicitly open or closed from the beginning. If they''re not,
you''ll
have to figure out what happens when someone clicks a list item that is
neither open nor closed. Course you could do this:
li ul { display: none; }
li.open ul { display: block; }
which means you could just add and remove one class name rather than
two, but it''s not as semantically understandable, I think.
- Dash -
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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.
>
>
> >
>
>
--~--~---------~--~----~------------~-------~--~----~
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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-Jun-01 15:26 UTC
Re: question on making tree menu
On Jun 1, 11:09 am, "Richard Quadling" <rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> 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, shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-Jun-01 15:30 UTC
Re: question on making tree menu
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, "shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org" <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> On Jun 1, 11:09 am, "Richard Quadling" <rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> > 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, shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
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 -
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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,
"shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org"
<shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
>> On Jun 1, 11:09 am, "Richard Quadling"
<rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
>> 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, shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
<shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-Jun-01 15:58 UTC
Re: question on making tree menu
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
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
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 -
>
> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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,
"shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org"
<shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >> On Jun 1, 11:09 am, "Richard Quadling"
<rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
> >> 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, shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
<shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
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 - shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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 <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 - >> >> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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, "shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org" <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >>> >>>> On Jun 1, 11:09 am, "Richard Quadling" <rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> >>>> 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, shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-Jun-02 20:57 UTC
Re: question on making tree menu
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
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
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 -
>
> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 -
>
> >> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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,
"shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org"
<shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >>>> On Jun 1, 11:09 am, "Richard Quadling"
<rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
> >>>> 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,
shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
<shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Hrm ... when I added plus/minus images, I added <img> tags within the list items. I made the list items position:relative and that way I could use position:absolute for an <img> and a <label> within the list items. Then, with prototype, you can use the up() function to figure out what list item you''re within. But, in your case, the best I can think of is to maybe float a <div> element over the plus/minus background image? - Dash - shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote:> 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 <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 - >> >> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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 <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 - >>>> >>>> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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, "shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org" <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >>>>> >>>>>> On Jun 1, 11:09 am, "Richard Quadling" <rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> >>>>>> 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, shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Dont list items have a list item icon that you can set? Gareth On 6/3/07, David Dashifen Kees <dashifen-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > > Hrm ... when I added plus/minus images, I added <img> tags within the > list items. I made the list items position:relative and that way I > could use position:absolute for an <img> and a <label> within the list > items. Then, with prototype, you can use the up() function to figure > out what list item you''re within. > > But, in your case, the best I can think of is to maybe float a <div> > element over the plus/minus background image? > > - Dash - > > shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote: > > 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 <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 - > >> > >> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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 <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 - > >>>> > >>>> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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, "shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org" <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> > wrote: > >>>>> > >>>>>> On Jun 1, 11:09 am, "Richard Quadling" <rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> > >>>>>> 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, shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Yeah, you can change the list image in the CSS, too. I hadn''t thought of that. But, I''m not sure that you can click on the list item image and register a click on the list item; I''ve never tried, though. - Dash - Gareth Evans wrote:> Dont list items have a list item icon that you can set? > > Gareth > > > On 6/3/07, David Dashifen Kees <dashifen-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > >> Hrm ... when I added plus/minus images, I added <img> tags within the >> list items. I made the list items position:relative and that way I >> could use position:absolute for an <img> and a <label> within the list >> items. Then, with prototype, you can use the up() function to figure >> out what list item you''re within. >> >> But, in your case, the best I can think of is to maybe float a <div> >> element over the plus/minus background image? >> >> - Dash - >> >> shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote: >> >>> 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 <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 - >>>> >>>> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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 <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 - >>>>>> >>>>>> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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, "shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org" <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> >>>>>>> >> wrote: >> >>>>>>>> On Jun 1, 11:09 am, "Richard Quadling" <rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> >>>>>>>> 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, shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-Jun-05 13:30 UTC
Re: question on making tree menu
thanks, David. here is the final version using up()
<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);
// enable click on + or - sign
if ( $(element).hasClassName("bullet") ) {
// go one level up to the <li> tag and toggle it
element = $(element).up();
toggleList(element);
}
});
function toggleList(element) {
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 2, 6:15 pm, David Dashifen Kees
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hrm ... when I added plus/minus images, I added <img> tags within the
> list items. I made the list items position:relative and that way I
> could use position:absolute for an <img> and a <label> within
the list
> items. Then, with prototype, you can use the up() function to figure
> out what list item you''re within.
>
> But, in your case, the best I can think of is to maybe float a <div>
> element over the plus/minus background image?
>
> - Dash -
>
> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote:
> > 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
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 -
>
> >> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >>>> Yes, the JS can do that. Assuming yourtreemenu 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
> >>>>treemenu div, then it will (a) call the function above and
(b) know
> >>>> exactly which list item was clicked using the
Event.element() function.
>
> >>>> - Dash -
>
> >>>> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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,
"shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org"
<shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >>>>>> On Jun 1, 11:09 am, "Richard Quadling"
<rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
> >>>>>> 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,
shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
<shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >>>>>>>> Hi,
>
> >>>>>>>> I want to make atreemenu 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
> >>>>>>>>treemenus 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 wholetree. 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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Glad we could help! - Dash - shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote:> thanks, David. here is the final version using up() > > > <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); > // enable click on + or - sign > if ( $(element).hasClassName("bullet") ) { > // go one level up to the <li> tag and toggle it > element = $(element).up(); > toggleList(element); > } > }); > > function toggleList(element) { > 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 2, 6:15 pm, David Dashifen Kees <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > >> Hrm ... when I added plus/minus images, I added <img> tags within the >> list items. I made the list items position:relative and that way I >> could use position:absolute for an <img> and a <label> within the list >> items. Then, with prototype, you can use the up() function to figure >> out what list item you''re within. >> >> But, in your case, the best I can think of is to maybe float a <div> >> element over the plus/minus background image? >> >> - Dash - >> >> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote: >> >>> 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 <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 - >>>> >>>> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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 <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >>>>> >>>>>> Yes, the JS can do that. Assuming yourtreemenu 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 >>>>>> treemenu div, then it will (a) call the function above and (b) know >>>>>> exactly which list item was clicked using the Event.element() function. >>>>>> >>>>>> - Dash - >>>>>> >>>>>> shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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, "shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org" <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >>>>>>> >>>>>>>> On Jun 1, 11:09 am, "Richard Quadling" <rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> >>>>>>>> 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, shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org <shijia...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >>>>>>>>> >>>>>>>>>> Hi, >>>>>>>>>> >>>>>>>>>> I want to make atreemenu 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 >>>>>>>>>> treemenus 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 wholetree. 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---