jQuery Dialog Thema und Stil

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

Frage

Wie kann ich die Hintergrundfarbe der Titelleiste eines jQuery Dialog ändern?

Ich habe im Themeroller aussieht, aber es scheint nicht, für mich zu arbeiten.

Danke

War es hilfreich?

Lösung

ich tun, um diese Art und Weise ( "ui-State-Fehler" -Stil für Header hinzugefügt): 

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

                });

            });
        </script>

Andere Tipps

Sie können es ändern, indem die ui-Dialog-titlebar CSS-Klasse ändern, aber ich empfehle Ihnen, zu verwenden, um die Themeroller Werkzeug .

Siehe auch:

Es gibt Klassen mit jedem Element zugeordnet ist, in dem Dialog.

Verwenden Sie Firebug, die Elemente zu überprüfen und verwenden CSS, sie stylen. Zum Beispiel hat die Titelleiste die Klasse "ui-dialog-titlebar".

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

Mit der dialogClass Eigenschaft. Sie können unabhängig von CSS in jquery Dialog gelten. Im Folgenden Header und Inhaltsblöcke formatieren. 

<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>

Das obige Beispiel funktioniert gut, aber nur mit der roten Farbe des Fehlers Thema.

Hier ist eine einfache Lösung mit nur das Header-Bild in der CSS zu ä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 im Gegensatz zum vorherigen Beispiel, ich entfernt das: 

removeClass("ui-widget-header")

statt nur Hinzufügen der Klasse auf der: 

find(".ui-dialog-titlebar")

muss beachten, dass dieses Beispiel mit den Dialog-Header funktioniert ohne es zu installieren.

Manchmal können Sie die CSS-Datei nicht bearbeiten. So können Sie versuchen, diese: 

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');
  } 
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top