it-swarm.com.de

jQuery-Dialogdesign und -stil

Wie ändere ich die Hintergrundfarbe der Titelleiste eines jQuery-Dialogfelds?

Ich habe mir den Roller angesehen, aber es scheint für mich nicht zu funktionieren.

Vielen Dank

14
Picflight

Ich mache das so (füge den Stil "ui-state-error" für den Header hinzu):

<script type="text/javascript">
            $(function () {
                $("#msg").dialog({
                    open: function () {
                        $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
                    }

                });

            });
        </script>  
12
DonSleza4e

Sie können dies ändern, indem Sie die CSS-Klasse ui-dialog-titlebar ändern. Ich empfehle jedoch dringend, das Tool ThemeRoller zu verwenden.

Siehe auch:

13
CMS

Jedem Element im Dialog sind Klassen zugeordnet. 

Mit Firebug können Sie die Elemente überprüfen und mit CSS formatieren. Beispielsweise hat die Titelleiste die Klasse "ui-dialog-titlebar".

(Dies setzt voraus, dass Sie den jQuery-UI-Dialog verwenden.)

3
jonstjohn

Verwenden Sie die dialogClass-Eigenschaft. Sie können auf alle CSS im Jquery-Dialog anwenden. Nachfolgend formatieren wir Header- und Inhaltsblöcke.

<head>
<style>
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase}
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff}
</style>
<script>
        $('#jq_dialog').dialog({
            title: 'Detalhes do produto',
            modal: true,
            resizable: false,
            width: 500,
            maxHeight: 400,
            closeText: 'fechar',
            draggable: true,
            show: 'fade',
            hide: 'fade',
            dialogClass: 'main-dialog-class'
        });
</script>
</head>
<body>
<div id="jq_dialog">Hello StackOverflow!</div>
</body>
2
Junior M

Das vorige Beispiel funktioniert gut, jedoch nur mit der roten Farbe des Fehlerthemas.

Hier eine einfache Lösung, indem Sie einfach das Header-Bild in der CSS ändern:

css:

.ui-widget-header-custom{ 
    background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;      
}

javascript:

$('#my_dialog').dialog({ 
    open: function(event, ui){ 
        $(this).parents(".ui-dialog:first").find(".ui-widget-header")
            .removeClass("ui-widget-header").addClass("ui-widget-header-custom");
    }
});

Beachten Sie, dass ich entgegen dem vorherigen Beispiel Folgendes entfernt habe: 

removeClass("ui-widget-header")

anstatt nur die Klasse hinzuzufügen:

find(".ui-dialog-titlebar")

Beachten Sie, dass dieses Beispiel mit der Dialogkopfzeile ohne Verknüpfung funktioniert.

1
Geoffroy CALA

Manchmal können Sie die CSS-Datei nicht bearbeiten. So kannst du es versuchen:

dialog = $('<div/>').dialog({
  title: 'Dialog with css for title bar',
  open: function() {
    $(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E');
  } 
});
0
Hermann Schwarz