Heim > Artikel > Web-Frontend > Informationen zur Verwendung des jquery.edbox-Plug-Ins
jquery.edbox.js ist ein leichtes, auf JQuery reagierendes modales Fenster-Plug-in. Mit diesem Plug-in für modale JQuery-Fenster können Sie ganz einfach reaktionsfähige, animierte und AJAX-basierte modale Dialogeffekte erstellen.
Zu seinen Funktionen gehören:
Sie können den Stil des modalen Fensters über CSS ändern.
Sie können den Inhalt der Kopf- und Fußzeile des modalen Fensters anpassen.
Sie können den Ladeeffekt anpassen.
Unterstützt Inhalte in mehreren Formaten: HTML, Text, Bilder und AJAX-Inhalte usw.
Unterstützt 4 Alarmszenariomodi: Erfolg, Info, Warnung und Gefahr.
Anpassbare Animation zum Öffnen und Schließen modaler Fenster.
Rückrufmethoden unterstützen.
Installation
Sie können das jquery.edbox.js-Plug-in über npm oder Yarn installieren.
npm install jquery.edbox
yarn add jquery.edbox Stellen Sie die. edbox vor .css-Datei, jquery- und jquery.edbox.js-Dateien.
HTML-Struktur
Die einfachste Möglichkeit, ein modales Fenster zu verwenden, ist die Verwendung eines e388a4556c0f65e1904146cc1a846bee als modales Fenster A Inhaltscontainer, in dem HTML, Text, Bilder, AJAX-Inhalte usw. platziert werden können.<link href="dist/edbox.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/jquery.edbox.js"></script>
Dann lösen Sie das modale Fenster über einen Hyperlink oder eine Schaltfläche aus.
<p id="target">模态窗口内容</p>
<ahref="#"edbox data-box-target="#target">打开模态窗口</a>Nachdem das Seiten-DOM-Element geladen wurde, initialisieren Sie das Modul über edbox() ; Methodenstatusfenster-Plugin.
HTML-, Bilder- und AJAX-Inhalte in das modale Fenster laden
$('.trigger-link').edbox();
Die Methode zum Hinzufügen von Bildern ist wie folgt:
<pid="target"data-box-html="<p class='example-html'>这是HTML内容</p>" >模态窗口内容</p>Die Methode zum Hinzufügen von AJAX-Inhalten ist wie folgt:
$('.trigger-link').edbox();
<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>
$('.link-image').edbox({ image: 'curitiba-brazil.jpg' });
Methoden
<!-- 使用 href 或者 data-box-url 属性 --> <a href="assets/html/curitiba.html" class="link-url">URL load example</a>Die verfügbaren Methoden des modalen Fenster-Plug-ins jquery.edbox.js sind:
$('.link-url').edbox({ //add an extra class to the modal for an especific style addClass: 'example-url', width: 900 });
Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung des jquery.edbox-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!