Hi Dash, I guess unordered lists might be a more semantically correct representation of child nodes than plain ol' div tags, and would also fit better with Scriptaculous' house style (e.g. list tags in the Autocompleter response, in Sortables, etc.) Personally, I tend to use div's rather than anything else when I'm programmatically generating HTML, but that's just habit.
Most of what you're describing could be done with div's anyway, I think? The open/close arrow or icon on an element can be set using CSS classes with a non-repeating background and a padding-left roughly equal to the width of the icon. Cheers, Dave On Tuesday 15 May 2007 16:46, David Dashifen Kees wrote: > 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. > > -- Dash -- > > Dave Crane wrote: > > On Tuesday 15 May 2007 14:14, Richard Quadling wrote: > >> I don't know if you ever saw this, but there was a JS based menu > >> system called Joust (http://www.ivanpeters.com/). It was smaller than > >> the DHTMLMenu work that was around at the time. > >> > >> One of the great features of this was being able to add to the menu > >> dynamically. > >> > >> <snip> > >> > >> But it is NOT a prototype.js based menu system and is no longer > >> supported. > >> > >> But the features like this would be great. > > > > Shouldn't be too hard to do with Prototype. I've built several tree menus > > over the years using DOM and Javascript. The best thing you can do is to > > take advantage of the DOM to do all your layout for you (makes sense, as > > the DOM is a tree structure itself). Here's a rough recipe: > > > > For each node in the tree, provide a title node and a 'contents' node > > that will contain any child nodes, each with their own title node and > > contents node, recursively. The title node (or an element within it) can > > be set up with a click event to Element.toggle() the contents node. > > > > If you want to load more nodes on the fly, you can generate the HTML for > > these extra nodes, which have a nice regular, generator-friendly > > structure, load it up in an Ajax.Updater, and then use an onComplete or > > onSuccess callback to add the toggle() interactivity - after finding all > > the title nodes using $$(). > > > > I don't have a working copy that I can give away, unfortunately. There's > > a working tree based on this approach at > > http://mystring.info/xbhistory/index2.php, but it's a bit too complex to > > serve as a learning example (e.g. we're using Effect.toggle() rather than > > Element.toggle(), ust to show off!) - should at least explain the DOM > > structure clearly if you point Firebug at it, though. > > > > HTH > > > > Dave > > > > > -- > This email has been verified as Virus free > Virus Protection and more available at http://www.plus.net -- ---------------------- Author Ajax in Action http://manning.com/crane Ajax in Practice http://manning.com/crane2 Prototype & Scriptaculous in Action http://manning.com/crane3 --~--~---------~--~----~------------~-------~--~----~ 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@googlegroups.com 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 -~----------~----~----~----~------~----~------~--~---
