Sådan oprettes en brugerdefineret dialogboks i AJAX til HTML5 og CSS3 Programmering - dummies

AJAX lader HTML5 og CSS3 programmører lave brugerdefinerede dialogbokse. JavaScript leverer et par dialogbokse (alarm og prompt dialogbokse), men disse er ret grimme og relativt ufleksible. JQuery-brugergrænsefladen indeholder en teknik til at omdanne en div til en virtuel dialogboks. Dialogboksen følger temaet og kan omstilles og flyttes.

Det er ikke svært at opbygge dialogboksen, men du skal kunne tænde og slukke med kode, eller det vil ikke fungere som en ordentlig dialogboks (som efterligner et vindue i driften system):

1. Opret den div, du har til hensigt at bruge som en dialogboks.

   Opret en div og giv den et ID, så du kan konvertere det til en dialogboksknude. Tilføj titelattributtet, og titlen vises i dialogboksens titellinje.

   Dialoglassen giver dig mulighed for at få en bevægelig, betydelig tilpasset dialogboks i overensstemmelse med det installerede sidetema.
   

2. Drej div til en dialogboks.

   Brug dialogen () -metoden til at aktivere div'en i en jQuery-dialogboksenode i init () -funktionen:

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

3. Skjul dialogboksen som standard.

   Normalt vil du ikke have dialogboksen synlig, indtil der sker en form for begivenhed. I dette særlige eksempel kan du ikke have dialogboksen til at blive vist, indtil brugeren klikker på en knap. Du kan sætte nogle kode for at lukke dialogboksen i init () -funktionen, så dialogboksen ikke vises, før den indkaldes.

4. Luk dialogboksen.

   For at lukke en dialogboks skal du se dialogboksen node og kalde dialogen () -metoden på den igen. Denne gang skal du sende den enkelte værdi "Luk" som parameter, og dialogboksen lukker øjeblikkeligt: ​​

   // Luk dialog $ $ ("# dialog"). dialogen ("close");
   

5. Når du klikker på X, lukkes dialogboksen automatisk.

   Dialogboksen har en lille X, der ligner ikonet Luk vindue på de fleste vinduessystemer. Brugeren kan lukke dialogboksen ved at klikke på dette ikon.

6. Du kan åbne og lukke dialogboksen med kode.

   Mine åbne dialog- og tætte dialogknapper kalder funktioner, som styrer opførsel af dialogboksen. Her er f.eks. Funktionen knyttet til Open Dialog-knappen:

   funktion openDialog () {$ ("# dialog"). dialog ("åben");} // end openDialog