1
주기표 요소를 기반으로 한 작은 웹 페이지를 만드는 중입니다. 요소의 사각형을 클릭하면 대화 상자 화합물리스트를 보여주기 위해 팝업됩니다. 나는 jQuery의 ThemeRoller에서 생성 한 사용자 정의 테마로 jQuery 대화 상자를 표시하는 문제에 봉착했다. 단지 왼쪽 상단 모서리에 일반 텍스트로 표시되며, 내가 아는 한 관련 JS 및 CSS 파일에 필요한 링크.jQuery 사용자 정의 UI 대화 상자가 작동하지 않습니다.
미리 작업 버전이 있었지만 대화 상자에 여러 테마를 사용하여 (사각형에 색상을 지정하기위한 노력으로) 계획을 세웠으며 이제는 모든 것을 던집니다. 루프. 여러 주제를 사용하는 것과 관련하여 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>
자바 스크립트 콘솔에 오류가 있습니까? – Barmar
코드가 텍스트로 나타나고 있기 때문에 jQueryUI css를 찾을 수 없다는 것을 의미합니다. 나는 네가 그것을 참조하고있는 것을 보았다. 그러나 그 길은 엉망진창이다. –
는'$ (". dialog"). hide();'를 꺼냅니다. 위젯이 활성화되면 위젯의 숨겨진 부분은 플러그인에 의해 내부적으로 처리되며이를 관리하기 위해'autoOpen : false'가 있습니다. – charlietfl