JavaScriptを使ったbootstrap

スポンサーサイト

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-------- スポンサー広告

JavaScriptが何なのかざっくりと説明しましたが、どんなものなのか実際に見て行きましょう。

bootstrapで作ったsample.htmlを一部変更します。

　<li><a href="#">お問い合わせ</a></li>

となっていた部分を↓のように書き換えます。


                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">お問い合わせ <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">プロジェクトについて</a></li>
                    <li><a href="#">記事について</a></li>
                    <li><a href="#">広告について</a></li>
                    <li class="divider"></li>
                    <li><a href="#">その他</a></li>
                  </ul>
                </li>

これで、ナビゲーションの「お問い合わせ」にドロップダウンが付きました。

「お問い合わせ」をクリックすると、サブメニューが表示されたり消えたりします。

これはbootstrapの内部でJavaScriptを使い、HTMLを書き換えているのです。

やっていることを上から簡単に説明します。

class="dropdown"

ドロップダウンしたい場所を判断するために指定してます。

class="dropdown-toggle" data-toggle="dropdown"

これは、クリックしたときの動作を変更しています。

class="caret"

まぁ、▼ですね。

ul class="dropdown-menu"

ドロップダウンで表示されるリストの指定になります。

class="divider"

区切り線です。

このようにbootstrapで決められたclass指定を行うことで、JavaScript側からHTMLを取得したり、書き換えたりしています。

例えばdropdown-menuは、CSSで非表示の設定がされているため最初は表示されませんが、class="open"の子階層の時は表示されるCSSが設定されています。

具体的には、

.dropdown-menu {
　display: none;
}
.open > .dropdown-menu {
　display: block;
}

って感じです。

そして、「お問い合わせ」をクリックした時、親階層にopenを追加したり削除したりする、という処理がされています。toggle（トグル）というのは、ボタンのON/OFFを切り替える仕組みのことです。

で、今回だと頭のul class="dropdown"ですね。

「お問い合わせ」をクリックすると、class="dropdown open"になったり、戻ったりするわけです。

これでul class="dropdown-menu"の中身が表示されたり消えたりして、結果的にドロップダウンメニューに見えます。

今回JavaScript自体は書いていませんが、bootstrap等のライブラリを使うことで、HTMLの記述のみでも動きのあるサイトを作れました。JavaScriptを使うことで、より一層使いやすいエロサイトをイメージして頂けたら幸いです。

個人的に、画面を何度も遷移して広告をいっぱい読みこむのは好きで無いのです。

もちろん、今後はJavaScriptを書いていきますが、みんなが欲しいものって大抵はライブラリになっていますので、使えるものはどんどん使いましょう。ただ、色々なライブラリを読み込み過ぎるとページが重くなるので、使いすぎには注意が必要です。

関連記事

2013-04-08 JavaScript Comment:0 Trackback:0

このページのトップへ

トラックバック

この記事にトラックバックする(FC2ブログユーザー)

このページのトップへ

コメントの投稿

このページのトップへ