スポンサーサイト

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

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を書いていきますが、みんなが欲しいものって大抵はライブラリになっていますので、使えるものはどんどん使いましょう。ただ、色々なライブラリを読み込み過ぎるとページが重くなるので、使いすぎには注意が必要です。
関連記事

コメントの投稿

非公開コメント

プロフィール

エロぺんぎん

管理人:エロぺんぎん
不純な動機でプログラマーになった男、エロぺんぎんです。ブラザー達を猛烈に応援したい気持ちと、自分もプログラマーとして成長したい思いで、当ブログを立ち上げました。
エロぺん動画を運営しております。

検索フォーム
Twitter
最新記事
最新コメント
カテゴリ
リンク
RSSリンク
エロぺん動画で人気の動画
人気の記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。