Fevereiro 5, 2021

diálogo com jQuery

  • 1 o código html
  • 2 O código JavaScript
  • 3 Mais opções

com jQuery, podemos fazer janelas de diálogo que abrem pressionando um botão, que pode ser arrastado, redimensionar e Eles têm seu botão de fechamento no canto superior direito.

O código HTML

primeiro nós fazemos o código HTML na nossa página. O que será o diálogo é nada mais do que um < div > dentro da página. Podemos colocá-lo em qualquer lugar, porque então ele irá oculto e quando for exibido “flutuará” sobre o resto da página.

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

Nós colocamos na cabeça a folha de estilo e o jQuery necessário. O tópico CSS é importante para o diálogo parecer um diálogo. Você pode baixá-lo que você descobre lá ou você pode fazer o seu próprio tópico facilmente com o timeeroller de aplicativo da web.

Também colocamos o DIV que será o diálogo e um par de botões que nos servirão Para abrir e fechar o diálogo.

O código JavaScript

Agora só podemos dar a funcionalidade de TI usando as funções JavaScript / jquery. Para isso, colocamos entre tags < script >, após o < Body > 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> ...

simplesmente dizemos que quando o documento é carregado, deixe o próximo:

  • $ (“diálogo”). Dialog ({autoupen: false}); Para o elemento com (nosso div) nos tornamos diálogo (chamando diálogo ()). Como parâmetro, passamos por um {Selfopen: False} para que o diálogo seja oculto até que o visualizemos de alguma forma. Se não fizermos este último, a caixa de diálogo será visível desde o começo.
  • $ (“Abrir”). Clique em (função (evento) {para o botão ID = aberto que colocamos uma função que ser executado quando clique nele. Esta função exibirá a caixa de diálogo $ $ (“# diálogo”). Diálogo (‘Abrir’);
  • Nós fomos comentados // $ (“diálogo”). Diálogo (‘opção’, ‘posição’,); se decomentamos, a caixa de diálogo será exibida na posição na qual ele é clicado com o mouse, isto é, no botão. Se não, aparecerá centrado.
  • $ (“#Close”). Clique em (função () {para o botão de identificação = Fechar Colocamos uma função que será executada quando você clicar no botão. Essa função fechará a caixa de diálogo $ (” # Diálogo “). Diálogo (‘fechar’);

Mais opções

jquery Diálogos têm muitas outras opções. Nós Pode adicionar botões como “aceitar”, “cancelar” ou o que queremos, torná-lo possível ou não arraste, redimensione, ajuste os tamanhos, faça visualização ou esconda, etc., etc. Todas as opções http://docs.jquery.com/UI/Dialog

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *