IT情報@PRO人

Bootstrapで利用できるjQueryプラグイン Layout


Bootstrapで利用できるjQueryプラグイン Layout

Bootstrapで簡単に利用可能なjQueryのプラグインをご紹介します。
今回はLayout編です。

レイアウトといっても、テーブルの機能拡張やスクロールの調整など色々なプラグインがあります。

DataTables | Table plug-in for jQuery

http://www.datatables.net/
DataTables | Table plug-in for jQuery

HTMLのテーブルといったら、DataTableですね。
とにかく機能が多く、簡単に見た目も変えられます。しかもソートなどの実装も簡単です。
すごいの一言です。ありがたいプラグインです。
一度はチャレンジして色々いじりたいところだと思いますが、細かいことをやろうとするとかなりはまります。
ただ、提供されている機能を簡単に利用する場合は、サンプルなども多く存在するので、使いやすいと思います。

fullcalendar

http://arshaw.com/fullcalendar/
fullcalendar

まずはサイトに行ってください。感動します。プログラマなら感動します。
サイトにカレンダーを設置する場合にまず利用するのがfullcalenderです。
機能満載!最高です。
デフォルトの設定でもかなり使えるのですが、色々カスタマイズの方法が検索できます。

mmenu

http://mmenu.frebsite.nl/
mmenu

スマートフォントのフリックメニューを簡単に実装できます。
jQueryMobileと悩むところですが、試してみてもよいかもしれません。
この手のメニューは実装すると時間がかかります。まずは、サイトでチュートリアルを見ながら動きを確認するのがよいかと思います。

Nicescroll

http://areaaperta.com/nicescroll/
Nicescroll

レスポンス対応しているとスクロールの問題が付いて回る感じがします。
そんな問題を一気に解決してくれるプラグインです!!
ただ、反応が遅い場合があり、たまに不便なこともあるのですが、ネイティブのスクロールをラッピングしてスクロールの制御をしてくれます。
他のプラグインと相性が悪い時もあるので、注意が必要です。特にDrag&Dropなどは変になる場合が多い気がします。
また、アコーディオンで下スクロールが表示される場合などもうまく動かない場合があるような気がします。
スクロールはゆっくりとスクロールするような感じになり、動きはとてもスマートです。

Tab drop for Bootstrap

http://www.eyecon.ro/bootstrap-tabdrop/
Tab drop for Bootstrap

レスポンシブ対応している場合に、デバイス幅が小さくなるとタブの選択が下に行ってしまいます。
そんなときに役に立つのが、Tab drop for Bootstrapです。
画面を小さくしていくと、表示が折り返す場合に一番左のDropDownにしまってくれます。
地味に便利なんです。使ってみるとわかるのですが、地味に便利。

jQuery Steps

http://www.jquery-steps.com/
jQuery Steps

フォーム入力などを実装するのにステップに切り分けたいときに便利です。
画面をわけずに一画面で行うのが流行っていますが、簡単に実装できます。

  • このエントリーをはてなブックマークに追加

PAGE TOP