Dont list items have a list item icon that you can set?
Gareth
On 6/3/07, 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 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
-~----------~----~----~----~------~----~------~--~---
