Heim  >  Artikel  >  Web-Frontend  >  Informationen zur Verwendung des jquery.edbox-Plug-Ins

Informationen zur Verwendung des jquery.edbox-Plug-Ins

零到壹度
零到壹度Original
2018-03-28 16:44:051946Durchsuche

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.


Initialisierungs-Plug-in
<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

Die Methode zum Laden von HTML-Inhalten in das modale Fenster ist wie folgt folgt: Geben Sie einfach Ihren HTML-Inhalt in das data-box-html-Attribut ein.
$(&#39;.trigger-link&#39;).edbox();

Die Methode zum Hinzufügen von Bildern ist wie folgt:

<pid="target"data-box-html="<p class=&#39;example-html&#39;>这是HTML内容</p>" >模态窗口内容</p>
Die Methode zum Hinzufügen von AJAX-Inhalten ist wie folgt:
$(&#39;.trigger-link&#39;).edbox();

<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>
$(&#39;.link-image&#39;).edbox({
  image: &#39;curitiba-brazil.jpg&#39;
});

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:
$(&#39;.link-url&#39;).edbox({
  //add an extra class to the modal for an especific style
  addClass: &#39;example-url&#39;,
  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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Einführung in AngularJSNächster Artikel:Einführung in AngularJS