Question

我正在创建一个基于元素周期表的小网页，我正在努力使它如果要点击一个元素的方块，会弹出一个对话框来显示一个化合物清单。我遇到了一个问题，显示了一个jQuery对话框，其中包含我在jQuery的ThemeRoller中生成的自定义主题，但是它只是在左上角显示为纯文本，据我所知，我已经提供了必要的链接到相关的JS和CSS文件。

我事先确实有一个工作版本，但我也有计划在对话框中使用多个主题（在努力使它们为方块进行颜色编码），现在尝试实现它实际上已经抛出所有内容一个循环。即使在这里扫描各种其他相关问题也已证明毫无结果，更不用说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>

Answer 1

看起来Scott Mermelstein的理论可能是正确的 - 你不包括你需要的库。这是使用不同库路径的代码的jsfiddle。您的代码是（减去标题的删除）未触及并按预期工作：

http://jsfiddle.net/2Cpnd/1/

用于上述小提琴的外部参考是：

//code.jquery.com/jquery-1.10.1.js

//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/le-frog/jquery-ui.min.css

//code.jquery.com/ui/1.10.3/jquery-ui.js

我建议将内部文件（jquery-ui.css，jquery-ui.js和jquery-1.10.2.js）中的链接替换为外部链接，以查看是否可以解决问题。

jQuery自定义UI对话框无法正常工作

1 个答案: