JavaScriptライブラリー1

このページでは、使用頻度高めのJavaScriptライブラリー(主にjQuery)を紹介します。
使用には、jQueryの「基礎知識」があることが前提です。
基礎知識とは、jQueryが書けるということではなく、jQueryがどんなものであるかの基本を理解している、という意味です。
判らないという人は以下のサイトで学習してください。
CSSは分かるけど jQuery は苦手 …

基本ルール

  • 汎用ライブラリーは/js/libs.jsに記述する(使用しないライブラリーは記述しないこと)
  • 汎用ライブラリーのCSSは、/css/page.cssに記述する(使用しないライブラリーは記述しないこと)
  • ページ固有で使用するライブラリーは、原則、使用するページのみで読み込む、または設定を記述する
  • /js/__js_libs/と/css/__css_libs/はライブラリー管理用。納品時には削除すること

端末別処理

PC、スマートフォン、タブレットごとに処理を分ける場合に使用します。
たとえば、JSの処理、読み込むCSSを振り分ける場合など。

使用例

  • CSS(レスポンシブ)でできることは、CSSで処理してください。

カラムの高さ揃え

カラム表示をしているボックスの高さを揃える場合に使用します。

表示サンプル

  • あああああああ
  • ああああああああああああああああああああああああああああああああああああ
  • ああああああああああああああああああああああああああああああああああああ
  • ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
  • ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
  • ああああああああああああああああああああああああああああああああああああ

ライブラリー(格納先)

  • /js/__js_libs/jquery.matchHeight-min.js

設定

  • 画像など読み込みが遅い要素が中にある場合、高さを正確に設定できない場合があるのでロード後に実行させます。
  • flexboxに移行後は、使用は限定的になります。

タブメニュー

選択したタブをCookieで保存できるタブメニューです。

サンプル

ここにタブ1の中身が表示されます。
ここにタブ2の中身が表示されます。
ここにタブ3の中身が表示されます。

JavaScript

HTML

CSS

アコーディオンメニュー

スマホ版のメニューやFAQなどに利用できます。

サンプル

JavaScript

HTML

CSS

ポップアップ

ほぼなんでもモーダル表示できるライブラリーです。

サンプル

ライブラリー(格納先)

  • /js/__js_libs/jquery.magnific-popup.min.js
  • /css/__css_libs/magnific-popup.css

CSSライブラリー

設定

HTML

CSS

スライダー

安定性、カスタマイズ性に優れたスライダーです。

サンプル

ライブラリー(格納先)

  • /js/__js_libs/slick.min.js
  • /css/__css_libs/slick.css

設定

HTML

CSS