CSS와의 jQuery UI 대화 상자 내에서 요소를 테마로… 어떻게?
문제
이전 버전은 사람들이 이해하기에는 너무 어려웠 기 때문에 HTML, CSS 및 JavaScript가 결합되어 있습니다.
<!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=utf-8">
<title>test title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test').dialog({ autoOpen: false, modal: true });
$("#test-link").click( function() {
$('#test').dialog('open');
});
});
</script>
<style type="text/css">
div#main div#test label {
display: block;
}
div#main div#test input {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="main">
<p><a href="#" id="test-link">test</a><p>
<div id="test" title="Submit Bug or Feature Request">
<form>
<label for="test_desc">Short Description:</label>
<input type="text" name="test_desc" id="test_desc" value="" />
<input type="submit" name="" value="Submit" />
</form>
</div>
</div>
</body>
</html>
대화 상자는 잘 작동하지만 CSS는 그렇지 않습니다. 왜 아이디어가 있습니까?
해결책
jQuery는 DOM 트리에서 대화 상자의 div를 움직여 다른 사람들에게 랩핑합니다. 따라서 CSS 선택기는 작동하지 않습니다. 위의 예를 사용하면 다음과 같은 작업을 수행해야합니다.
div.ui-dialog div#test label {
display: block;
}
div.ui-dialog div#test input {
padding-left: 100px;
}
다른 팁
CSS는 작동해야합니다. CSS 규칙이 계단식에 관한 문제 일 수 있습니다. "#dialog div#test 레이블"과 같은 이러한 규칙을 적용하는보다 구체적인 선택기가 있습니까? 나머지 HTML/CSS가 없으면 세부 사항을 지적하는 것은 불가능합니다. Firebug를 받고 해당 요소에 어떤 규칙이 적용되는지 확인하십시오.
제휴하지 않습니다 StackOverflow