ブートストラップ アラート ボックス
ブートストラップ アラート プラグイン
アラート メッセージは、主に、警告や確認メッセージなどの情報をエンド ユーザーに表示するために使用されます。アラート プラグインを使用すると、すべてのアラート メッセージに削除機能を追加できます。
使用法
次の 2 つの方法で警告ボックスの解除機能を有効にすることができます:
データ属性を通して: Data API (Data API) を通じて解除機能を追加します。解除機能を追加するだけです。閉じるボタンに data-dismiss="alert" を追加すると、警告ボックスに閉じる機能が自動的に追加されます。
<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
×
</a>
×
</a>
合格JavaScript: JavaScript を通じてキャンセル可能な機能を追加します:
$(".alert").alert()
例
次の例は、データ属性を使用した Alert プラグインの使用を示しています
インスタンス
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 警告框（Alert）插件</title> <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert"> × </a> <strong>警告！</strong>您的网络连接有问题。 </div> </body> </html>
インスタンスの実行»
オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください
オプション
オプションはありません。
メソッド
アラートプラグインの便利なメソッドをいくつか紹介します:
| メソッド | 説明 | インスタンス |
|---|---|---|
| .alert() | このメソッドは、すべてのアラートボックスにシャットダウン機能を付けます。 | $('#identifier').alert(); |
| Closeメソッド .alert('close') | すべての警告ボックスを閉じます。 | りー |
閉じる際のアニメーションを有効にするには、.fade クラスと .in クラスを必ず追加してください。
例
次の例は、.alert()メソッドの使用法を示しています。
以下の例は、オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
すべての警告ボックスを表示できます。 閉じる機能が適用されます。つまり、いずれかの警告ボックスが閉じられ、残りの他の警告ボックスも閉じられます。 DescriptionInstanceclose.bs.alert| インスタンス メソッドが呼び出されるとすぐにトリガーされます。 | <!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 警告框（Alert）插件 alert() 方法</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<h3>警告框（Alert）插件 alert() 方法</h3>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>成功！</strong>结果是成功的。
</div>
<div id="myAlert" class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>警告！</strong>您的网络连接有问题。
</div>
<script type="text/javascript">
$(function(){
$(".close").click(function(){
$("#myAlert").alert();
});
});
</script>
</body>
</html> | |
|---|---|---|
| このイベントは、アラート ボックスが閉じられたときにトリガーされます (CSS トランジション効果が完了するまで待機します)。 | <!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 警告框（Alert）插件 alert('close') 方法</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<h3>警告框（Alert）插件 alert('close') 方法</h3>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>成功！</strong>结果是成功的。
</div>
<div id="myAlert" class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>警告！</strong>您的网络连接有问题。
</div>
<script type="text/javascript">
$(function(){
$(".close").click(function(){
$("#myAlert").alert('close');
});
});
</script>
</body>
</html> | インスタンス |
| インスタンス | $('#myalert').bind('close.bs.alert', function () {
// 执行一些动作...
}) |
