Video: Afbeelding of bestand toevoegen aan de mediabibliotheek 2024
AJAX laat HTML5- en CSS3-programmeurs aangepaste dialoogvensters maken. JavaScript levert een aantal dialoogvensters (de dialoogvensters voor meldingen en prompts), maar deze zijn vrij lelijk en relatief inflexibel. De gebruikersinterface van jQuery bevat een techniek om elke div in een virtueel dialoogvenster te veranderen. Het dialoogvenster volgt het thema en is aanpasbaar en verplaatsbaar.
Het bouwen van het dialoogvenster is niet moeilijk, maar je moet het wel kunnen in- en uitschakelen met code, anders werkt het niet als een juist dialoogvenster (dat een venster nabootst in de system):
-
Maak de div die u wilt gebruiken als een dialoogvenster.
Maak een div en geef deze een ID, zodat u deze kunt veranderen in een dialoogvenster. Voeg het titelkenmerk toe en de titel wordt weergegeven in de titelbalk van het dialoogvenster.
Met de dialoogklasse kunt u een verplaatsbaar, aanzienlijk aangepast dialoogvenster hebben dat consistent is met het geïnstalleerde paginathema.
-
Verander de div in een dialoogvenster.
Gebruik de methode dialog () om de div in een jQuery-dialoogvenster te veranderen in de functie init ():
$ ("# dialoogvenster"). dialoogvenster (); -
Verberg het dialoogvenster standaard.
Meestal wilt u niet dat het dialoogvenster zichtbaar is totdat er een gebeurtenis plaatsvindt. In dit specifieke voorbeeld wilt u misschien niet dat het dialoogvenster verschijnt totdat de gebruiker op een knop klikt. U kunt een code invoeren om het dialoogvenster in de functie init () te sluiten, zodat het dialoogvenster niet wordt weergegeven totdat het wordt opgeroepen.
-
Sluit het dialoogvenster.
Als u een dialoogvenster wilt sluiten, raadpleegt u het dialoogvenster knooppunt en roept u de methode dialog () er opnieuw op. Stuur deze keer de enkele waarde "close" als parameter en het dialoogvenster wordt onmiddellijk gesloten:
// aanvankelijk dialoogvenster $ sluiten ("# dialoogvenster"). dialoogvenster ("close"); -
Als u op X klikt, wordt het dialoogvenster automatisch gesloten.
Het dialoogvenster bevat een kleine X die op de meeste venstersystemen lijkt op het pictogram van het venster Sluiten. De gebruiker kan het dialoogvenster sluiten door op dit pictogram te klikken.
-
U kunt het dialoogvenster openen en sluiten met code.
Mijn Open Dialoogvenster en Dialoogvenster Sluiten bevatten functies die het gedrag van het dialoogvenster bepalen. Hier is bijvoorbeeld de functie die is gekoppeld aan de knop Dialoog openen:
function openDialog () {$ ("# dialog"). dialog ("open");} // end openDialog
