月別アーカイブ: 2013年5月

jQueryなしのTwitter Bootstrap

Twitter Bootstrap web page私はTwitter Bootstrapを使えば使うほど好きになっています。ただ何かを表示したり隠したりするような単純な操作にもjQueryが必要なのは残念です。jQueryは素晴らしいライブラリですが、サイトにとって利点がなければ無駄になり、Webページに不要なバイト数を増やすことになります。対策として、Bootstrap専用の代替的な軽量スクリプトを作ってみました。

ダウンロードはこちら

このスクリプトを使うには、以下のように、jQueryやBootstrapプラグインスクリプトの代わりに、Webページ上に(できれば下のところに)ただ置いておくだけです。

    ...
    <script src="bootstrap-without-jquery.min.js"></script>
  </body>
</html>

ページを読み込む時間が速くなるからパフォーマンスが改善されるというメリットがあります。当然ながらjQueryやBootstrapプラグインでできることすべてが可能になるわけではありませんが、以下の機能であればこれで十分でしょう。

  • ドロップダウンメニューの動作
  • 閉じることができるアラートボックス
  • いわゆる「ハンバーガー」ボタンでトリガーされる、スライド式ナビゲーションメニュー

Internet Explorer 8など、様々なモバイル、デスクトップのブラウザで試しましたが、動作するかしないかに関するレポートをいただければありがたく存じます。JavaScriptを必要とするBootstrapの構成要素が別にあるかもしれませんので、需要があれば (あるいはプルリクエストを送っていただくこともできます)、サポートさせていただきます。ブラウザサポートに関する詳細などはGitHubのページにあります: github.com/tagawa/bootstrap-without-jquery

テスト用のデモページも用意しました。いつでも、フィードバック大歓迎です!