Bootstrap-Warnbox-Plug-in, das Sie jeden Tag erlernen müssen_Javascript-Kenntnisse-js-Tutorial-php.cn

Bootstrap-Warnbox-Plug-in, das Sie jeden Tag erlernen müssen_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:04:01

Original

1376 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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');
})

Nach dem Login kopieren

Es gibt zwei Arten von Ereignissen im Alert-Plug-in:

//事件，其他雷同

$('#alert').on('close.bs.alert', function() {
 alert('当 close 方法被触发时调用！');
});

Nach dem Login kopieren

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.