Cum se creează o casetă de dialog personalizată în AJAX pentru programarea HTML5 și CSS3 - dummies

AJAX permite programatorilor HTML5 și CSS3 să creeze casete de dialog personalizate. JavaScript furnizează câteva casete de dialog (casetele de dialog de alertă și de prompt), dar acestea sunt destul de urâte și relativ inflexibile. UI jQuery include o tehnică pentru transformarea oricărei div într-o casetă de dialog virtuală. Caseta de dialog urmează tema și este redimensionabilă și mobilă.

Construirea casetei de dialog nu este dificilă, dar trebuie să o puteți activa sau dezactiva cu cod sau nu se va comporta ca o casetă de dialog corespunzătoare (care imită o fereastră în sistem):

1. Creați div pe care intenționați să îl utilizați ca casetă de dialog.

   Creați un div și dați-i un ID pentru a îl transforma într-un nod de casetă de dialog. Adăugați atributul titlu și titlul apare în bara de titlu a casetei de dialog.

   Clasa de dialog vă permite să aveți o fereastră de dialog personalizabilă, mobilizabilă, în concordanță cu tema paginii instalate.
   

2. Transformați div într-o casetă de dialog.

   Utilizați metoda dialog () pentru a transforma div într-un nod de casetă de dialog jQuery în funcția init ():

   $ ("dialog #"). dialog ();
   

3. Ascundeți caseta de dialog în mod implicit.

   De obicei, nu doriți ca caseta de dialog să fie vizibilă până când se întâmplă un eveniment. În acest exemplu, este posibil să nu doriți ca caseta de dialog să apară până când utilizatorul face clic pe un buton. Puteți pune un cod pentru a închide caseta de dialog din funcția init (), astfel încât caseta de dialog să nu apară până când nu este convocată.

4. Închideți caseta de dialog.

   Pentru a închide o casetă de dialog, consultați nodul casetei de dialog și apelați din nou metoda de dialog (). De data aceasta, trimiteți singura valoare "închide" ca parametru, iar caseta de dialog va închide imediat:

   // dialog inițial de închidere $ ("# dialog"). dialog ("închidere");
   

5. Dacă faceți clic pe X, se închide automat caseta de dialog.

   Caseta de dialog are un mic X care arată ca pictograma Close Window de pe majoritatea sistemelor de ferestre. Utilizatorul poate închide caseta de dialog făcând clic pe această pictogramă.

6. Puteți deschide și închide caseta de dialog cu cod.

   Butoanele My Open Dialog și Close Dialog afișează funcții care controlează comportamentul casetei de dialog. De exemplu, aici este funcția atașată la butonul Open Dialog:

   funcția openDialog () {$ ("# dialog"). ("deschide");} / / end openDialog