jQuery UI ejemplo - Dialog (Diálogo)
El contenido abierto en una superposición interactiva.
Para más detalles sobre los componentes de diálogo, consulte la documentación de la API de los componentes del diálogo (Dialog el widget) .
La función predeterminada
La ventana de diálogo de base se colocará en una zona de visión en la capa de cobertura, a través de una página de contenido anidado y separados (como seleccionar elementos). Consiste en una barra de título y una composición área de contenido, y se puede mover, cambiar de tamaño, de forma predeterminada por el icono "X" para cerrar.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de diálogo (diálogo) - La función por defecto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#dialog") .dialog ();
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "diálogo" title = "diálogo básico">
<P> Este es el cuadro de diálogo predeterminado para la visualización de la información. ventana de diálogo se puede mover, cambiar de tamaño, de forma predeterminada por el icono "X" para cerrar. </ P>
</ Div>
</ Body>
</ Html>
animación
Se puede especificar un espectáculo de efectos especiales / ocultan la propiedad de animación para mostrar el cuadro de diálogo. Debe referirse a un archivo separado para el efecto que desea utilizar efectos especiales.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de diálogo (diálogo) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#dialog") .dialog ({
Autoopen: falso,
espectáculo: {
efecto: "a ciegas",
Duración: 1000
},
ocultar: {
efecto: "explotar",
Duración: 1000
}
});
$ ( "#opener") .click (Function () {
$ ( "#dialog") .dialog ( "Open");
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "diálogo" title = "diálogo básico">
<P> Esta es una pantalla animada del cuadro de diálogo, para la visualización de la información. ventana de diálogo se puede mover, cambiar de tamaño, de forma predeterminada por el icono "X" para cerrar. </ P>
</ Div>
<Botón id = "abridor"> diálogo Abrir </ botón>
</ Body>
</ Html>
El modo básico
Modal resto de diálogo de la página para evitar que los usuarios fuera de la caja de diálogo para interactuar hasta que el cuadro de diálogo se cierra.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de diálogo (diálogo) - modal básica </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Diálogo modal") .dialog ({
altura: 140,
modal: true
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "título de diálogo modal" = "cuadros de diálogo modales básicos">
<P> Add-modal pantalla de superposición, hacer que el aspecto más prominente de diálogo, ya que atenúa dejar que otro tipo de contenido en la página. </ P>
</ Div>
<P> sed diam vel Identificación del libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies ñeque, sit amet eros auctor elit un lectus. </ p>
</ Body>
</ Html>
confirmación modal
Confirmar una acción destructiva También puede ser posible sentido. Configuración modal opción de verdad, y por buttons para asignar opciones primarias y secundarias acciones del usuario.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de diálogo (diálogo) - modal de confirmación </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Diálogo-confirman #") .dialog ({
de tamaño variable: falso,
altura: 140,
modal: true,
botones: {
"Eliminar todos los elementos": function () {
$ (Este) .dialog ( "cerrar");
},
Cancelar: function () {
$ (Este) .dialog ( "cerrar");
}
}
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "cuadro de diálogo de confirmación" title = "Vaciar la papelera?">
<P> <span class = "ui ui-icon-icono-alerta" style = "float: left; margin: 0 0 7px 20px;"> </ span> Estos elementos se eliminarán de forma permanente y no se pueden recuperar. ¿Seguro? </ P>
</ Div>
<P> sed diam vel Identificación del libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies ñeque, sit amet eros auctor elit un lectus. </ p>
</ Body>
</ Html>
formulario modal
cuadro de diálogo modal para solicitar al usuario que introduzca datos en un proceso de múltiples pasos. Incrustado en la etiqueta del formulario área de contenido establecido modal opción de verdad, y por buttons para asignar opciones primarias y secundarias acciones del usuario.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de diálogo (diálogo) - Forma modales </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
body {font-size: 62,5%;}
etiqueta, de entrada {display: block;}
input.text {margin-bottom: 12px; anchura: 95%; padding: .4em;}
fieldset {padding: 0; border: 0; margin-top: 25px;}
h1 {font-size: 1.2em; margen: .6em 0;}
div # usuarios contienen-{width: 350px; margen: 20px 0;}
div # usuarios-contienen mesa {margin: 0 1 em; border-collapse: colapso; width: 100%;}
div # usuarios-td contienen mesa, div # usuarios-XX contienen mesa {border: 1px #eee sólida; padding: 10px .6em; text-align: left;}
.ui-.ui de diálogo de estado de errores {padding: .3em;}
.validateTips {border: 1px solid transparente; padding: 0.3em;}
</ Style>
<Script>
$ (Function () {
var name = $ ( "# nombre"),
email = $ ( "#email"),
password = $ ( "# Contraseña"),
allfields = $ ([]) .Add (nombre) .add (e-mail) .add (contraseña),
consejos = $ ( ".validateTips");
updateTips función (t) {
consejos
.text (t)
.addClass ( "ui-estado-resalte");
setTimeout (function () {
tips.removeClass ( "ui-estado más destacado", 1500);
}, 500);
}
checkLength función (o, n, min, max) {
si (o.val (). length> máx || o.val (). Longitud <min) {
o.addClass ( "ui-estado-error");
updateTips ( "" + n + "debe estar en" +
min + "entre". "y" + max +);
return false;
} Else {
return true;
}
}
checkRegexp función (o, expresión regular, n) {
if (! (regexp.test (o.val ()))) {
o.addClass ( "ui-estado-error");
updateTips (n);
return false;
} Else {
return true;
}
}
$ ( "Diálogo de forma #") .dialog ({
Autoopen: falso,
altura: 300,
anchura: 350,
modal: true,
botones: {
"Crear una cuenta": function () {
var bValid = true;
allFields.removeClass ( "ui-estado-error");
bValid = bValid && checkLength (nombre, "nombre de usuario", 3, 16);
bValid = bValid && checkLength (correo electrónico, "e-mail", 6, 80);
bValid = bValid && checkLength (contraseña, "password", 5, 16);
bValid = bValid && checkRegexp (nombre, / ^ [az] ([0-9a-z _]) + $ / i ", el nombre de usuario debe ser az, 0-9, subrayado, y debe comenzar con una letra.");
// De jquery.validate.js (por joern), aportados por Scott González: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp (correo electrónico, / ^ ((([az] | \ D | [# \ $% & '\ * \ + \ - \ / = \ \ ^ _ `{\ |} ~ !?] | . [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) + (\ ([az] | \ D | [# \ $% & '\ * \ + \ - \ / = \ \!? ^ _` {\ | ~}] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) +) *) | ((\ x22) ((((\ x20 | \ x09) * ( \ x0d \ x0a)) (\ x20 |? \ x09) +) (([\ x01- \ x08 \ x0b \ x0c \ x0e- \ x1f \ x7F] |? \ x21 | [\ x23- \ X5b] | [ \ x5d- \ X7E] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (\\ ([\ x01- \ x09 \ x0b \ x0c \ x0d- \ x7F] | [\ u00a0 ? - \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF])))) * (((\ x20 | \ x09) * (\ x0D \ x0a)) (\ x20 | \ x09) +) (\ x22? ))) @ ((([az] | \ D | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (([az] | \ D | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] | \ D | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \) + (([az] |. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]) | (([az] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] |.?. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \ $ / i ", por ejemplo, la interfaz de usuario @ jquery.com ");
bValid = bValid && checkRegexp (contraseña, / ^ (, $ / [0-9a-zA-Z]) + "campo de contraseña sólo se permite: az 0-9");
si (bValid) {
$ ( "#usuarios Tbody") .Append ( "<tr>" +
"<Td>" + name.val () + "</ td>" +
"<Td>" + email.val () + "</ td>" +
"<Td>" + password.val () + "</ td>" +
"</ Tr>");
$ (Este) .dialog ( "cerrar");
}
},
Cancelar: function () {
$ (Este) .dialog ( "cerrar");
}
},
Cerrar: function () {
allFields.val ( "") .removeClass ( "ui-estado-error");
}
});
$ ( "# Crear usuario")
.button ()
.click (function () {
$ ( "# Diálogo de forma") .dialog ( "abierta");
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "diálogo de forma" title = "Crear nuevo usuario">
<P class = "validateTips"> Se requieren todos los campos del formulario. </ P>
<Forma>
<Fieldset>
<Label for = "nombre"> Nombre </ label>
<Input type = "text" name = "nombre" id = "nombre" class = "text-ui-widget de contenido ui-esquina-all">
<Label for = "email"> buzón </ label>
<Input type = "text" name = "email" id = valor "e-mail" = "" class = "text-ui-widget de contenido ui-esquina-all">
<Label for = "contraseña"> Contraseña </ label>
<Input type = name = valor de id = "contraseña" "contraseña" "contraseña" = "" class = "text-ui-widget de contenido ui-esquina-all">
</ Fieldset>
</ Form>
</ Div>
<Div id = "usuarios-contienen" class = "ui-widget de">
<H1> usuario existente: </ h1>
<Tabla de id = clase "usuarios" = "ui-ui-widget de widget de contenido">
<Culata en T>
<Clase Tr = "ui-Reproductor-header">
<TH> Nombre </ th>
<TH> buzón </ th>
<TH> contraseña </ th>
</ Tr>
</ Culata en T>
<Tbody>
<Tr>
<Td> John Doe </ td>
<Td> [email protected] </ td>
<Td> johndoe1 </ td>
</ Tr>
</ Tbody>
</ Table>
</ Div>
<Botón id = "create-user"> Crear un nuevo usuario </ botón>
</ Body>
</ Html>
de mensaje modal
cuadro de diálogo modal para confirmar la información y la acción antes de que se ejecute la acción siguiente. Configuración modal opción de verdad, y por buttons para especificar las opciones de acción principales (OK).
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de diálogo (diálogo) - de mensaje modal </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Diálogo-mensaje #") .dialog ({
modal: true,
botones: {
Ok: function () {
$ (Este) .dialog ( "cerrar");
}
}
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "cuadro de diálogo de mensaje" title = "descarga completa">
<P>
<Span class = "ui ui-icon-icono-círculo-check" style = "float: left; margin: 0 0 7px 50px;"> </ span>
Su archivo se ha descargado con éxito a la carpeta.
</ P>
<P>
El uso actual de espacio de almacenamiento <b> 36% </ b>.
</ P>
</ Div>
<P> sed diam vel Identificación del libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies ñeque, sit amet eros auctor elit un lectus. </ p>
</ Body>
</ Html>