demos для jQuery ui all используют тему «флора». Я хотел настроить тему, поэтому я использовал themeroller для генерации файла css. Когда я его использовал, все, казалось, работало нормально, но позже я обнаружил, что не могу контролировать какой-либо элемент ввода, содержащийся в диалоговом окне (т. Е. Не может вводить текстовое поле, не может проверять флажки). Дальнейшее исследование показало, что это произойдет, если установить атрибут диалога «модальный» в true. Этого не происходит, когда я использую тему флоры.Проблема с диалогом jquery при использовании themeroller css
Вот файл JS:
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 и имена классов различаются. Кто-нибудь знает, что может быть неправильным?
@David: Я пробовал, и он не работает (ни на FF, ни на IE). Я пробовал встроенный CSS:
style="z-index:5000"
, и я также попробовал ссылки внешний CSS-файл:
#SERVICE03_DLG{z-index:5000;}
Но ни одна из этих работ. Я что-то пропустил в том, что вы предложили?
Редактировать:
Решите brostbeef!
Поскольку я изначально использовал флору, я ошибочно предположил, что мне нужно указать атрибут класса. Оказывается, это справедливо только тогда, когда вы фактически используете тему флоры (как в образцах). Если вы используете настраиваемую тему, указание атрибута класса вызывает это странное поведение.
У вас все еще есть эта проблема ?? – MDCore 2008-10-16 04:25:47
Не знаете, почему вы удалили свой код и заменили ссылки ... которые теперь сломаны так неспособны ссылаться. – clairestreb 2014-12-24 21:51:28