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を
使おう
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
4
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
5
jQuery UIのカレンダー
• jQuery UIとは
– ユーザーインターフェースのプラグイン
– 簡単にUIが設定できる
– jQuery と一緒に使用する
– ダウンロード
• http://jqueryui.com/
• ファイル容量が大きいので、必要最少限をダウン
ロードする
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
6
jQuery UI カレンダー
• カレンダー Datepicker
– 使い方は、jQuery UIのリファレンスを見ながら・・・
• プラグイン使用のポイント
– サイトの公式リファレンス(ドキュメント)を見て制
作できるようになる
• 日本語解説サイトがあるとは限らない
• 日本語解説サイトの内容が最新である保証がない
英語でも
頑張る
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
7
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
8
jQuery UI カレンダー
• 日付の書式を検討
– 初期設定のままでは、日本の書式ではない
– dataFormat で設定
• 日本語表記
– 初期設定のままでは、英語表記
– 日本語の表記に変更する必要がある
– datepicker-ja.js を利用
画像系の
プラグインを
使おう
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
9
jQuery 224
で検索
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
10
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 11
• HTML/CSSの理解は必須
– ファイル構造・要素の構成などを考えながら、
作業を行う
• 最低限のjQueryの知識が必要
– jQueryセレクタ、メソッド設定などの理解が
必要
• 英語でも頑張る
プラグイン使用時の注意
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 12
1. プラグインをダウンロード
– ファイルの中身を確認する
2. CSS/JavaScript 読み込みを入力
– ダウンロードしたファイル構造を確認しながら入力
– jQueryは複数読み込まない
3. HTML要素をコピペ
– 要素の種類、属性などを確認しながらコピペ
4. jQueryの記述をコピペ
– セレクタを意識しながらコピペ
– オプション設定時は、複数設定
{ プロパティ:値, プロパティ:値}
プラグイン使用時の手順
Lightbox系
プラグインを
使おう
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
13
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
14
Lightbox系ライブラリ
• lightbox2
– 写真が拡大するライブラリ全般をLightbox系
と呼ぶくらい有名
• fancyBox
– 表示方法やアニメーションを変更できる
• Nivo Lightbox
– WebサイトやYoutubeも表示できる
スライド系
プラグインを
使おう
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
15
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
16
スライド系ライブラリ
• Basic jQuery Slider
– fadeとslideのみのベーシックなスライド
• Unslider
– 容量が軽く、カスタマイズが出来る
• Galleria
– 多機能なスライダー
• bxSlider
– 設置が簡単でシンプル
jQueryを
もう一度
(Pluginもいいけど、自作もね)
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
17
jQueryだけで
アニメしながら
トップに戻る
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
18
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
19
アニメしながらトップに戻る
• jQueryはやっぱり便利
– animateだけ、CSSに「scrollTop」プロパティが使
用できる
– ブラウザ上端から縦ピクセル距離を指定してスク
ロール移動することが出来る
– トップに移動する場合には、距離を0
セレクタ.animate(scrollTop, 距離);
ページ内リンクを
アニメーション移動
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
20
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
21
アニメしながらページ内リンク
• 要素の位置を調べる
– ページ内リンク
<a href=“#abc”> → <div id=“abc”>
– 考え方
• a要素をクリック
• hrefのidを取得 → #で値を区切る → split(‘#’)
• idが指定された要素の位置を調べる→offset()
• offset()のtop値を距離として、animateで移動
ページスクロールに
よるコンテンツ変化
(パララックス的な)
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
22
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
23
ページスクロールイベント
• ページスクロールしたら処理を実行
– jQuery の scroll()メソッド
• ページのブラウザ表示最上部位置を調べる
– jQuery の scrollTop()メソッド
$(window).scroll(function(){ //ページスクロールした
var py = $(this).scrollTop(); //ページトップ位置
console.log(‘py:’+py);//確認用
その他実行したい処理;
});

JavaScript04 jquery プラグインを使おう

  • 1.
  • 2.
  • 3.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 3 • JavaScriptを利用したコンテンツ制作方法 – JavaScriptのみ • カレーライスだと、各種香辛料・小麦粉からルーを自作して、ゼロか らカレーを作る感じ – ライブラリを利用(例: jQuery) • カレーライスだと、市販のルーを利用し、野菜や肉は自分で調理して、 カレーを作る感じ – ライブラリとプラグインを利用(例:lightbox2など) • カレーライスだと、市販のルーを利用し、カット野菜などを利用して、 軽く調理して、カレーを作る感じ JavaScriptの利用について
  • 4.
    jQuery UIを 使おう Copyright ⒸYoshihiro Takahashi 2015 All Rights Reserved. 4
  • 5.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 5 jQuery UIのカレンダー • jQuery UIとは – ユーザーインターフェースのプラグイン – 簡単にUIが設定できる – jQuery と一緒に使用する – ダウンロード • http://jqueryui.com/ • ファイル容量が大きいので、必要最少限をダウン ロードする
  • 6.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 6 jQuery UI カレンダー • カレンダー Datepicker – 使い方は、jQuery UIのリファレンスを見ながら・・・ • プラグイン使用のポイント – サイトの公式リファレンス(ドキュメント)を見て制 作できるようになる • 日本語解説サイトがあるとは限らない • 日本語解説サイトの内容が最新である保証がない
  • 7.
    英語でも 頑張る Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 7
  • 8.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 8 jQuery UI カレンダー • 日付の書式を検討 – 初期設定のままでは、日本の書式ではない – dataFormat で設定 • 日本語表記 – 初期設定のままでは、英語表記 – 日本語の表記に変更する必要がある – datepicker-ja.js を利用
  • 9.
  • 10.
    jQuery 224 で検索 Copyright ⒸYoshihiro Takahashi 2015 All Rights Reserved. 10
  • 11.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 11 • HTML/CSSの理解は必須 – ファイル構造・要素の構成などを考えながら、 作業を行う • 最低限のjQueryの知識が必要 – jQueryセレクタ、メソッド設定などの理解が 必要 • 英語でも頑張る プラグイン使用時の注意
  • 12.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 12 1. プラグインをダウンロード – ファイルの中身を確認する 2. CSS/JavaScript 読み込みを入力 – ダウンロードしたファイル構造を確認しながら入力 – jQueryは複数読み込まない 3. HTML要素をコピペ – 要素の種類、属性などを確認しながらコピペ 4. jQueryの記述をコピペ – セレクタを意識しながらコピペ – オプション設定時は、複数設定 { プロパティ:値, プロパティ:値} プラグイン使用時の手順
  • 13.
  • 14.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 14 Lightbox系ライブラリ • lightbox2 – 写真が拡大するライブラリ全般をLightbox系 と呼ぶくらい有名 • fancyBox – 表示方法やアニメーションを変更できる • Nivo Lightbox – WebサイトやYoutubeも表示できる
  • 15.
  • 16.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 16 スライド系ライブラリ • Basic jQuery Slider – fadeとslideのみのベーシックなスライド • Unslider – 容量が軽く、カスタマイズが出来る • Galleria – 多機能なスライダー • bxSlider – 設置が簡単でシンプル
  • 17.
  • 18.
  • 19.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 19 アニメしながらトップに戻る • jQueryはやっぱり便利 – animateだけ、CSSに「scrollTop」プロパティが使 用できる – ブラウザ上端から縦ピクセル距離を指定してスク ロール移動することが出来る – トップに移動する場合には、距離を0 セレクタ.animate(scrollTop, 距離);
  • 20.
  • 21.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 21 アニメしながらページ内リンク • 要素の位置を調べる – ページ内リンク <a href=“#abc”> → <div id=“abc”> – 考え方 • a要素をクリック • hrefのidを取得 → #で値を区切る → split(‘#’) • idが指定された要素の位置を調べる→offset() • offset()のtop値を距離として、animateで移動
  • 22.
  • 23.
    Copyright Ⓒ YoshihiroTakahashi 2015 All Rights Reserved. 23 ページスクロールイベント • ページスクロールしたら処理を実行 – jQuery の scroll()メソッド • ページのブラウザ表示最上部位置を調べる – jQuery の scrollTop()メソッド $(window).scroll(function(){ //ページスクロールした var py = $(this).scrollTop(); //ページトップ位置 console.log(‘py:’+py);//確認用 その他実行したい処理; });