我正在尝试使用 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"
}
}
]}
这几天我一直在网上徒劳地寻找解决方案，需要尽快继续该元素。非常感谢任何帮助。谢谢。
最佳答案
您需要:
- 将初始化 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>
关于jQuery UI CSS 样式未应用于使用 getJSON 生成的菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13692927/