트리 메뉴? JS에서?

Question

나무 메뉴가 필요합니다. 하지만 당신이 확장/축소 된 목록보기 대신 목록이있는 드롭 다운 상자가 필요하고 요소를 클릭 할 때 (첫 번째 항목이 '뒤로'이므로) 업데이트 할 상자가 필요하므로 메뉴가 깔끔한 작은 대화 상자에 유지됩니다. .

이 메뉴에 이름이 있습니까? 누구든지 내가 이것을 할 수있는 코드를 얻을 수 있는지 알고 있습니까?

Answer 1

나는 당신의 목적을 그을음을 줄 몇몇 jQuery 플러그인을 생각할 수있다. 그러나 나는 정확히 같은 소리 인 jQuery iPod Style Drilldown Menu (Newer Version)을 권하고 싶습니다. 드롭 다운 상자는 제 위치에서 업데이트되고 멋진 옆쪽 슬라이드 애니메이션을 사용하며 원하는대로 "뒤로"버튼을 포함합니다. 마지막으로, 애니메이션을 원하지 않는다면, 플러그인의 많은 옵션을 조정할 수 있습니다. 예를 들어 crossSpeed에서 0으로 설정하면됩니다.

Answer 2

Adam이 맞습니다. jQuery는 사용할 수있는 다양한 메뉴를 제공합니다. 실제로, 이것은 다소 사소한 문제입니다. jQuery의 코드가 차지하는 공간의 1/10 정도는 쓰는 코드가 될 것입니다. 그래서 가능하다면 jQuery없이 써라.

가장 효과적인 방법은 JS OOP (Javascript Object-Oriented)이지만, 이는 당연히 혼란스러운 주제입니다.

은 기본적으로 당신이 뭔가처럼 원하는 :

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 

그건 그렇고, 아담이는 드릴 다운으로 대해 참조되고, 그것을 말했지만 명시하지 않았다.