English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
I messaggi di finestra di avviso (Alert) sono principalmente utilizzati per visualizzare informazioni come avvisi o conferme agli utenti finali. Utilizzando l'estensione di finestra di avviso (Alert), è possibile aggiungere la funzione di annullamento (dismiss) a tutti i messaggi di finestra di avviso.
Puoi abilitare la funzionalità di annullamento (dismissal) delle finestre di avviso in due modi:
Tramite attributo dataAggiungi funzionalità annullabili tramite l'API dei dati (Data API), aggiungi semplicemente data-dismiss="alert"verrà aggiunta automaticamente la funzionalità di chiusura alla finestra di avviso.
<a data-dismiss="alert" href="#" aria-hidden="true"> × </a>
Tramite JavaScriptAggiungi funzionalità annullabili tramite JavaScript:
$(".alert").alert();Esempio di dimostrazione: utilizzo del plugin di finestra di avviso (Alert) tramite attributi data.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Plugin di finestra di avviso (Alert)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert"> × </a> <strong>Attenzione!</strong> Il tuo collegamento di rete ha problemi. </div> </body> </html>测试看看 ‹/›
结果如下所示：
Nessuna opzione.
Ecco alcuni metodi utili del plugin di finestra di avviso (Alert):
| Metodo | Descrizione | Esempio |
|---|---|---|
| .alert() | Questo metodo rende tutte le finestre di avviso chiudibili. | $('#identifier').alert(); |
| Metodo di chiusura .alert('close') | Chiudi tutte le finestre di avviso. | $('#identifier').alert('close'); |
Per abilitare l'effetto animazione durante la chiusura, assicurati di aver aggiunto .fade e .in class.
Esempio di dimostrazione: .alert() Utilizzo del metodo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esempio Bootstrap - Plugin di finestra di avviso (Alert) metodo alert()</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Plugin di finestra di avviso (Alert) metodo alert()</h2>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Successo!</strong> Il risultato è stato un successo.
</div>
<div id="myAlert2" class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Attenzione!</strong> Il tuo collegamento di rete ha problemi.
</div>
<script>
$(function() {
$(".close").click(function(){
$("#myAlert").alert();
$("#myAlert2").alert();
});
});
</script>
</body>
</html>测试看看 ‹/›Esempio di dimostrazione: .alert('close') Utilizzo del metodo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esempio Bootstrap - Plugin di finestra di avviso (Alert) metodo alert('close')</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Plugin di finestra di avviso (Alert) metodo alert('close')</h2>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Successo!</strong> Il risultato è stato un successo.
</div>
<div id="myAlert2" class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Attenzione!</strong> Il tuo collegamento di rete ha problemi.
</div>
<script>
$(function() {
$(".close").click(function(){
$("#myAlert").alert('close');
$("#myAlert2").alert('close');
});
});
</script>
</body>
</html>测试看看 ‹/›Puoi vedere che tutti gli alert applicano la funzione di chiusura, ossia chiudere qualsiasi alert, altri alert rimanenti verranno chiusi.
La tabella di seguito elenca gli eventi utilizzati nel plugin di alert (Alert). Questi eventi possono essere utilizzati come hook nelle funzioni.
| Evento | Descrizione | Esempio |
|---|---|---|
| close.bs.alert | Quando si chiama close Questo evento viene attivato immediatamente quando viene chiamato il metodo di esempio. | $('#myalert').bind('close.bs.alert', function () {
// Esegui alcune azioni...
}) |
| closed.bs.alert | Questo evento viene attivato quando l'alert viene chiuso (l'effetto di transizione CSS viene atteso). | $('#myalert').bind('closed.bs.alert', function () {
// Esegui alcune azioni...
}) |
Di seguito è riportato un esempio che dimostra gli eventi del plugin di alert (Alert):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example di Bootstrap - Plugin di Alert con Eventi</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Successo!</strong> Il risultato è stato un successo.
</div>
<script type="text/javascript">
$(function() {
$("#myAlert").bind('closed.bs.alert', function () {
alert("警告消息框被关闭。");
});
});
</script>
</body>
</html>测试看看 ‹/›结果如下所示：