状態:-
閲覧数:4,173
投稿日:2013-03-09
更新日:2013-03-20
概要
・よく利用される機能が、コンポーネント形式(jQuery プラグイン)で提供されている
・jQuey形式で書かれているため、コンポーネントより先に「jQuey」を読み込まなければいけない
<script src="bootstrap/js/bootstrap.min.js"></script> |
ダウンロード
・トップページより「Download Bootstrap」ボタンをクリックすることで、全てのコンポーネントを、「bootstrap.js」もしくは「bootstrap.min.js」形式でダウンロード可能
紛らわしくない？
単体ダウロードリンクが存在しない
「Javascript · Bootstrap」ページにダウンロードリンクがない
・例えば「Alert messages」機能を利用しようと思い、該当ページを訪れても、「bootstrap-alert.js」からダウンロードすることは出来ない
・その場合は、カスタマイズページから 目的の「jQuery plugins」を選択するか、もしくはトップページから一括ダウンロード、の2択しかない
※カスタマイズを選択した場合、例え「Alert messages」1つしかチェックしなくても、ダウンロードされるファイル名は固定の「bootstrap.js」＆「bootstrap.min.js」となる
・初めて試した際、思わず、アレ？ 一瞬間違ったのかと思っちゃったよ
・仕様的にはこれでいいとは思うけど、紛らわしい書き方してるから「bootstrap-alert.js」がどこからかダウンロードできると思い、結構探しちゃったよ、チクショー…………、てならないよう注意が必要
デフォルトでは、「Alert messages」は復活できない
「Alert messages」仕様
・「Alert messages」は、デフォルトでは復活できない
・本来の「Alert」の意味合いから言ったらそうなるんだろうけど、でも、今回は「閉じたり開いたり」したい
方法1
「Bootstrap」の「data-dismiss」を使わずに、JQueryの「show()」「hide()」を利用
ボタンをクリックするだけで、「Bootstrapアラート」のオンとオフを切り替えるには？
・ページを更新することなく、アラートを複数回表示させたい
・だけど、アラートは一度だけしか表示されない
・再度アラートを表示したい場合は、ページを更新させるしかない
コード・ページを更新することなく、アラートを複数回表示させたい
・だけど、アラートは一度だけしか表示されない
・再度アラートを表示したい場合は、ページを更新させるしかない
・HTML
<button type="button" class="close">×</button><button type="button" class="open">↓</button><div class="alert alert-success">目次</div> |
・JavaScript
$('.close').click(function() { $('.alert').hide();})$('.open').click(function() { $('.alert').show();}) |
・デモ
実際に試してみた感想
・ 「Bootstrap」の力を利用していないので、さらに手を加えないとフェードはしない
・「data-dismiss」を利用すると、同じクラスでも1件1件個別に消去可能だが、このJQueryのやり方では(クラス指定しているので、クラスを変更しない限りは)、個別削除できない
方法1-1
「Bootstrap」の「data-dismiss」を使わずに、JQueryの「show()」「hide()」を、HTMLに直書
コード
・HTML
<a href="#" onclick="$('.alert').show()">show</a>
<div class="alert fade in" style="display: none"> <a class="close" onclick="$('.alert').hide()">×</a> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> |
・デモ(デフォルト オープン)
・デモ(デフォルト クローズ)
方法2
JQueryの「.on('click')」を利用
・具体的には、ボタンクリックで、「Bootstrapの機能を保持したalert」毎表示させる
コード
・HTML
<input type = "button" id = "clickme" value="Click me!"/><div id = "alert_placeholder"></div> |
・JavaScript
bootstrap_alert = function() {}bootstrap_alert.warning = function(message) { $('#alert_placeholder').html('<div class="alert"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>') }$('#clickme').on('click', function() { bootstrap_alert.warning('Your text goes here');}); |
・デモ(デフォルト クローズ)
※JQuery「.on('click')」と「.click()」に違いはない
方法2-1
JQueryの「.on('click')」を利用、かつ、初めから「Alert」を表示させる
コード
・HTML
<input type = "button" id = "clickme" value="Click me!"/><div id = "alert_placeholder"></div> |
・JavaScript
$(document).ready(function() { bootstrap_alert.warning('Your text goes here'); });bootstrap_alert = function() {}bootstrap_alert.warning = function(message) { $('#alert_placeholder').html('<div class="alert"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>') }
$('#clickme').on('click', function() { bootstrap_alert.warning('Your text goes here');}); |
・デモ(デフォルト オープン）
※「方法2系」では、Alert削除する際、Bootstrap機能を利用しているため、「div class="alert alert-success fade in"」と記述すれば、フェード利用可能
・「Alertを閉じたらDOMから削除される」と書いているけど、「方法2系」でやっていることは「閉じた(削除した)Alert」を開くのではなくて、ボタンをクリックする度に新たに生成している