个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试使用 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"
}
}
]}
几天来我一直在网络上徒劳地搜索解决方案，需要尽快继续这个元素。非常感谢任何帮助。谢谢。
最佳答案
您需要:
基本上发生的事情是 $("#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
我正在尝试获取客户端的 IP 地址和 GPS 坐标。使用 jQuery，我有这个: $.getJSON("http://jsonip.appspot.com/", function(data) {
这个问题已经有答案了: Why does JQuery.getJSON() have a success and a done function? (2 个回答) 已关闭 6 年前。 我想知道这两个代
所以首先，是的，我知道有几个答案，但没有一个能够解决我的问题。首先我将展示我的代码HTML: Shop
假设我有以下 JavaScript: (function($) { $.getJSON(url, function(data) { $.each(data.rows, function(i
是否可以使用 jQuery 在另一个 getJSON 请求中使用 getJSON 请求？ 像这样: // Population the Requests List // jQuery AJAX cal
我有以下代码，该代码已针对此问题进行了简化。基本上我有一个循环，在每次迭代中调用 jquery getJSON 函数，调用 API 端点来获取一些天气数据。问题是，当 getJSON 请求被触发时，我
我有一个使用 getJSON 的函数，但它没有像我预期的那样工作。 function balbla(name, param) { $.getJSON("/blabla.json?nam
我有一段代码，例如: $.getJSON("http://mysite.org/polls/saveLanguageTest?url=" + escape(window.location.href)
我正在使用jquery.getJSON() ，但我不知道如何进行错误处理。这些是我需要处理的一些情况。 1)如果返回的数据为null怎么办？ 2)如果返回的数据不能解析json怎么办？ 3) 如果返回
我正在通过参与一个测试项目(包括 SubSonic 和 jQuery)来学习 asp.net mvc。 我遇到的问题是，每次我想要返回的不仅仅是简单字符串(例如 Json 对象)时，我都会遇到困难，因
执行跨域查询，如果运行的URL不可用(404)，如何执行某个功能？我尝试这样的事情: $.getJSON({ url:'example.php?callback=?', statusCode: { 4
我在 jQuery 中搜索了相关主题，但没有找到任何方法来解决我的问题。 $(document).ready(function(){ $("#inputForm").submit(functi
当调用 yahoo Web 服务 (http://boss.yahooapis.com/ysearch) 返回数据集时，是否可以设置超时并在超时后退出例程？ jQuery.getJSON("http:
我正在使用 jQuery getJSON() 函数。这个函数获取数据没有问题。但有时等待，等待等待......我的加载栏在页面中心显示加载加载。 所以 jQuery ajax() 函数有一个超时变量。
我有一个 html 代码: asd $('button').click( function() { $.getJSON('/schedule/test/', function
目标:我所追求的是每次在数据库中添加某些内容时(在 $.ajax 到 Submit_to_db.php 之后)，从数据库获取数据并刷新 main.php(通过 draw_polygon 更明显)。 所
我已经阅读了文档并用谷歌搜索了此内容，但没有看到问题所在。我正在尝试从本地 json 文件获取一些数据。我已在 JSONLint 验证了响应数据 代码 $(document).ready(functi
我在json.getJSON方法上遇到麻烦。这是我当前的代码: var jqxhr = $.getJSON("http://127.0.0.1:5002?callback=?", function()
我需要进行跨域请求，并且 getJSON 有问题。 $.getJSON("http://usr:pwd@10.0.1.xx/cgi-bin/remote/request.cgi?m=json&r=gr
这个问题已经有答案了: How do I return the response from an asynchronous call? (42 个回答) 已关闭 8 年前。 这是我的问题 我有一个充满
我是一名优秀的程序员,十分优秀！