Glad we could help!
- Dash -
[EMAIL PROTECTED] 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 <[EMAIL PROTECTED]> 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 -
>>
>> [EMAIL PROTECTED] 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 <[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 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 -
>>>>>>
>>>>>> [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 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 [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
-~----------~----~----~----~------~----~------~--~---
