Hur man skapar en anpassad dialogruta i AJAX för HTML5 och CSS3-programmering - dummies

AJAX låter HTML5 och CSS3 programmerare skapa egna dialogrutor. JavaScript levererar några dialogrutor (alert och prompt dialogrutorna), men dessa är ganska ful och relativt oflexibla. JQuery-användargränssnittet innehåller en teknik för att konvertera en div till en virtuell dialogruta. Dialogrutan följer temat och kan resizable och flyttas.

Att bygga dialogrutan är inte svårt, men du måste kunna slå på och av med kod, eller det kommer inte att fungera som en riktig dialogruta (som efterliknar ett fönster i driften system):

1. Skapa div som du tänker använda som dialogruta.

   Skapa en div och ge den ett ID så att du kan göra det till en dialogruta nod. Lägg till titelattributet och titeln visas i dialogrutaens titelfält.

   Dialogklassen låter dig ha en rörlig, stor och anpassad dialogruta som överensstämmer med det installerade sidtemat.
   

2. Vänd div till en dialogruta.

   Använd dialogrutan () -metoden för att aktivera diven i en jQuery-dialogruta i init () -funktionen:

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

3. Dölj dialogrutan som standard.

   Vanligtvis vill du inte att dialogrutan ska synas tills någon händelse inträffar. I det här exemplet kanske du inte vill att dialogrutan ska visas tills användaren klickar på en knapp. Du kan ange en kod för att stänga dialogrutan i init () -funktionen så att dialogrutan inte kommer att visas tills den kallas.

4. Stäng dialogrutan.

   För att stänga en dialogruta, se dialogrutan nod och ring dialogrutan () -metoden på den igen. Den här gången, skicka singelvärdet "stäng" som en parameter, och dialogrutan stängs omedelbart:

   // stänger först dialogrutan $ ("# dialog"). dialogen ("close");
   

5. När du klickar på X stängs dialogrutan automatiskt.

   Dialogrutan har en liten X som ser ut som ikonen Stäng fönstret i de flesta fönstersystem. Användaren kan stänga dialogrutan genom att klicka på den här ikonen.

6. Du kan öppna och stänga dialogrutan med kod.

   Mina öppna dialogrutor och nära dialogknappar ringer upp funktioner som styr dialogrutans beteende. Till exempel är här funktionen som är kopplad till Open Dialog-knappen:

   funktionen openDialog () {$ ("# dialog"). dialogrutan ("öppen");} // end openDialog