Тематические элементы в диалоге Jquery UI с CSS ... как? - PullRequest
Новая
       10

Тематические элементы в диалоге Jquery UI с CSS ... как?

1 голос
/ 19 июня 2009

Поскольку старая версия была слишком трудной для понимания людьми, вот 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 - нет. Есть идеи почему?

Ответы [ 2 ]

1 голос
/ 19 июня 2009

JQuery перемещает DIV диалога в дереве DOM и переносит его в некоторые другие. Поэтому селекторы CSS не будут работать. Используя приведенный выше пример, вы должны сделать что-то вроде этого: 

div.ui-dialog div#test label {
    display: block;
}
div.ui-dialog div#test input {
    padding-left: 100px;
}
0 голосов
/ 19 июня 2009

CSS должен работать. Это может быть проблемой с каскадом правил CSS. Есть ли более конкретный селектор, применяющий эти правила, например "#dialog div # test label"? Без остальной части html / css невозможно указать на специфику. Получите firebug и посмотрите, какие правила применяются к этим элементам.

...