jQuery UI CSS样式不适用于使用getJSON生成的菜单栏

我正尝试使用JSON数据生成jQueryUI菜单栏。 JSON正在被正确解析为有效的HTML;然而，菜单栏显示为无风格的无序列表，而不是作为http://view.jqueryui.com/menubar/demos/menubar/default.html上看到的最大菜单的风格菜单栏。请注意，此时将JSON数据转换为HTML的例程不会比一个菜单级更深，所以故意不读取子菜单选项（打开，保存，关闭等）。jQuery UI CSS样式不适用于使用getJSON生成的菜单栏

出于某种原因，如果我硬编码完全相同的HTML作为由jQuery的方法menuBar.jsp产生下面的东西，菜单栏造型显示就好了。

这里是主网页（appFrameNew.jsp）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head>  

<title>Menu Test</title> 

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" /> 
    <link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menu.css" /> 
    <link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menubar.css" /> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>  
    <script src="http://view.jqueryui.com/menubar/ui/jquery.ui.core.js" type="text/javascript"></script> 
    <script src="http://view.jqueryui.com/menubar/ui/jquery.ui.widget.js" type="text/javascript"></script> 
    <script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menu.js" type="text/javascript"></script> 
    <script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menubar.js" type="text/javascript"></script> 
    <script src="http://view.jqueryui.com/menubar/ui/jquery.ui.position.js" type="text/javascript"></script> 

    </head> 
    <body> 

    <div id="layout" class="layout"> 

     <jsp:include page="menuBar.jsp" flush="true" /> 

    </div> 

    </body> 
    </html>

这里是menuBar.jsp：

<div class="demo"></div> 

<script type="text/javascript"> 
    function select(event, ui) { 
     if (ui.item.text() == 'Quit') { 
      $(this).menubar('destroy'); 
     } 
    } 
    $(function() { 
     $("#bar1").menubar({ 
      position: { 
       within: $(".demo").add(window).first() 
      }, 
      select: select 
     }); 
    }); 

$.getJSON('menuBarTestJSON.json', function(data) { 
    var output='<ul id="bar1" class="menubar">'; 
    for (var i in data.menuOptions) { 
     output+='<li><a href="#">' + data.menuOptions[i].menubarItem + '</a></li>'; 
    } 
    output+="</ul>"; 
    $(".demo").html(output); 
}); 

</script> 

<ul id="bar1" class="menubar"> 
    <li> 
     <a href="#File">File</a> 
     <ul> 
      <li><a href="#Open">Open</a> 
      <li><a href="#Save">Save</a></li> 
     </ul> 
    </li> 
</ul>

最后，menuBarTestJSON.json：

{"menuOptions":[ 
    { 
     "menubarItem":"File", 
     "menuElement": { 
      "option":"Open", 
      "option":"Save", 
      "option":"Close", 
      "option":"Quit" 
     } 
    } 
]}

我一直在徒劳地搜索网络解决方案已经有几天了，需要继续前进在这个项目中尽快。任何援助非常感谢。谢谢。

来源

2012-12-03 Mike P.

你需要：

添加您的代码初始化jQuery UI的菜单到的getJSON 回调或
使用http://api.jquery.com/live/要监视更改到DOM和初始化jQuery UI的菜单

基本上发生了什么事是$（“＃bar1”）。menubar在踢了一次后就绪。但是当你更新它的内容时，它不知道它需要重新启动。你必须手动要求它重新初始化菜单，或让它监视变化。

实施例：

<script type="text/javascript"> 
    function select(event, ui) { 
     if (ui.item.text() == 'Quit') { 
      $(this).menubar('destroy'); 
     } 
    } 
    function initMenu() { 
     $("#bar1").menubar({ 
      position: { 
       within: $(".demo").add(window).first() 
      }, 
      select: select 
     }); 
    } 
    $(function() { initMenu(); }); 

    $.getJSON('menuBarTestJSON.json', function(data) { 
     var output='<ul id="bar1" class="menubar">'; 
     for (var i in data.menuOptions) { 
      output+='<li><a href="#">' + data.menuOptions[i].menubarItem + '</a></li>'; 
     } 
     output+="</ul>"; 
     $(".demo").html(output); 
     initMenu(); 
    }); 

</script>

来源

2012-12-03 23:12:41 morewry

美丽。感谢您的解决方案和伟大的解释！ –

jQuery UI CSS样式不适用于使用getJSON生成的菜单栏

回答

相关问题