个人中心
gpt4 book ai didi

jQuery UI CSS 样式未应用于使用 getJSON 生成的菜单栏

转载 作者：行者123 更新时间：2023-11-28 11:43:56 26 4
gpt4 key购买 nike

我正在尝试使用 JSON 数据生成一个 jQueryUI 菜单栏。 JSON 被正确解析为有效的 HTML；但是，菜单栏显示为无样式的无序列表，而不是像在 http://view.jqueryui.com/menubar/demos/menubar/default.html 上看到的顶部菜单栏那样显示为样式化的菜单栏。 .请注意，此时将 JSON 数据转换为 HTML 的例程不会超过一个菜单级别，因此有意不读取子菜单选项(打开、保存、关闭等)。

出于某种原因，如果我在 menuBar.jsp 中硬编码与下面的 jQuery 方法生成的完全相同的 HTML，则菜单栏样式显示得很好。

这是主页面(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"
        }
    }
]}

几天来我一直在网络上徒劳地搜索解决方案，需要尽快继续这个元素。非常感谢任何帮助。谢谢。

最佳答案

您需要:

  1. 将初始化 jQuery UI 菜单的代码添加到 getJSON回调或
  2. 使用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>

关于jQuery UI CSS 样式未应用于使用 getJSON 生成的菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13692927/

26 4 0
文章推荐： javascript - 重新校准使用 css 变换的 x 和 y 偏移
文章推荐： javascript - Javascript 中的两个 Sum Leetcode - 代码看起来正确，但 Leetcode 说它是错误的
文章推荐： ios - 奇怪的构建错误 : Facebook Swift SDK not building with Carthage in Blank project
文章推荐： html - 如何将 div 元素放置在屏幕的右侧