元素の周期表に基づいて小さな Web ページを作成しようとしています。元素の四角形をクリックすると、ダイアログ ボックスがポップアップして化合物のリストが表示されるようにしようとしています。 . jQuery の ThemeRoller で生成したカスタム テーマを使用して jQuery ダイアログ ボックスを表示する際に問題が発生しましたが、左上隅にプレーン テキストとして表示されるだけです。関連する JS および CSS ファイルへの必要なリンク。
私は以前に動作するバージョンを持っていましたが、ダイアログ ボックスに複数のテーマを使用する計画もあり (四角形に色分けするために)、基本的にすべてをループに投げ込んだ実装を試みています。複数のテーマの使用に関する Filament の投稿へのリンク ( http://filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/ )は言うまでもなく、ここにある他のさまざまな関連する質問をスキャンしても無駄であることがわかりました。現在、アクティブなテーマは 1 つだけです。
これがコードです - サイズが不格好で申し訳ありません (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>