Latest web development tutorials

jQuery UI API - componente de diálogo (diálogo Widget)

categoría

Los widgets (widgets)

uso

Descripción: El contenido abierto en una superposición interactiva.

Nueva Versión: 1.0

Diálogo es una ventana flotante que incluye una barra de título y un área de contenido. ventana de diálogo se puede mover, cambiar de tamaño, de forma predeterminada por el icono "X" para cerrar.

Si la longitud del contenido excede la altura máxima, una barra de desplazamiento aparecerá automáticamente.

Una barra de botones inferior, y un modo de capa semitransparente es común añadir opciones.

foco

Cuando se abre un cuadro de diálogo, el foco se moverá automáticamente para cumplir con los criterios siguientes al primer elemento:

  1. Con autofocus primer elemento en el diálogo de propiedades
  2. Las primeras contenido de la caja de diálogo dentro :tabbable elemento
  3. El primer panel en el botón de diálogo :tabbable elemento
  4. cuadro de diálogo, el botón Cerrar
  5. El cuadro de diálogo en sí

Cuando está abierto, los componentes de diálogo (diálogo Widget) aseguran las cajas para pasar la selección de los elementos de pestaña, el cuadro de diálogo no incluye los elementos exterior. diálogo modal evita que el usuario hace clic en los elementos del ratón fuera de la ventana de diálogo.

Al cerrar el cuadro de diálogo, el foco vuelve automáticamente a abre el cuadro de diálogo anterior sobre el foco del elemento.

Ocultar botón de cierre

En algunos casos, es posible que desee ocultar el botón de cierre, por ejemplo, un panel de botones tiene un botón para cerrar el caso. La mejor solución es a través de CSS. A modo de ejemplo, se puede definir una regla simple, como por ejemplo: 

.no-cerca .ui-diálogo-barra de título de cerca {
  display: none;
}

A continuación, puede agregar no-close , clase de cuadro de diálogo arbitraria, que se utiliza para ocultar el botón de cierre: 

$ ( "#dialog") .dialog ({
  dialogClass: "sin cerrar",
  botones: [
    {
      texto: "OK",
      haga clic en: function () {
        $ (Este) .dialog ( "cerrar");
      }
    }
  ]
});

tematización

los componentes del diálogo (diálogo Widget) usando jQuery UI marco CSS para definir la apariencia de su estilo. Si es necesario utilizar el cuadro de diálogo para especificar el estilo, puede utilizar el siguiente nombre de clase CSS:

  • ui-dialog : contenedor externo de diálogo.
    • ui-dialog-titlebar : cuadro de diálogo contiene el botón de cierre del título y de la barra de título.
      • ui-dialog-title : diálogo de texto del título en todo el recipiente.
      • ui-dialog-titlebar-close : el botón para cerrar el cuadro de diálogo.
    • ui-dialog-content : contenido de diálogo alrededor del contenedor. Esto también es parte del elemento se crea una instancia.
    • ui-dialog-buttonpane : contiene un panel de botones de diálogo. Sólo cuando el conjunto de buttons cuando se presentan opciones.
      • ui-dialog-buttonset : botones alrededor del recipiente.

Además, cuando se establece modal opciones de tiempo, con una ui-widget-overlay nombre de la clase elemento se añade al <body> .

confiar

información adicional

  • La parte funcional requiere un poco de CSS, de lo contrario no funcionará. Si crea un tema personalizado, utilice el archivo CSS widget de especificado como un punto de partida.

Ejemplos

Una sencilla interfaz de usuario jQuery diálogo (diálogo). 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Title> componentes de diálogo (diálogo Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Cuerpo>
 
<Botón id = "abridor"> diálogo Abrir </ botón>
<Div id = "diálogo" title = "Título de diálogo"> Tengo un cuadro de diálogo </ div>
 
<Script>
$ ( "#dialog") .dialog ({Autoopen: false});
$ ( "#opener") .click (Function () {
  $ ( "#dialog") .dialog ( "Open");
});
</ Script>
 
</ Body>
</ Html>