Febreiro 5, 2021

diálogo con jQuery

contido

  • 1 o código HTML
  • 2 O código JavaScript
  • 3 Máis opcións

con jQuery Podemos facer fiestras de diálogo que se abra premendo un botón, que pode ser arrastrado, redimensionar e Teñen o seu botón de peche na esquina superior dereita.

O código HTML

Primeiro facemos o código HTML na nosa páxina. Cal será o diálogo non é máis que un < DIV > dentro da páxina. Podemos poñelo en calquera lugar, porque entón irá oculto e cando se amose “vai flotar” sobre o resto da páxina.

<!doctype html><html> <head> <meta charset="utf-8"> <title>Demo</title> <link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> </head> <body> <div title="titulo"> <p>soy un dialogo</p> </div> <button>Abrir</button> <button>Cerrar</button> </body></html>

Puxemos Na cabeza a folla de estilo e o jQuery necesario. O tema CSS é importante para o diálogo para parecer un diálogo. Podes descargalo que pensas alí ou podes facer o teu propio tema facilmente coa aplicación web Themeroller.

Tamén poñemos a DIV que será o diálogo e un par de botóns que nos servirán Para abrir e pechar o diálogo.

O código Javascript

Agora só podemos darlle funcionalidade usando as funcións de JavaScript / jQuery. Para iso, poñemos entre as etiquetas < script >, despois do < corpo

por exemplo

<body> <script> $(document).ready(function() { $("#dialogo").dialog({autoOpen:false}); $("#abrir").click(function(event) { // $("#dialogo").dialog('option','position',); $("#dialogo").dialog('open'); }); $("#cerrar").click(function() { $("#dialogo").dialog('close'); }); }); </script> ...

Simplemente dicimos que cando o documento está cargado, deixe o seguinte:

  • $ (“# diálogo”). Diálogo ({AUTOUPEN: FALSE}); Ao elemento con (o noso DIV) convertémonos en diálogo (diálogo de chamadas ()). Como parámetro, pasamos un {SELOOPEN: FALSE} para que o diálogo estea escondido ata que o visuales de algunha maneira. Se non facemos o último, o diálogo será visible desde o principio.
  • $ (“Abrir”). Prema (Función (evento) {ao id = botón aberto que poñemos unha función que o fará executarse cando faga clic nel. Esta función mostrará o diálogo $ (“# diálogo”). Diálogo (‘aberto’);
  • Comentamos // $ (“# DIAXOGUE”). Diálogo (‘opción’, ‘posición’,); se decomatamos, o diálogo mostrarase na posición na que se fai clic co rato, é dicir, no botón. Se non, aparecerá centrado.
  • $ (“#close”). Prema (función () {para o botón de identificación = Pecharemos unha función que se executará cando fai clic no botón. Esta función pechará o diálogo $ (” # Diálogo “). Diálogo (‘Pechar’);

Máis opcións

Os diálogos jQuery teñen moitas máis opcións. Nós pode engadir botóns como “aceptar”, “cancelar” ou o que queremos, facer posible ou non arrastrar, redimensionar, establecer tamaños, facer visualización ou ocultar, etc., etc. Aquí aquí NES TODAS OPCIÓNS http://docs.jquery.com/UI/Dialog

Deixa unha resposta

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *