트위터 부트 스트랩 아약스 드롭 다운

트위터 부트 스트랩을 사용하여 동적 메뉴를 만들려고합니다. 이 정적 트위터 부트 스트랩으로 렌더링 할 수트위터 부트 스트랩 아약스 드롭 다운

// test.json 

{ 
"children": [ 
    { 
    "text": "Item1", 
    "children": [ 
     {"text": "Item11", "link": "/link11"}, 
     {"text": "Item12", "link":"/link12"}, 
     {"text": "Item13", "children": [ 
      {"text": "Item131", "link":"/link131"}, 
      {"text": "Item132", "link":"/link132"} 
     ]}, 
     {"text": "Item14", "link":"/link13"} 
    ]}, 
    { 
    "text": "Item2", 
    "children": [ 
     {"text": "Item21", "link":"/link21"}, 
     {"text": "Item22", "link":"/link22"} 
    ]}, 
    { 
    "text": "Item3" 
    } 
] 
}

: 아이디어는 내부 메뉴 항목으로 JSON 파일을로드하는 것입니다

// index.html 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
</head> 
<body> 
<div class="navbar"> 
    <div class="navbar-inner" id ="navbar-inner-main"> 
     <div class="container"> 
      <div class="nav-collapse collapse navbar-responsive-collapse"> 
       <ul class="nav"> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Item1</a> 
         <ul class="dropdown-menu"> 
          <li> 
           <a href="/link11">Item11</a> 
          </li> 
          <li> 
           <a href="/link12">Item12</a> 
          </li> 
          <li class="dropdown-submenu"> 
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Item13</a> 
           <ul class="dropdown-menu"> 
            <li> 
             <a href="/link131">Item131</a> 
            </li> 
            <li> 
             <a href="/link132">Item132</a> 
            </li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Item2</a> 
         <ul class="dropdown-menu"> 
          <li> 
           <a href="/link21">Item21</a> 
          </li> 
          <li> 
           <a href="/link22">Item22</a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">Item3</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div>  
<script src="http://code.jquery.com/jquery.js"></script> 
<script src="bootstrap/js/bootstrap.min.js"></script>

나는에 추가 할

index.html 다음과 같은 함수 :

잉크 json을 구문없는 순서로 정렬하는 가장 좋은 방법은 템플릿을 사용하는 것입니다. pure과 mustache으로 시도했지만 성공하지 못했습니다. 이 문제는 재귀 적 접근 방식을 일관성있게 만드는 드롭 다운 하위 메뉴 클래스로 인해 발생합니다.

의견이 있으십니까?

미리 감사드립니다.

출처

2013-04-02 marione

나는 비슷한 문제가있었습니다. 여기 는 솔루션입니다 :

내 JSON

[{ 
"name": "Cars", 
"url": "#", 
"parent_id": "-1", 
"id": "1" 
}, { 
"name": "Toyota", 
"url": "#", 
"parent_id": "1", 
"id": "2" 
    }, { 
"name": "Corolla", 
"url": "#", 
"parent_id": "2", 
"id": "3" 
}, { 
"name": "2013", 
"url": "#", 
"parent_id": "3", 
"id": "4" 
    }, 
...

그리고 여기에 그래서 당신이 필요로하는 모든이 'JSON 메뉴'클래스 근처의 '드롭'을 추가입니다

//load JSON file 
$.getJSON('menu.json', function(data) { 
//build menu 
var builddata = function() { 
var source = []; 
var items = []; 
for (i = 0; i < data.length; i++) { 
    var item = data[i]; 
    var label = item["name"]; 
    var parentid = item["parent_id"]; 
    var id = item["id"]; 
    var url = item["url"]; 

    if (items[parentid]) { 
     var item = { parentid: parentid, label: label, url: url, item: item }; 
     if (!items[parentid].items) { 
      items[parentid].items = []; 
     } 
     items[parentid].items[items[parentid].items.length] = item; 
     items[id] = item; 
    } 
    else { 
     items[id] = { parentid: parentid, label: label, url: url, item: item }; 
     source[id] = items[id]; 
    } 
} 
return source; 
} 

var buildUL = function (parent, items) { 
$.each(items, function() { 
    if (this.label) { 
     var li = $("<li class='js-menu'>" + "<a href='"+ this.url +"'>" + this.label + "  </a></li>"); 
     li.appendTo(parent); 
     if (this.items && this.items.length > 0) { 
      var ul = $("<ul class='dropdown-menu js-menu'></ul>"); 
      ul.appendTo(li); 
      buildUL(ul, this.items); 
     } 
    } 
}); 
} 
var source = builddata(); 
var ul = $(".json-menu"); 
ul.appendTo(".json-menu"); 
buildUL(ul, source); 
//add bootstrap classes 
if ($(".json-menu>li:has(ul.js-menu)")) 
{ 
$(".json-menu>li.js-menu").addClass('dropdown-submenu'); 
} 
if ($(".json-menu>li>ul.js-menu>li:has(> ul.js-menu)")) 
{ 
$(".json-menu>li>ul.js-menu li ").addClass('dropdown-submenu'); 
} 
$("ul.js-menu").find("li:not(:has(> ul.js-menu))").removeClass("dropdown-submenu"); 
});

부트 스트랩 클래스와 드롭 다운을 생성 JS입니다 bootsrap 클래스

<ul class="dropdown-menu json-menu"> 
</ul>

라이브 예제를 볼 수 here

출처

2013-06-07 13:55:32 Dmitry

구현하려고 할 때마다 오류가 발생합니다. "잡히지 않은 HierarchyRequestError : 'appendChild'를 'Node'에 실행하지 못했습니다. 새 자식 요소에 부모가 포함되어 있습니다." 이것은 자신에게 ul을 추가하지 않습니까? var ul = $ (".json-menu"); ul.appendTo (".json-menu"); –

트위터 부트 스트랩 아약스 드롭 다운

답변

관련 문제