1
我正在创建基于元素周期表的一个小网页的过程中，我试图让它如此，如果一个人点击一个元素的正方形，一个对话框会弹出显示化合物列表。我遇到了一个显示jQuery对话框的问题，该对话框中包含我在jQuery的ThemeRoller中生成的自定义主题，但是 - 它只是在左上角显示为纯文本，据我所知，我提供了必要的链接到相关的JS和CSS文件。jQuery自定义用户界面对话框不工作
我的确有一个工作版本，但我也有计划在对话框中使用多个主题（以使它们为正方形进行颜色编码），现在试图实现基本上抛出所有内容为一个循环。即使通过这里的其他各种相关问题进行扫描也证明是徒劳无益的，更不用说与Filament关于使用多个主题（http://filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/）发布信息的链接。目前我只有一个主题活跃。
这里是代码 - 我的笨拙的大小道歉（有100多个单元格的表不算少...）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>The Periodic Table of Elements</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" href="js/jquery-ui-1.10.3/themes/blue/jquery-ui.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
</head>
<body>
<h3>The Periodic Table of Elements</h3>
<div class="container">
<table width="100%" align="center" cellspacing="1px" cellpadding="1px">
<tr>
<th><p>Group<br/>Period</p></th>
<th><p>1</p></th>
<th><p>2</p></th>
<th><p>3</p></th>
<th><p>4</p></th>
<th><p>5</p></th>
<th><p>6</p></th>
<th><p>7</p></th>
<th><p>8</p></th>
<th><p>9</p></th>
<th><p>10</p></th>
<th><p>11</p></th>
<th><p>12</p></th>
<th><p>13</p></th>
<th><p>14</p></th>
<th><p>15</p></th>
<th><p>16</p></th>
<th><p>17</p></th>
<th><p>18</p></th>
</tr>
<tr>
<td id="number"><p><b>1</b></p></td>
<td>
<div class="element" id="hydrogen" style="background: #6699FF;">
<div class="number"><h6>1</h6></div>
<div class="symbol"><h4>H</h4></div>
<div class="weight"><h5>1.008</h5></div>
</div>
</td>
<td colspan="16"><p>Click on an element square to view associated compounds:</p></td>
<td>
<div class="element" id="helium" style="background: #FFCC33;">
<div class="number"><h6>2</h6></div>
<div class="symbol"><h4>He</h4></div>
<div class="weight"><h5>4.0026</h5></div>
</div>
</td>
</tr>
<tr>
<td id="number"><p><b>2</b></p></td>
<td>
<div class="element" id="lithium" style="background: #6699FF;">
<div class="number"><h6>3</h6></div>
<div class="symbol"><h4>Li</h4></div>
<div class="weight"><h5>6.94</h5></div>
</div>
</td>
<td>
<div class="element" id="beryllium" style="background: #6699FF;">
<div class="number"><h6>4</h6></div>
<div class="symbol"><h4>Be</h4></div>
<div class="weight"><h5>9.012</h5></div>
</div>
</td>
<td colspan="10"></td>
<td>
<div class="element" id="boron" style="background: #FFCC33;">
<div class="number"><h6>5</h6></div>
<div class="symbol"><h4>B</h4></div>
<div class="weight"><h5>10.81</h5></div>
</div>
</td>
<!-- I edited out the rest because it went 2000 characters ABOVE the limit...
but it should supply the general idea. -->
</tr>
</table>
</div>
<div class="dialog" title="Element Info:">
<p>Content</p>
</div>
<script>
$(document).ready(function() {
var blue = $(".dialog");
blue.dialog(
{
width: 400,
height: 500,
autoOpen: false,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
$(".dialog").hide();
$(".element").click(function(){
$(".dialog").dialog("open");
});
});
</script>
</body>
</html>
您是否在Javascript控制台中发现任何错误？ – Barmar
基于您的代码显示为文本的事实，这意味着未找到jQueryUI css。我看到你在引用它，但是有没有机会把路径搞砸了？ –
取出'$（“。dialog”）。hide（）;'。一旦小部件被启用，需要隐藏的部件将由插件内部处理，并且您有'autoOpen：false'来管理它。在启用它们之后总是使用小部件API – charlietfl