JavaScript04 jquery プラグインを使おう

JavaScript入門04
jQueryプラグインを使おう

jQueryの
プラグインを
使おう
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
2

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 3
• JavaScriptを利用したコンテンツ制作方法
– JavaScriptのみ
• カレーライスだと、各種香辛料・小麦粉からルーを自作して、ゼロか
らカレーを作る感じ
– ライブラリを利用（例： jQuery）
• カレーライスだと、市販のルーを利用し、野菜や肉は自分で調理して、
カレーを作る感じ
– ライブラリとプラグインを利用（例：lightbox2など）
• カレーライスだと、市販のルーを利用し、カット野菜などを利用して、
軽く調理して、カレーを作る感じ
JavaScriptの利用について

jQuery UIを
使おう
4

5
jQuery UIのカレンダー
• jQuery UIとは
– ユーザーインターフェースのプラグイン
– 簡単にUIが設定できる
– jQuery と一緒に使用する
– ダウンロード
• http://jqueryui.com/
• ファイル容量が大きいので、必要最少限をダウン
ロードする

6
jQuery UI カレンダー
• カレンダー Datepicker
– 使い方は、jQuery UIのリファレンスを見ながら・・・
• プラグイン使用のポイント
– サイトの公式リファレンス（ドキュメント）を見て制
作できるようになる
• 日本語解説サイトがあるとは限らない
• 日本語解説サイトの内容が最新である保証がない

英語でも
頑張る
7

8
jQuery UI カレンダー
• 日付の書式を検討
– 初期設定のままでは、日本の書式ではない
– dataFormat で設定
• 日本語表記
– 初期設定のままでは、英語表記
– 日本語の表記に変更する必要がある
– datepicker-ja.js を利用

画像系の
プラグインを
使おう
9

jQuery 224
で検索
10

• HTML/CSSの理解は必須
– ファイル構造・要素の構成などを考えながら、
作業を行う
• 最低限のjQueryの知識が必要
– jQueryセレクタ、メソッド設定などの理解が
必要
• 英語でも頑張る
プラグイン使用時の注意

1. プラグインをダウンロード
– ファイルの中身を確認する
2. CSS/JavaScript 読み込みを入力
– ダウンロードしたファイル構造を確認しながら入力
– jQueryは複数読み込まない
3. HTML要素をコピペ
– 要素の種類、属性などを確認しながらコピペ
4. jQueryの記述をコピペ
– セレクタを意識しながらコピペ
– オプション設定時は、複数設定
{ プロパティ：値, プロパティ：値}
プラグイン使用時の手順

Lightbox系
プラグインを
使おう
13

14
Lightbox系ライブラリ
• lightbox2
– 写真が拡大するライブラリ全般をLightbox系
と呼ぶくらい有名
• fancyBox
– 表示方法やアニメーションを変更できる
• Nivo Lightbox
– WebサイトやYoutubeも表示できる

スライド系
プラグインを
使おう
15

16
スライド系ライブラリ
• Basic jQuery Slider
– fadeとslideのみのベーシックなスライド
• Unslider
– 容量が軽く、カスタマイズが出来る
• Galleria
– 多機能なスライダー
• bxSlider
– 設置が簡単でシンプル

jQueryを
もう一度
（Pluginもいいけど、自作もね）
17

jQueryだけで
アニメしながら
トップに戻る
18

19
アニメしながらトップに戻る
• jQueryはやっぱり便利
– animateだけ、CSSに「scrollTop」プロパティが使
用できる
– ブラウザ上端から縦ピクセル距離を指定してスク
ロール移動することが出来る
– トップに移動する場合には、距離を０
セレクタ.animate(scrollTop, 距離);

ページ内リンクを
アニメーション移動
20

21
アニメしながらページ内リンク
• 要素の位置を調べる
– ページ内リンク
<a href=“#abc”> → <div id=“abc”>
– 考え方
• a要素をクリック
• hrefのidを取得 → #で値を区切る → split(‘#’)
• idが指定された要素の位置を調べる→offset()
• offset()のtop値を距離として、animateで移動

ページスクロールに
よるコンテンツ変化
（パララックス的な）
22

23
ページスクロールイベント
• ページスクロールしたら処理を実行
– jQuery の scroll()メソッド
• ページのブラウザ表示最上部位置を調べる
– jQuery の scrollTop()メソッド
$(window).scroll(function(){ //ページスクロールした
var py = $(this).scrollTop(); //ページトップ位置
console.log(‘py:’+py);//確認用
その他実行したい処理;
});

JavaScript04 jquery プラグインを使おう

More Related Content

What's hot

Similar to JavaScript04 jquery プラグインを使おう

More from Yossy Taka

JavaScript04 jquery プラグインを使おう