Febbraio 5, 2021

con jQuery

contenuto

  • 1 Il codice HTML
  • 2 Il codice JavaScript
  • 3 altre opzioni

con jQuery possiamo effettuare finestre di dialogo che si aprono premendo un pulsante, che può essere trascinato, ridimensionare e Hanno il loro pulsante di chiusura nell’angolo in alto a destra.

Il codice HTML

Prima facciamo il codice HTML sulla nostra pagina. Quale sarà il dialogo non è altro che un < div > all’interno della pagina. Possiamo metterlo ovunque, perché poi andrà nascosto e quando viene visualizzato “galleggerà” nel resto della pagina.

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

Abbiamo messo Sulla testa il foglio di stile e la jQuery necessaria. L’argomento CSS è importante per il dialogo sembrare un dialogo. Puoi scaricarti che lo scopri qui o puoi creare facilmente il tuo argomento con l’applicazione Web TheEroller.

Abbiamo anche messo il div che sarà il dialogo e un paio di pulsanti che ci serviranno Per aprire e chiudere il dialogo.

Il codice JavaScript

Ora possiamo solo dare funzionalità di funzionalità utilizzando le funzioni JavaScript / JQuery. Per questo mettiamo tra Tags < script >, dopo il < Body > ad esempio

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

Dice semplicemente che quando il documento è caricato, lascia che il prossimo:

  • $ (“Dialogo #”). Dialog ({AutoUforten: false}); Per l’elemento con (il nostro div) diventiamo dialogo (chiamando la finestra di dialogo ()). Come parametro abbiamo superato un {selfopen: false} in modo che il dialogo sia nascosto finché non lo visualizzerà in qualche modo. Se non facciamo quest’ultimo, la finestra di dialogo sarà visibile dall’inizio.
  • $ (“Apri”). Fare clic su (Funzione (Evento) {in ID = Pulsante Apri Abbiamo messo una funzione che lo farà essere eseguito quando si fa clic su di esso. Questa funzione visualizzerà la finestra di dialogo $ (“Dialogo” “). Finestra di dialogo (‘APERTA’);
  • Siamo stati commentati // $ (” Dialogo # “). Dialog (‘opzione’, ‘posizione’,); Se decomentiamo, la finestra di dialogo verrà visualizzata nella posizione in cui si fa clic con il mouse, cioè sul pulsante. In caso contrario, apparirà centrato.
  • $ (“#close”). Fare clic su (Funzione () {sul pulsante ID = Chiudi Metti una funzione che verrà eseguita quando si fa clic sul pulsante. Quella funzione chiuderà la finestra di dialogo $ (” # Dialogo “). Dialogo (‘Chiudi’);

Altre opzioni

I dialoghi jQuery hanno molte altre opzioni. Noi Può aggiungere pulsanti come “Accetta”, “Annulla” o ciò che desideriamo, renderlo possibile o non trascinare, ridimensionare, impostare le dimensioni, fare visualizzazione o nascondere, ecc., Ecc. NES tutte le opzioni http://docs.jquery.com/UI/Dialog

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *