jQuery tema de diálogo y el estilo

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

Pregunta

¿Cómo se cambia el color de fondo de la barra de título de un cuadro de diálogo jQuery?

He mirado el ThemeRoller pero no parece funcionar para mí.

Gracias

¿Fue útil?

Solución

lo hago de esta manera (agregando estilo "Estado-ui-error" de cabecera): 

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

                });

            });
        </script>

Otros consejos

Se puede cambiar modificando la clase CSS ui-diálogo-barra de título, pero le recomiendo que utilice el href="http://jqueryui.com/themeroller/" rel="noreferrer"> ThemeRoller herramienta .

Vea también:

Hay clases asociados con cada elemento en el diálogo.

El uso de Firebug para inspeccionar los elementos y el uso de CSS para el estilo de ellos. Por ejemplo, la barra de título tiene la clase "ui-diálogo-barra de título".

(esto supone que está utilizando la interfaz de usuario de diálogo jQuery)

Utilice la propiedad dialogClass. Se puede aplicar a cualquier css en el diálogo jQuery. A continuación se formatea un encabezado y el contenido bloques. 

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

El ejemplo anterior funciona bien, pero sólo con el color rojo del tema de error.

A continuación, una solución sencilla con sólo cambiar la imagen de cabecera en el 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");
    }
});

Observe que, contrariamente al ejemplo anterior, quité la: 

removeClass("ui-widget-header")

en lugar de limitarse a añadir la clase en la: 

find(".ui-dialog-titlebar")

Debe tenerse en cuenta que este ejemplo funciona con la cabecera de diálogo sin su vínculo.

A veces no se puede editar el archivo CSS. Así que usted puede probar esto: 

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');
  } 
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top