Video: Erstellen benutzerdefinierter Papierformate für das Drucken unter Windows 2024
Mit AJAX können HTML5- und CSS3-Programmierer benutzerdefinierte Dialogfelder erstellen. JavaScript stellt einige Dialogfelder bereit (die Dialogfelder Warnung und Eingabeaufforderung), aber diese sind ziemlich hässlich und relativ unflexibel. Die jQuery-Benutzeroberfläche enthält eine Technik zum Umwandeln eines div in ein virtuelles Dialogfeld. Das Dialogfeld folgt dem Thema und ist veränderbar und beweglich.
Das Erstellen des Dialogfelds ist nicht schwierig, aber Sie müssen in der Lage sein, es mit Code ein- und auszuschalten, oder es wird nicht wie ein richtiges Dialogfeld (das ein Fenster im Betrieb nachahmt System):
-
Erstellen Sie das div, das Sie als Dialogfeld verwenden möchten.
Erstellen Sie ein div und geben Sie ihm eine ID, damit Sie es in einen Dialogfeldknoten umwandeln können. Fügen Sie das Titelattribut hinzu, und der Titel wird in der Titelleiste des Dialogfelds angezeigt.
Die Dialogklasse ermöglicht es Ihnen, ein veränderbares, angepasstes Dialogfeld zu haben, das mit dem installierten Seitenthema konsistent ist.
-
Verwandeln Sie das div in ein Dialogfeld.
Verwenden Sie die dialog () -Methode, um das div in der init () -Funktion in einen jQuery-Dialogfeldknoten umzuwandeln:
$ ("# dialog"). Dialog(); -
Blendet das Dialogfeld standardmäßig aus.
Normalerweise soll das Dialogfeld erst angezeigt werden, wenn ein Ereignis eintritt. In diesem Beispiel möchten Sie möglicherweise nicht, dass das Dialogfeld angezeigt wird, bis der Benutzer auf eine Schaltfläche klickt. Sie können Code einfügen, um das Dialogfeld in der Funktion init () zu schließen, damit das Dialogfeld erst angezeigt wird, wenn es aufgerufen wird.
-
Schließen Sie das Dialogfeld.
Um ein Dialogfeld zu schließen, verweisen Sie auf den Dialogfeldknoten und rufen die Methode dialog () erneut auf. Senden Sie diesmal den Einzelwert "close" als Parameter und das Dialogfeld wird sofort geschlossen:
// Schließen Sie zunächst den Dialog $ ("# dialog"). Dialog ("schließen"); -
Wenn Sie auf das X klicken, wird das Dialogfeld automatisch geschlossen.
Das Dialogfeld hat ein kleines X, das auf den meisten Fenstersystemen wie das Symbol zum Schließen des Fensters aussieht. Der Benutzer kann das Dialogfeld schließen, indem er auf dieses Symbol klickt.
-
Sie können das Dialogfeld mit Code öffnen und schließen.
Die Schaltflächen "Öffnen" und "Schließen" rufen Funktionen auf, die das Verhalten des Dialogfelds steuern. Zum Beispiel ist hier die Funktion, die an die Schaltfläche "Öffnen" angehängt ist:
function openDialog () {$ ("# dialog"). dialog ("open");} // openDialog beenden
