Tree Menu? In JS?

Question

I need a tree menu. But instead of a listview where you expand/collapse i need a dropdown box with the list and when you click on a element i need the box to update (with the first entry being 'Back') so the menu stays in a neat little dialog.

Does this menu have a name? Does anyone know where i can get code to do this?

Answer 1

I can think of several jQuery plugins which would soot your purposes. However, I would recommend jQuery iPod Style Drilldown Menu (Newer Version), which is exactly what it sounds like. The dropdown box updates in place, uses a cool sideways slide animation, and includes a "Back" button (as you desired). Finally, if you don't want any animation, you can try tweaking the plugin's many options. Setting crossSpeed to 0 may work, for example.

Answer 2

Adam is right, jQuery offers an assortment of menu's which you could use. Really though, this is a somewhat trivial problem, the code to write it would take up about 1/10th the space that jQuery's code will. So if possible I would say write it without jQuery.

The most effective method would be to do it JS OOP (Javascript Object-Oriented), but understandably this is a confusing topic.

Basically you just want something like:

function drillDown(){
     //Any code that multiple drilldowns 
     //  might need on the same page goes here

     //Every instance of a drillDown will 
     //  instantiate a new set of all functions/variables
     //  which are contained here

     //A reference to the parent node the dropdown is placed in
     this.parent;
     //A reference to the div the dropdown is incased in
     this.object;

     //Returns a reference to this object so it can be
     //  stored/referenced from a variable in it's
     //  superclass
     return this;
}

//Prototype Functions

//prototypes are shared by all 
//  instances so as to not double up code

//this function will build the dropdown
drillDown.prototype.build = function(parent){
    //Too lazy to write all this, but build a div and your select box
    //  Add the select box to the div, 
    //  Add the div to the parent (which is in your document somewhere) 
    var divEle = document.createElement('div');
    var inputBox = document.createElement('input');

    //code code code

    divEle.appendChild(inputBox);
    parent.appendChild(divEle);
}

//this function loads the newest dataset of
drillDown.prototype.loadNewDataSet = function(data){
    //first clear out the old list
    //  remember we have a reference to both the
    //  'object' and 'parent' by using 
    //  this.object and this.parent

    //load the data, we are going to use the text from
    //  the select boxes to load each new dataset, woo eval();
    //  If you didn't know, eval() turns a string into JS code,
    //  in this case referencing an array somewhere
    var dataSet = eval(data);


    //then loop through your list adding each new item
    for(item in dataSet){
        //add item to the list
        //change the .onClick() of each one to load the next data set

        // a la  -> 
        selectItem.onClick = function(){this.loadNewDataSet(item);};

        //if you name your datasets intelligently, 
        //  say a bunch of arrays named for their respective selectors, 
        //  this is mad easy
    }
}

//Then you can just build it
var drillDownBox = new drillDown();
drillDownBox.build(document.getElementsByTagName('body')[0]);
drillDownBox.loadNewDataSet("start");

//assuming your first dataset array is named "start",
//  it should just go

And by the way, Adam also said it, but wasn't explicit, this is refered to as a drill-down.