Проблема с диалоговым окном jquery при использовании themeroller css
демонстрации для диалогового окна jquery ui используют тему «флора». Мне нужна была настраиваемая тема, поэтому я использовал themeroller для создания файла css. Когда я его использовал, казалось, что все работает нормально, но позже я обнаружил, что не могу контролировать какой-либо элемент ввода, содержащийся в диалоговом окне (т.е. не могу вводить текст в текстовое поле, не могу устанавливать флажки). Дальнейшее расследование показало, что это происходит, если я установил для атрибута диалога «модальный» значение true. Этого не происходит, когда я использую тему флоры.
Вот файл 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!
Поскольку я изначально использовал флору, я ошибочно предположил, что мне нужно указать атрибут класса. Оказывается, это верно только тогда, когда вы действительно используете тему флоры (как в примерах). Если вы используете настроенную тему, указание атрибута класса вызывает такое странное поведение.
Не уверен, почему вы удалили свой код и заменили ссылки ... которые теперь не работают, поэтому на них невозможно ссылаться.
ой, совсем забыл об этом. Я посмотрю, смогу ли я отредактировать сообщение, чтобы вернуть код.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
После игры с этим в Firebug, если вы добавите атрибут z-index больше 1004 к вашему div по умолчанию, id "SERVICE03_DLG", тогда он будет работать. Я бы дал ему что-то очень высокое, например 5000, на всякий случай.
Я не уверен, что именно в CSS Themeroller вызывает это. Вероятно, они изменили или проигнорировали атрибут позиции целевого div, который он превращает в диалог.
Чувак, это хороший. Я пробовал делать кучу вещей на этих двух страницах. Вы пробовали просто полностью отказаться от CSS и попробовать обе страницы? Я использовал Firebug для удаления CSS из заголовка на обеих страницах, и ввод по-прежнему работал на одной, а не на другой, но я склонен полагать, что Firebug не полностью удаляет CSS из рендеринга, и вы будут разные результаты, если вы действительно удалите его из кода.
Я также обнаружил, что вы можете вставлять текст в текстовое поле с помощью мыши - он просто не принимает ввод с клавиатуры. Однако, похоже, на нем нет обработчика событий, который бы этому мешал.
I tried implementing a themeroller theme with a dialog and tabs and it turns out that CSS themeroller не работает с официальным jQuery! Especially for dialog and tabs, they modified the element classes from the official jquery ones. See here: http://filamentgroup.com/lab/introduction_themeroller_design_download_custom_themes_for_jquery_ui/
Комментарий пользователя:
3) the generated theme that I downloaded seems to be incomplete - when I attempt to use it my tabs (which work with the flora theme, code identical to the documentation example) do not get styled as tabs
Having run into 3 I thought I was stuck and would have to revert using “flora"… I have since discovered by reading the source code of the “demo” file that if I adjust my html and give the < li> items I’m using for my tabs the “ui-tabs-nav-item” class then it will work.
The theme generated by themeroller is thus unfortunately incomplete. If the tabs stuff is incomplete, it makes me wonder what else is incomplete. It was rather frustrating. :(
за которым следует комментарий разработчиков themeroller:
3) We’ll take a look at that. You’re right that those classes should be added by the plugin. For now though, it probably wouldn’t hurt much to just add them to your markup so you can use themeroller themes. We’ll check it out, though. I think our selectors could be based off of the parent ui-tabs selector instead, but I think we were trying not to use elements in our selectors. Consider it on the to-do list
Я думаю, это потому, что у вас классы разные.
<div id = "SERVICE03_DLG" class = "flora"> (флора) <div id = "SERVICE03_DLG" class = "ui-dialog"> (на заказ)
Даже с темой флоры вы все равно будете использовать класс ui-dialog, чтобы определить его как диалог.
Раньше я делал модальные окна и никогда даже не определял класс в теге. jQueryUI должен позаботиться об этом за вас.
Попробуйте избавиться от атрибута class или используйте класс "ui-dialog".
Спасибо! Оказывается, это проблема с флорой. Я отредактирую вопрос, чтобы отразить это.
У вас все еще есть эта проблема?