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  

-- 
----------------------
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 [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
-~----------~----~----~----~------~----~------~--~---

Reply via email to