有没有从json构建下拉菜单的替代方案？

Question

最近看到一个来自json的构建表单的项目

https://github.com/mozilla-services/react-jsonschema-form

我需要知道是否有办法从json做菜单

我需要构建一个菜单，其中包含使用mouseenter和mouseleave激活的简单过程

请帮帮我

Answer 1

您需要创建自己的界面和控制器。我会尝试提出一个想法。创建从代码中添加html div标签的功能。

像这样创建json或从文件加载（相同的人员） - （如果你想从文件或远程服务器中获取json，请使用httprequest）：

// html代码

<div id="menuHolder" style="width:200px;height:60px" ></div>

// generic from code example
var MENU_DATA = {
"DisplayText" : "Select drop menu" , 
 items : [ "select1" , "select2" , ... , "selectn"]

};

function refreshMenu(){
// clear holder 
document.getElementById("menuHolder").innerHTML = "";
for (var x=0;x<MENU_DATA.items.length;x++) {
  // i use simple method for creating divs but this is better 
  // look at [Answer for nice creating dom elements][1]
  document.getElementById("menuHolder").innerHTML += "<div id='id_"+x+"' onclick='CLICK_METHOD("+x+")' > "+ MENU_DATA.items[x] +" </div>";

}
}


  function CLICK_METHOD (IndexOfClicedItem) {

          if (IndexOfClicedItem == 1) {

                 CALL_EVENT_FOR_SELECT1() 

            }
   }

// For working like drop menu you will need to add click event on holder .

  // Create var for status OPENED / CLOSED menu
  // On open make height for example 500px on close back to 60px 
  // Need css for overflow hidden for holder div ...

我希望这一切都是2小时的工作......   调用结束refreshMenu（），你也可以随时编辑它只需调用refreshMenu（）来使新的html看起来。

dinamic添加div的样式也需要样式设置，如宽度：100％   尝试绝对/相对。使用一个特殊选择列表，它们将附加单击的放置项目中的文本。

Answer for nice way of creating dom elements