Heim >Web-Frontend >js-Tutorial >Bootstrap-Warnbox-Plug-in, das Sie jeden Tag erlernen müssen_Javascript-Kenntnisse
Warnmeldungen werden hauptsächlich verwendet, um Endbenutzern Informationen wie Warnungen oder Bestätigungsmeldungen anzuzeigen. Mit dem Alert-Plugin können Sie allen Warnmeldungen eine Entlassungsfunktion hinzufügen.
Wenn Sie die Funktionalität dieses Plugins separat referenzieren möchten, müssen Sie auf alarm.js verweisen. Alternativ können Sie, wie im Kapitel Übersicht über das Bootstrap-Plugin erwähnt, auf bootstrap.js oder eine minimierte Version von bootstrap.min.js verweisen.
1. Verwendung
Sie können die Entlassungsfunktion der Warnbox auf zwei Arten aktivieren:
1. Über das Datenattribut: Fügen Sie die abbrechbare Funktion über die Daten-API (Daten-API) hinzu. Fügen Sie einfach data-dismiss="alert" zur Schaltfläche „Schließen“ hinzu, und die Schließfunktion wird automatisch zum Warnfeld hinzugefügt.
<a class="close" data-dismiss="alert" href="#" aria-hidden="true"> × </a>
2. Über JavaScript: Abbrechbare Funktion über JavaScript hinzufügen:
$(".alert").alert()
2. Einfaches Beispiel
Die Warnbox ist die Informationsbox zur Klickstunde.
1. Grundlegende Beispiele
<div class="alert alert-warning"> <button class="close" type="button" data-dismiss="alert"> <span>×</span> </button> <p> 警告:您的浏览器不支持! </p> </div>
2. Fügen Sie Ein- und Ausblendeffekte hinzu
975fa5205779abe0c16b2725b6f98dd1
Wenn Sie JavaScript verwenden, können Sie data-dismiss="alert" ersetzen
//JavaScript 方法 $('.close').on('click', function() { $('#alert').alert('close'); })
Es gibt zwei Arten von Ereignissen im Alert-Plug-in:
//事件,其他雷同 $('#alert').on('close.bs.alert', function() { alert('当 close 方法被触发时调用!'); });
Weitere Informationen zu Bootstrap finden Sie im Sonderthema: Bootstrap-Lerntutorial
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass es für alle hilfreich ist, das Bootstrap-Warnbox-Plug-in zu lernen.