문제 jquery 대화할 때 사용하여 themeroller css
-
09-06-2019 - |
문제
이 데모 에 대한 jquery ui 대화 모두를 사용하여 플 테마입니다.내가 원하는 사용자 정의 테마,그래서 내가 사용하는 themeroller 를 생성하 css 파일입니다.내가 그것을 사용하는 경우,모든 것을 듯 하지만 정상적으로 작동 하는 나중에 내가 발견할 수 없는 어떤 제어 입력 요소에 포함되는 대화입니다(i.e 할 수 없는 형식으로 텍스트 필드,을 확인할 수 없습니다란).추가 조사를 밝혔다 이런 경우 설정 대화 특성"모달하는"사실이다.이 일어나지 않는다면 내가 사용하는 식물 테마입니다.
여기에 js file:
topMenu = {
init: function(){
$("#my_button").bind("click", function(){
$("#SERVICE03_DLG").dialog("open");
$("#something").focus();
});
$("#SERVICE03_DLG").dialog({
autoOpen: false,
modal: true,
resizable: false,
title: "my title",
overlay: {
opacity: 0.5,
background: "black"
},
buttons: {
"OK": function() {
alert("hi!");
},
"cancel": function() {
$(this).dialog("close");
}
},
close: function(){
$("#something").val("");
}
});
}
}
$(document).ready(topMenu.init);
다음은 html 을 사용하는 식물 테마
<!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=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
다음은 html 을 사용하는 다운로드 themeroller 테마
<!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=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
당신이 볼 수있는,단지 참조 css 파일과 클래스 이름을 다르다.사람이 단서가 무엇이 잘못 되었나요?
@데이비드:나는 그것을 시도하며,그것은 작동하지 않는 것(도에 FF 또는 IE).I tried 인라인 css:
style="z-index:5000"
고 나도 그것을 참조하는 외부 css file:
#SERVICE03_DLG{z-index:5000;}
그러나 이러한 일이다.나는 누락에서 뭔가를 당신이 무엇을 제안했?
편집:
를 해결에 의해 brostbeef!
이었을 때부터 원래 사용하여물,나는 실수로 내가 지정 등 특성이 있습니다.집,이것은 진실한 경우 실제로 사용하는 식물 테마(으로 샘플에서).사용하는 경우에는 사용자 정의 테마를 지정하여 클래스 속성이 발생하는 이상한 행동을 했다.
해결책
내가 생각하기 때문에 그것이 당신의 클래스가 다릅니다.
<div id="SERVICE03_DLG" class="flora">
(flora)
<div id="SERVICE03_DLG" class="ui-dialog">
(주)
심지어 식물 테마,당신은 여전히 사용하 ui 대화하는 클래스로 정의합니다.
나는 조동하기 전에 나는 본 적이 없더라도 클래스를 정의에 태그가 있습니다.jqueryui 의해야 할 수 있습니다.
시애 클래스의 특성하거나 사용하는"ui 대화"클래스입니다.
다른 팁
재생 후에서 방화,를 추가하는 경우 z-index 특성보다 큰 1004 기본 div id"SERVICE03_DLG",그것은 작동합니다.나는 그것에게 무언가가 매우 높은,다음과 같 5000,단지 확인합니다.
나는 확실하지 않다 그것이 무엇인지에 themeroller CSS 는 경우 종종 이런 문제가 발생합니다.그들은 아마도 변경하거나 무시되는 위치의 특성상 div 는 변화입니다.
나를 구현했는 themeroller 테마로 대화하고 그것을 밝혀졌 이 themeroller CSS 으로 작동하지 않 공식 jQuery!특히 대화상자의 탭이,그들은 수정 요소의 클래스에서는 공식 jquery 것들입니다.는 여기를 참조하십시오:http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/
사용자의 코멘트:
3)생성된 테마는 내가 다운로드한 것 불완전한 것- 려고 시도하면 그것을 사용하는 내 탭 (는 작업으로 식물 테마,코드 동일한 설명서 예)하지 스타일의 탭으로
을 실행하로 3 줄 알았 갇히고 있을 되돌리려면 사용 "flora"...내가 있기 때문에 의해 발견 독서의 소스 코드"demo" 파일이 있는 경우 조정 html 고 이 < li>항목을 사용에 대한 내 탭 "ui-탭 nav-품목"등 다음 작동합니다.
테마에 의해 생성된 themeroller 가 따라서 불행하게도 완전하지 않습니다.는 경우 탭은 물건은 불완전하고,그것이 나를 궁금 다른 무엇이 완전하지 않습니다.그 오히려 실망입니다.:(
다음 themeroller 개발자의 코멘트:
3)우리는 우리를 살펴 보겠습니다.당신은 맞는 해당 클래스 추가해야에 의하여 플러그인입니다.지금은 하지만,그것은 아마 해치지 않을 것 많은 매개 변수를 추가하기만 하면 태그 그래서 당신 을 사용할 수 있습 themeroller 다.우리는 그것을 확인합니다,하지만.나는 생각을 우리의 선택이 될 수 기반의 부모 ui-탭을 선택기 대신 그러나 내가 생각하 우리가 하려고 했던 사용하지 않는 요소에 우리의 선택.고려 그것은에서 할 일 목록
사람,이것은 좋은 일입니다.나가려고 하는 무리의 물건에 이러한 두 개의 페이지입니다.당신이 노력했지만 떠나 CSS 모두 노력하고 모두 다음 페이지?내가 사용하는 방화범을 제거하 CSS 에서 헤더 모두에서 페이지를 입력은 여전히 일에 하나가 아닌 다른-그러나,난다고 생각하는 경향이 불을 지르지 않는 완전히 제거 CSS 에서 렌더링,당신은 다른 결과를 얻을 경우에 당신은 실제로 그것을 제거에서의 코드입니다.
또한 발견할 수 있는 텍스트를 붙여넣을 텍스트 상자에 마우스를 사용하여-그것은 그냥 받아들이지 않을 키보드로 입력합니다.거기에있을 것 같지 않는 모든 이벤트 처리기에 그것을 방해하는습니다.