使用 themeroller css 时 jquery 对话框出现问题
https://stackoverflow.com/questions/45600
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
这 演示 对于 jquery ui 对话框，全部使用“flora”主题。我想要一个定制的主题，所以我使用themeroller生成一个css文件。当我使用它时，一切似乎都工作正常，但后来我发现我无法控制对话框中包含的任何输入元素（即无法在文本字段中输入内容，无法选中复选框）。进一步的调查显示，如果我将对话框属性“modal”设置为 true，就会发生这种情况。当我使用植物主题时，不会发生这种情况。
这是js文件：
topMenu = {
init: function(){
$("#my_button").bind("click", function(){
$("#SERVICE03_DLG").dialog("open");
$("#something").focus();
});
$("#SERVICE03_DLG").dialog({
autoOpen: false,
modal: true,
resizable: false,
title: "my title",
overlay: {
opacity: 0.5,
background: "black"
},
buttons: {
"OK": function() {
alert("hi!");
},
"cancel": function() {
$(this).dialog("close");
}
},
close: function(){
$("#something").val("");
}
});
}
}
$(document).ready(topMenu.init);
这是使用 flora 主题的 html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
这是使用下载的 themeroller 主题的 html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
可以看到，只是引用的css文件和类名不同。有人知道可能出了什么问题吗？
@大卫：我尝试了一下，似乎不起作用（无论是在FF还是IE上）。我尝试过内联CSS：
style="z-index:5000"
我也尝试过引用外部 css 文件：
#SERVICE03_DLG{z-index:5000;}
但这些都不起作用。我在你的建议中遗漏了什么吗？
编辑：
通过brostbeef解决！
由于我最初使用的是 flora，所以我错误地认为我必须指定一个类属性。事实证明，只有当您实际使用植物主题时（如示例中所示），这才是正确的。如果您使用自定义主题，指定类属性会导致奇怪的行为。
解决方案
我认为这是因为你们的课程不同。
<div id="SERVICE03_DLG" class="flora"> （植物区系）
<div id="SERVICE03_DLG" class="ui-dialog"> （风俗）
即使使用 flora 主题，您仍然可以使用 ui-dialog 类将其定义为对话框。
我以前做过模态，但从未在标签中定义过类。jQueryUI 应该为你处理好这个问题。
尝试删除 class 属性或使用“ui-dialog”类。
其他提示
在 Firebug 中使用此功能后，如果您将大于 1004 的 z-index 属性添加到默认 div（id 为“SERVICE03_DLG”），那么它将起作用。为了确定起见，我会给它一个非常高的值，比如 5000。
我不确定 themeroller CSS 中是什么导致了这个问题。他们可能更改或忽略了目标 div 的位置属性，目标 div 变成了对话框。
我尝试用对话框和选项卡实现 themeroller 主题，结果发现 themeroller CSS 不适用于官方 jQuery！特别是对于对话框和选项卡，他们修改了官方 jquery 的元素类。看这里：http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/
一位用户的评论：
3）我下载的生成主题似乎是不完整的 - 当我尝试使用它时，我的选项卡（与植物群主题一起使用，与文档示例相同的代码）不会像选项卡一样造型
碰到3后，我以为自己被卡住了，必须使用“ Flora”还原……从那以后，我通过阅读“演示”文件的源代码发现，如果我调整了HTML，并给出了我的<li>项目使用我的标签“ UI-tabs-nav-item”类，然后将起作用。
因此，不幸的是，主题卷生成的主题是不完整的。如果标签的内容不完整，这让我想知道还有什么不完整。这很令人沮丧。:(
接下来是 themeroller 开发者的评论：
3）我们会看看这个。正确的是，这些类应该由插件添加。但是，就目前而言，将它们添加到标记中可能不会有太大伤害，以便您可以使用Themeroller主题。不过，我们会检查一下。我认为我们的选择器可以基于父ui-tabs选择器，但我认为我们正在尝试不使用选择器中的元素。在待办事项清单上考虑
伙计，这是一件好事。我尝试在这两页上做很多事情。您是否尝试过完全忽略 CSS 并尝试两个页面？我使用 Firebug 从两个页面的标题中删除了 CSS，并且输入仍然在一个页面上有效，而在另一个页面上无效 - 但是，我倾向于相信 Firebug 并没有完全从渲染中删除 CSS，并且您如果您实际上从代码中删除它，将会得到不同的结果。
我还发现您可以使用鼠标将文本粘贴到文本框中 - 它只是不接受键盘输入。不过，似乎没有任何事件处理程序会干扰这一点。
