JavaScript in Bootstrap

Bootstrap2系

 状態:-  閲覧数:4,032  投稿日:2013-03-09  更新日:2013-03-20

概要



・よく利用される機能が、コンポーネント形式(jQuery プラグイン)で提供されている
・jQuey形式で書かれているため、コンポーネントより先に「jQuey」を読み込まなければいけない
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>



ダウンロード



トップページより「Download Bootstrap」ボタンをクリックすることで、全てのコンポーネントを、「bootstrap.js」もしくは「bootstrap.min.js」形式でダウンロード可能

紛らわしくない?

 閲覧数:702 投稿日:2013-03-09 更新日:2013-03-09

単体ダウロードリンクが存在しない



「Javascript · Bootstrap」ページにダウンロードリンクがない
・例えば「Alert messages」機能を利用しようと思い、該当ページを訪れても、「bootstrap-alert.js」からダウンロードすることは出来ない
・その場合は、カスタマイズページから 目的の「jQuery plugins」を選択するか、もしくはトップページから一括ダウンロード、の2択しかない
※カスタマイズを選択した場合、例え「Alert messages」1つしかチェックしなくても、ダウンロードされるファイル名は固定の「bootstrap.js」&「bootstrap.min.js」となる
・初めて試した際、思わず、アレ? 一瞬間違ったのかと思っちゃったよ
・仕様的にはこれでいいとは思うけど、紛らわしい書き方してるから「bootstrap-alert.js」がどこからかダウンロードできると思い、結構探しちゃったよ、チクショー…………、てならないよう注意が必要

デフォルトでは、「Alert messages」は復活できない

 閲覧数:961 投稿日:2013-03-09 更新日:2013-03-11

「Alert messages」仕様



・「Alert messages」は、デフォルトでは復活できない
・本来の「Alert」の意味合いから言ったらそうなるんだろうけど、でも、今回は「閉じたり開いたり」したい


方法1



「Bootstrap」の「data-dismiss」を使わずに、JQueryの「show()」「hide()」を利用
ボタンをクリックするだけで、「Bootstrapアラート」のオンとオフを切り替えるには?
・ページを更新することなく、アラートを複数回表示させたい
・だけど、アラートは一度だけしか表示されない
・再度アラートを表示したい場合は、ページを更新させるしかない
コード
・HTML
<button type="button" class="close">&times;</button>
<button type="button" class="open">&darr;</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」を開くのではなくて、ボタンをクリックする度に新たに生成している


Bootstrap v2.3.1

「Twitter Bootstrap」のアイコンは、画像なので色を変更できない



週間人気ページランキング / 9-29 → 10-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 16
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 14
4 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
4 RGBの種類 / ビットカラー | RGB(色) 7
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
5 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
5 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
6 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
6 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
6 「bgcolor」「background-color」「background」の違い | CSS 5
7 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
8 aタグで複数のブロック要素を囲むやり方 | CSS 3
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
9 Design 0 2
9 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
9 16進数カラーコード / 2進数 2
2024/10/6 1:01 更新