本文主要來學習一下JavaScript插件--警告框。
警告框
案例
通過這個插件可以爲所有警告框增加關閉功能。
<div id="alert1" class="alert alert-warning fade in"> <button id='alert1' type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. </div>
再來一個小例子
<div class="alert alert-danger fade in"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <h4>Oh snap! You got an error!</h4> <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> <p> <button type="button" class="btn btn-danger">Take this action</button> <button type="button" class="btn btn-success">Or do this</button> </p> </div>
通過data-dismiss屬性即可開始關閉警告框的功能。無須任何的JavaScript的代碼。只需爲關閉按鈕設置data-dismiss="alert"即可自動爲警告框賦予關閉功能。
用法
如果通過JavaScript啓用警告框關閉功能:
我們來修改一下第一簡單的小例子
<div id="alert1" class="alert alert-warning fade in"> <button id='alert1' type="button" class="close" οnclick="Test()" aria-hidden="true">×</button> <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. </div>
我們主要是去掉了關閉按鈕的data-dismiss屬性,然後添加了一個onclick的單擊按鈕事件,也就是關閉警示框的事件。
來看一下如何通過JavaScript來關閉警示框
<script type="text/javascript"> function Test() { $("#alert1").alert('close'); } </script>
爲所有警告框加入關閉功能。如果希望警告框被關閉時呈現動畫效果,請確保爲其添加了.fade 和 .in。
事件
Bootstrap中的警告框暴露了一組事件,允許你進行監聽。
<script type="text/javascript"> $('#alert1').bind('close.bs.alert', function () { alert(1); }) </script>
添加以上代碼之後,再點擊關閉按鈕的時候會先執行function裏面的代碼,然後再關閉警示框的。
總結
感覺上自己越來越熟悉了,完成這個警示框的時間明顯的縮短了,看來自己也是學進去了吧。