Bootstrap-alert-plugin

ブートストラップ-アラートプラグイン

アラートメッセージは主に、警告や確認メッセージなどの情報をエンドユーザーに表示するために使用されます。 アラートメッセージプラグインを使用すると、すべてのアラートメッセージに却下機能を追加できます。

'_このプラグイン機能を個別に含める場合は、 alert.js が必要です。 または、リンク：/bootstrap/bootstrap_plugins_overview [Bootstrap Plugins Overview]で説明されているように、_bootstrap.js_または縮小された_bootstrap.min.js_を含めることができます。_

使用法

次の2つの方法でアラートの解除を有効にできます-

• データ属性を介して-Data APIを使用して閉じるには、 data-dismiss = "alert" を閉じるボタンに追加して、自動的にアラートクローズ機能を提供します。

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

• Via JavaScript -JavaScriptを使用して閉じるには、次の構文を使用します-

$(".alert").alert()

例

次の例は、データ属性を介したアラートプラグインの使用方法を示しています。

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>

   <strong>Warning!</strong> There was a problem with your network connection.
</div>

オプション

ここにはオプションはありません。

方法

以下は、アラートプラグインのいくつかの便利な方法です-

Method	Description	Example
.alert()	This method wraps all alerts with close functionality.	$('#identifier').alert();
Close Method .alert('close')	To enable all alerts to be closed, add this method.	$('#identifier').alert('close');

'_閉じたときにアラートがアニメーション表示されるようにするには、アラートに .fade および .in クラスが既に適用されていることを確認してください。_

例

次の例は、*。alert（）*メソッドの使用方法を示しています-

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert();
      });
   });
</script>

次の例は、*。alert（ 'close'）*メソッドの使用を示しています-

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });
</script>

*Try it* エディターを使用してこのコードを試してください。 閉じる機能がすべてのアラートメッセージに適用されていることがわかります。 警告メッセージを閉じると、残りの警告メッセージも閉じられます。

イベント

次の表に、アラートプラグインで動作するイベントを示します。 このイベントは、アラート機能にフックするために使用できます。

Event	Description	Example
close.bs.alert	This event fires immediately when the close instance method is called.	$('#myalert').bind('close.bs.alert', function () { //do something })
closed.bs.alert	This event is fired when the alert has been closed (will wait for CSS transitions to complete).	$('#myalert').bind('closed.bs.alert', function () { //do something })

例

次の例は、アラートプラグインイベントを示しています-

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>