como - jquery ui themes

Diálogo de la interfaz de usuario jquery: ¿cómo inicializar sin una barra de título?

Question

¿Es posible abrir un diálogo de jQuery UI sin una barra de título?

Answer 1

Así es como se puede hacer.

Vaya a la carpeta de temas -> base -> abra jquery.ui.dialog.css

Encontrar

Seguimientos

si no desea mostrar la barra de título, simplemente configure la pantalla: ninguna como hice en lo siguiente.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Samilarly por título también.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

Ahora viene el botón de cerrar, también puede configurarlo como ninguno o puede configurar su

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

Hice mucha búsqueda pero nada, entonces tuve esta idea en mi mente. Sin embargo, esto afectará a toda la aplicación para que no tenga el botón de cerrar, barra de título para el diálogo, pero también puede superar esto utilizando jquery y agregando y configurando css a través de jquery

Aquí hay una sintaxis para esto.

$(".specificclass").css({display:normal})

Answer 2

Creo que la forma más limpia de hacerlo sería crear un nuevo widget myDialog, que consiste en el widget de diálogo menos el código de barras del título. Extracción del código de barras del título parece sencillo.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

Answer 3

Creo que puedes ocultarlo con CSS:

.ui-dialog-titlebar {
    display: none;
}

Alternativamente, puede aplicar esto a diálogos específicos con la opción dialogClass :

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});

.no-titlebar .ui-dialog-titlebar {
    display: none;
}

Echa un vistazo a " Theming " el diálogo. La sugerencia anterior hace uso de la opción dialogClass , que parece estar a punto de adoptar un nuevo método.

Answer 4

En realidad, hay otra forma de hacerlo, usando el widget diálogo directamente:

Puede obtener el widget de diálogo así

$("#example").dialog(dialogOpts);
$dlgWidget = $(''#example'').dialog(''widget'');

y luego hacer

$dlgWidget.find(".ui-dialog-titlebar").hide();

para ocultar la titlebar dentro de ese diálogo

y en una sola línea de código (me gusta el encadenamiento):

$(''#example'').dialog(''widget'').find(".ui-dialog-titlebar").hide();

No es necesario agregar una clase extra al cuadro de diálogo de esta manera, simplemente vaya directamente. Funciona bien para mí.

Answer 5

Esta es la forma más fácil de hacerlo y solo eliminará la barra de título en ese diálogo específico;

$(''.dialog_selector'').find(''.ui-dialog-titlebar'').hide();

Answer 6

Esta siguiente forma me solucionó el problema.

$(''#btnShow'').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        ''background-image'': ''none'',
        ''background-color'': ''white'',
        ''border'': ''none''
      });
    }
  });
});

#basicModal {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

Answer 7

Esto funcionó para mí:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

Answer 8

Esto me sirvió para ocultar la barra de título del cuadro de diálogo:

$(".ui-dialog-titlebar" ).css("display", "none" );

Answer 9

Intenta usar

$("#mydialog").closest(".ui-dialog-titlebar").hide();

Esto ocultará todos los títulos de diálogos.

$(".ui-dialog-titlebar").hide();

Answer 10

Lo único que descubrí al ocultar la barra de título de Diálogo es que, incluso si la pantalla no tiene pantalla, los lectores de pantalla lo siguen y lo leen. Si ya agregó su propia barra de título, leerá ambas, causando confusión.

Lo que hice fue eliminarlo del DOM usando $(selector).remove() . Ahora los lectores de pantalla (y todos los demás) no lo verán porque ya no existe.

Answer 11

Me di cuenta de una solución para eliminar dinámicamente la barra de título.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

Esto eliminará todos los elementos con la clase ''ui-dialog-titlebar'' una vez que se haya renderizado el cuadro de diálogo.

Answer 12

Me gusta anular los widgets de jQuery.

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

Así que ahora puede configurar si desea mostrar la barra de título o no

   $(''#mydialog'').dialog({
      headerVisible: false // or true
});

Answer 13

Me parece más eficiente y más legible usar el evento abierto y ocultar la barra de título desde allí. No me gusta usar búsquedas de nombre de clase de página global.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

Sencillo.

Answer 14

Para mí, todavía quería usar las esquinas redimensionables, simplemente no quería, así que vea las líneas diagonales. solía

$(".ui-resizable-handle").css("opacity","0");

Acabo de darme cuenta de que estaba comentando la pregunta incorrecta. A la altura de mi tocayo :(

Answer 15

Prueba esto

$("#ui-dialog-title-divid").parent().hide();

reemplazar divid por id correspondiente

Answer 16

Puede eliminar la barra con el icono de cerrar con las técnicas descritas anteriormente y luego agregar un icono de cierre usted mismo.

CSS:

.CloseButton {
background: url(''../icons/close-button.png'');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

// añade este div al div que contiene tu contenido

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog(''close'');
     });

Answer 17

Puede usar jquery para ocultar la barra de título después de usar dialogClass al inicializar el diálogo.

durante el inicio:

$(''.selector'').dialog({
    dialogClass: ''yourclassname''
});

$(''.yourclassname div.ui-dialog-titlebar'').hide();

Al usar este método, no necesita cambiar su archivo css, y esto también es dinámico.

Answer 18

Si tienes varios diálogos, puedes usar esto:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children(''.ui-dialog-titlebar'').hide();
        }
    });

Answer 19

Uso esto en mis proyectos.

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings(''div.ui-dialog-titlebar'').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings(''.ui-dialog-titlebar'').remove();

Answer 20

vaya a su jquery-ui.js (en mi caso jquery-ui-1.10.3.custom.js) y busque esto._createTitlebar (); y comentarlo.

ahora cualquiera de tus diálogos aparecerá con encabezados. Si desea personalizar el encabezado, simplemente vaya a _createTitlebar (); y edite el código en el interior.

por

Answer 21

Creo que la mejor solución es usar la opción dialogClass .

Un extracto de jquery UI docs:

durante init: $(''.selector'').dialog({ dialogClass: ''noTitleStuff'' });

o si quieres despues de init. :

$(''.selector'').dialog(''option'', ''dialogClass'', ''noTitleStuff'');

Así que creé un diálogo con la opción dialogClass = ''noTitleStuff'' y el css así:

.noTitleStuff .ui-dialog-titlebar {display:none}

demasiado simple !! pero tomé 1 día para pensar por qué mi método de perforación de id-> class anterior no estaba funcionando. De hecho, cuando llama .dialog() método .dialog() , el div que transforma se convierte en hijo de otro div (el diálogo real div) y posiblemente en un ''hermano'' del div de la titlebar de titlebar , por lo que es muy difícil tratar de encontrar el último desde el primero.