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">
 &times;
</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>&times;</span>                     
 </button>                        
 <p>                          
  警告：您的浏览器不支持！                       
 </p>                          
</div>   

2. Fügen Sie Ein- und Ausblendeffekte hinzu

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.

Erklärung dieser Website

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