thème dialogue jQuery et le style

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

Question

Comment puis-je changer la couleur de fond de la barre de titre d'une boîte de dialogue jQuery?

Je l'ai regardé le ThemeRoller, mais il ne semble pas fonctionner pour moi.

Merci

Était-ce utile?

La solution

Je fais de cette façon (en ajoutant un style pour en-tête "ui-state-erreur"): 

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

                });

            });
        </script>

Autres conseils

Vous pouvez le modifier en modifiant la classe ui-dialogue-CSS titlebar, mais je vous recommande fortement d'utiliser le ThemeRoller outil .

Voir aussi:

Il y a des classes associées à chaque élément dans la boîte de dialogue.

Utilisez Firebug pour inspecter les éléments et utiliser les CSS pour les style. Par exemple, la barre de titre a la classe "ui-dialogue-titlebar".

(cela suppose que vous utilisez la boîte de dialogue jQuery UI)

Utilisez la propriété dialogClass. Vous pouvez demander à tout dialogue dans css jquery. Ci-dessous, nous la mise en forme des blocs d'en-tête et le contenu. 

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

L'exemple précédent fonctionne bien, mais avec seulement la couleur rouge du thème d'erreur.

Voici une solution simple à changer juste l'image d'en-tête dans le css:

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");
    }
});

Notez que, contrairement à l'exemple précédent, j'ai enlevé le: 

removeClass("ui-widget-header")

au lieu de simplement ajouter la classe sur: 

find(".ui-dialog-titlebar")

Il faut noter que cet exemple fonctionne avec l'en-tête de dialogue sans son lien.

Parfois, vous pouvez pas modifier le fichier css. vous pouvez essayer ceci: 

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');
  } 
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top