Проблема с диалоговым окном jquery при использовании CSS themeroller.

StackOverflow https://stackoverflow.com/questions/45600

Вопрос

А демо для диалогового окна 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>&nbsp;<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>&nbsp;<input name="something" id="something" type="text" maxlength="20" size="24">
</div>

</body>
</html>

Как видите, различаются только ссылки на CSS-файл и имена классов.Кто-нибудь знает, что может быть не так?

@Дэйвид:Я попробовал, и, похоже, это не работает (ни в FF, ни в IE).Я попробовал встроенный CSS:

style="z-index:5000"

и я также попробовал это, ссылаясь на внешний файл CSS:

#SERVICE03_DLG{z-index:5000;}

Но ни то, ни другое не работает.Я что-то упускаю из того, что вы предложили?

Редактировать:
Решите с помощью brostbeef!
Поскольку изначально я использовал флору, я ошибочно предположил, что мне нужно указать атрибут класса.Оказывается, это верно только в том случае, если вы действительно используете тему флоры (как в примерах).Если вы используете настроенную тему, указание атрибута класса приводит к такому странному поведению.

Это было полезно?

Решение

Я думаю, это потому, что у вас разные классы.
<div id="SERVICE03_DLG" class="flora"> (Флора)
<div id="SERVICE03_DLG" class="ui-dialog"> (обычай)

Даже с темой «Флора» вы все равно будете использовать класс ui-dialog, чтобы определить ее как диалог.

Я уже использовал модальные окна и никогда даже не определял класс в теге.jQueryUI должен позаботиться об этом за вас.

Попробуйте избавиться от атрибута class или использовать класс «ui-dialog».

Другие советы

Поигравшись с этим в Firebug, если вы добавите атрибут z-index со значением больше 1004 в свой div по умолчанию, идентификатор «SERVICE03_DLG», тогда он будет работать.Я бы дал что-нибудь очень большое, например, 5000, просто на всякий случай.

Я не уверен, что именно в CSS themeroller вызывает это.Вероятно, они изменили или проигнорировали атрибут позиции целевого элемента div, который превращается в диалог.

Я попробовал реализовать тему themeroller с диалогом и вкладками, и оказалось, что CSS themeroller не работает с официальным jQuery!Специально для диалогов и вкладок они изменили классы элементов официальных jquery.Глянь сюда:http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/

Комментарий пользователя:

3) Сгенерированная тема, которую я скачал, кажется неполной - когда я пытаюсь использовать ее, мои вкладки (которые работают с темой Flora, код, идентичный примеру документации), не получают стилизованные как вкладки

Столкнувшись с 3, я думал, что застрял, и мне придется вернуть, используя «Флору»… Я с тех пор обнаружил, прочитав исходный код файла «демонстрации», который, если я настраховаю свой HTML и дам элементы <li>, которые я Используя для моих вкладок класс «UI-Tabs-Nav-item», тогда он будет работать.

Таким образом, тема, сгенерированная Themeroller, является неполной.Если вкладки неполны, это заставляет меня задуматься, что еще неполное.Это было довольно разочаровывающе.:(

за которым следует комментарий разработчиков themeroller:

3) Мы это посмотрим.Вы правы, что эти классы должны быть добавлены плагином.На данный момент, вероятно, было бы не больно, просто добавить их в свою наценку, чтобы вы могли использовать темы Themeroller.Впрочем, мы это проверим.Я думаю, что наши селекторы могут быть основаны на родительском селекторе UI-Tabs, но я думаю, что мы старались не использовать элементы в наших селекторах.Рассмотрим это в списке дел

Чувак, это хороший вариант.Я пробовал сделать кучу вещей на этих двух страницах.Пробовали ли вы вообще отказаться от CSS и попробовать обе страницы?Я использовал Firebug, чтобы удалить CSS из заголовка на обеих страницах, и ввод по-прежнему работал на одной, а не на другой, но я склонен полагать, что Firebug не полностью удаляет CSS из рендеринга, и вы получите другие результаты, если вы действительно удалите его из кода.

Я также обнаружил, что вы можете вставлять текст в текстовое поле с помощью мыши — он просто не принимает ввод с клавиатуры.Однако, похоже, на нем нет никакого обработчика событий, который мог бы помешать этому.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top