Bootstrap Alert-Plugin

Warnmeldungen (Alerts) werden meistens verwendet, um Endbenutzern Informationen wie Warnungen oder Bestätigungsmeldungen anzuzeigen. Mit dem Alert-Plugin können Sie allen Warnmeldungen eine Schließfunktion hinzufügen.

Nutzung

Sie können die Schließfunktionalität von Alerts auf die folgenden zwei Arten aktivieren:

  • Über Datenattribute: Um die Schließfunktionalität über die Data-API hinzuzufügen, fügen Sie dem Schließen-Button einfachdata-dismiss="alert"hinzu, und die Schließfunktionalität wird dem Alert automatisch hinzugefügt.
    <a class="close" data-dismiss="alert" href="../index.html" aria-hidden="true">
    &times;
</a>
  • Über JavaScript: So fügen Sie die Schließfunktionalität über JavaScript hinzu:
    $(".alert").alert()

Beispiel

Das folgende Beispiel demonstriert, wie das Alert-Plugin über Datenattribute verwendet wird.

Beispiel

<div class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert"> &times; </a> <strong>Warnung!</strong>Es gibt ein Problem mit Ihrer Netzwerkverbindung.</div>

Ausprobieren »

Das Ergebnis ist wie folgt:

警告框（Alert）插件

Optionen

Es gibt keine Optionen.

Methoden

Hier sind einige nützliche Methoden im Alert-Plugin:

MethodeBeschreibungBeispiel
.alert()Diese Methode sorgt dafür, dass alle Alert-Boxen eine Schließfunktion haben. 
$('#identifier').alert();
Schließen-Methode .alert('close')Schließt alle Alert-Boxen. 
$('#identifier').alert('close');
Um Animationseffekte beim Schließen zu aktivieren, stellen Sie sicher, dass Sie die Klassen.fadeund.in hinzufügen.

Beispiel

Das folgende Beispiel demonstriert die Verwendung der.alert()-Methode:

Beispiel

<h3>Alert-Plugin alert()-Methode</h3> <div id="myAlert" class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>Erfolg!</strong>Das Ergebnis ist erfolgreich.</div> <div id="myAlert2" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>Warnung!</strong>Es gibt ein Problem mit Ihrer Netzwerkverbindung.</div> <script>
$(function(){ $(".close").click(function(){ $("#myAlert").alert(); $("#myAlert2").alert(); }); });
</script>

Ausprobieren »

Das folgende Beispiel demonstriert die Verwendung der.alert('close')-Methode:

Beispiel

<h3>Alert-Plugin alert('close')-Methode</h3> <div id="myAlert" class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>Erfolg!</strong>Das Ergebnis ist erfolgreich.</div> <div id="myAlert2" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>Warnung!</strong>Es gibt ein Problem mit Ihrer Netzwerkverbindung.</div> <script>
$(function(){ $(".close").click(function(){ $("#myAlert").alert('close'); $("#myAlert2").alert('close'); }); });
</script>

Ausprobieren »

Sie können sehen, dass auf alle Alert-Boxen die Schließfunktionalität angewendet wurde, d. h., das Schließen eines Alerts schließt auch die verbleibenden Alerts.

Ereignisse

Die folgende Tabelle listet die im Alert-Plugin verwendeten Ereignisse auf. Diese Ereignisse können als Hooks in Funktionen verwendet werden.

EreignisBeschreibungBeispiel
close.bs.alertWenn dieclose-Instanzmethode aufgerufen wird, wird dieses Ereignis sofort ausgelöst. 
$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})
closed.bs.alertDieses Ereignis wird ausgelöst, wenn der Alert geschlossen wurde (es wartet darauf, dass der CSS-Übergang abgeschlossen wird). 
$('#myalert').bind('closed.bs.alert', function () {
    // 执行一些动作...
})

Beispiel

Das folgende Beispiel demonstriert die Ereignisse des Alert-Plugins:

Beispiel

<div id="myAlert" class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>Erfolg!</strong>Das Ergebnis ist erfolgreich.</div> <script>
$(function(){ $("#myAlert").bind('closed.bs.alert', function () { alert("Das Warnungsnachrichtenfeld ist geschlossen."); }); });
</script>

Ausprobieren »

Das Ergebnis ist wie folgt:

警告框（Alert）插件事件
Weitere Erweiterungen