jquery プラグイン作成入門
DESCRIPTION
2010年10月30日に行われたCSS Nite MIYAZAKIで発表させていただいたときのスライドです。TRANSCRIPT
![Page 1: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/1.jpg)
jQueryプラグイン作成入門イラスティックコンサルタンツ株式会社
野島隆
![Page 2: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/2.jpg)
今日のお話
お客さん: 「ホームページに、イマドキのバーンっと動くようなもの入れてよ♪」• スライドショー• アコーディオンメニュー• etc..
![Page 3: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/3.jpg)
今日のお話
お客さん: 「ホームページに、イマドキのバーンっと動くようなもの入れてよ♪」• スライドショー• アコーディオンメニュー• etc..
jQueryでOK!!
![Page 4: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/4.jpg)
“jQuery” ならHTML/CSSと少しのJavaScriptの知識でWebサイトへ素敵な機能を追加できる
![Page 5: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/5.jpg)
今日のお話
• jQuery概要紹介• jQueryって?• DOMを操作しよう• イベントで動作させてみよう• アニメーションさせてみよう• プラグイン作成の基本
![Page 6: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/6.jpg)
今日のお話
•プラグイン作成実例
![Page 7: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/7.jpg)
About Me
•WEB Developer / PHP / CakePHP / HTML / CSS / jQuery / PostgreSQL / MySQL / iPhone / 佐賀 / 福岡 / 島根 / 熊本 / プリン / キイロイトリ / リラックマ / no more
トマト
• BLOG: http://php-tips.com/
• TWITTER: @nojimage
• FACEBOOK: http://www.facebook.com/nojimage
名前: 野島 隆(のじま たかし)
所属:イラスティックコンサルタンツ株式会社
![Page 8: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/8.jpg)
About ?
![Page 9: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/9.jpg)
って?
![Page 10: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/10.jpg)
HTML/CSSと親和性の高い
JavaScriptライブラリ
About jQuery
![Page 11: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/11.jpg)
公式サイト: http://jquery.com/
•CSSセレクタを利用したDOM走査•直感的なDOM Element生成/操作•機能追加が容易•豊富なプラグイン•GPL/MITのデュアルライセンス
About jQuery
![Page 12: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/12.jpg)
Getting started with jQuery
• jQueryをダウンロードする• 最新バージョンは 1.4.3 (2010/10/30現在)
• <script>タグで読み込む
![Page 13: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/13.jpg)
Getting started with jQuery
• jQueryをダウンロードする• 最新バージョンは 1.4.3 (2010/10/30現在)
• <script>タグで読み込む<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
![Page 14: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/14.jpg)
Getting started with jQuery
• jQueryをダウンロードする• 最新バージョンは 1.4.3 (2010/10/30現在)
• <script>タグで読み込む<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script><script type="text/javascript"><!--$(document).ready(function(){ /* ここに色々書いていきます */
};// --></script>
![Page 15: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/15.jpg)
Manipulate DOM
![Page 16: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/16.jpg)
DOMを操る
![Page 17: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/17.jpg)
DOM =
![Page 18: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/18.jpg)
DOM = Document Object Model
![Page 19: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/19.jpg)
DOM = Document Object Model
•HTML文書やXML文書を、JavaScriptなどのプログラムから利用・操作するためのAPI
•要素をツリー構造として扱う
![Page 20: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/20.jpg)
DOM = Document Object Model
html
head
body
title
...
h1
div
ul
p
li
...
![Page 21: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/21.jpg)
How to select DOM Elements with jQuery
![Page 22: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/22.jpg)
jQueryでは、CSSセレクタを利用してDOM要素を選択できます
![Page 23: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/23.jpg)
$('ul');
![Page 24: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/24.jpg)
$('ul');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 25: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/25.jpg)
$('ul');
<div id="header"><p id="title">Foobar Website</p>
<ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p>
<ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 26: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/26.jpg)
$('#title');
![Page 27: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/27.jpg)
$('#title');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 28: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/28.jpg)
$('#title');
<div id="header">
<p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 29: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/29.jpg)
$('.message');
![Page 30: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/30.jpg)
$('.message');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 31: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/31.jpg)
$('.message');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul>
<li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 32: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/32.jpg)
$('#contents p');
![Page 33: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/33.jpg)
$('#contents p');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 34: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/34.jpg)
$('#contents p');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 35: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/35.jpg)
DOM Traversing
取得したDOMオブジェクトから、さらに要素を指定して選択できます
![Page 36: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/36.jpg)
$('#contents').next();
![Page 37: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/37.jpg)
$('#contents').next();
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 38: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/38.jpg)
$('#contents').next();
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div>
<div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 39: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/39.jpg)
$('#contents').next();
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div>
<div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 40: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/40.jpg)
$('#contents').find('p');
![Page 41: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/41.jpg)
$('#contents').find('p');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 42: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/42.jpg)
$('#contents').find('p');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div>
<div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 43: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/43.jpg)
$('#contents').find('p');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents">
<p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 44: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/44.jpg)
$('li.message').parent('div');
![Page 45: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/45.jpg)
$('li.message').parent('div');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 46: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/46.jpg)
$('li.message').parent('div');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul>
<li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 47: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/47.jpg)
$('li.message').parent('div');
<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div>
<div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
![Page 48: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/48.jpg)
$ ?
![Page 49: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/49.jpg)
$ is jQuery
先ほどから出てきている、$はjQueryの省略形です。
// <div id="contents"> の次の要素を選択$('#contents').next();
// <div id="contents"> の中からp要素を選択$('#contents').find('p');
// <input id="email"/> の上位にあるform要素を選択$('input#email').parent('form');
![Page 50: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/50.jpg)
$ is jQuery
先ほどから出てきている、$はjQueryの省略形です。省略しないで書くと、// <div id="contents"> の次の要素を選択jQuery('#contents').next();
// <div id="contents"> の中からp要素を選択jQuery('#contents').find('p');
// <input id="email"/> の上位にあるform要素を選択jQuery('input#email').parent('form');
![Page 51: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/51.jpg)
Manipulate DOM elements
jQueryでは、DOM要素の操作(追加、変更、削除)を簡単に行うための様々な機能があります
![Page 52: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/52.jpg)
Manipulate DOM elements
• append()要素内部にコンテンツを追加する• prepend()要素内部の先頭にコンテンツを追加する• remove()要素を削除する
![Page 53: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/53.jpg)
Manipulate DOM elements
• html(val)要素内部のHTMLをvalで置き換える• text(val)要素内部をvalで置き換える(valはエスケープされ文字列として挿入されます)
![Page 54: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/54.jpg)
Manipulate DOM elements
• attr(key, val)要素のkey属性をvalにセットする• removeAttr(key)要素のkey属性を削除する
![Page 55: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/55.jpg)
Manipulate DOM elements
• addClass(val)要素のclass属性にvalを追加する• removeClass(val)要素のclass属性からvalを削除する
•css(key, val)要素のstyle属性にkey: valを設定する
![Page 56: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/56.jpg)
Demo
![Page 57: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/57.jpg)
Event Handler
![Page 58: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/58.jpg)
イベントハンドラ
![Page 59: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/59.jpg)
Event Handler
• インタラクティブな動作を行うために、キーボード・マウスの操作などユーザが行ったイベントに対して特定の処理を与える• マウスクリック• フォーム内容の変更• キーを押す• ページ読み込み完了• 等々
![Page 60: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/60.jpg)
Event Handler
•click(func)
オブジェクトがクリックされたときに呼び出されるonClickイベントにフックさせる。
$('a').click(function(){ // リンクをクリックしたら「Move to リンク先」と表示して確認する return confirm('Move to "' + this.href + '"');});
![Page 61: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/61.jpg)
Event Handler
•ready(func)
ページの読み込み完了時に呼び出される• DOMの操作はページ描画が終わってからなので、通常はこの呼び出し関数の中に色々な操作を書きます。
$(document).ready(function(){ // ページ読み込みが完了したら「Complete」とダイアログに表示 alert('Complete');});
![Page 62: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/62.jpg)
Event Handler
•その他のイベントハンドラ• change()• dbclick()• error()• focus()• keydown()• keypress()• keyup()• load()• mousedown()• mousemove()• .....
![Page 63: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/63.jpg)
Animation with jQuery
![Page 64: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/64.jpg)
jQueryでアニメーション
![Page 65: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/65.jpg)
Animation
• jQueryには標準で簡易的なアニメーション機能がある• hide() / show()対象のオブジェクトを表示・非表示を切り替えます。アニメーション時は幅、高さが同時に変化します。
• slideUp() / slideDown()対象のオブジェクトの高さを変化させて表示・非表示を切り替えます。
• fadeOut() / fadeIn()対象のオブジェクトをフェードアウト・フェードインさせて表示・非表示を切り替えます。
• メニューを出したり、消したりのようなアニメーションは上記を利用するだけでも充分
![Page 66: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/66.jpg)
Create Animation
独自に要素の動作を定義することも可能
•animate(properties, options)
$('.move-right').click(function(){ // .move-rightのクリック時に $('#box').animate({ 'left': '+=50px' // #boxを右へ50px移動 }, { duration: "slow", // 速度はゆっくり // 完了後にアラートを表示 complete: function(){ alert('Move!'); } });});
![Page 67: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/67.jpg)
Letʼs create jQuery Plugin!
![Page 68: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/68.jpg)
jQueryプラグインを作ろう!
![Page 69: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/69.jpg)
Plugin?
• 機能をプラグイン化すると
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script><script type="text/javascript" src="js/jquery.plugin_name.js"></script><script type="text/javascript"><!--$(document).ready(function(){
$.pluginName();});// --></script>
上記のように書くことで、機能を実行できます。
![Page 70: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/70.jpg)
Why Plugin?
• プラグイン化することのメリット• 機能を分離しておくことで、再利用しやすくなる
• HTMLファイル中のJavaScriptコード減るので、見た目がすっきりする
• 一時的に利用する変数・関数などで、グローバル空間を汚染しなくてすむ
プラグイン化でメンテナンス性を高める
![Page 71: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/71.jpg)
How to create Plugin
• 基本パターン• jQuery自体に対する拡張
• $(‘selector’)等で生成されたjQueryエレメントに対する拡張
![Page 72: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/72.jpg)
$.pluginName(params);
![Page 73: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/73.jpg)
$.pluginName(params);
;(function($){
})(jQuery);
![Page 74: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/74.jpg)
$.pluginName(params);
;(function($){
})(jQuery);
←おまじない
←おまじない
![Page 75: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/75.jpg)
$.pluginName(params);
;(function($){
$.extend({
});
})(jQuery);
![Page 76: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/76.jpg)
$.pluginName(params);
;(function($){
$.extend({
"pluginName" : function(params){
}
});
})(jQuery);
![Page 77: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/77.jpg)
$.pluginName(params);
;(function($){
$.extend({
"pluginName" : function(params){
// do something...
}
});
})(jQuery);
![Page 78: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/78.jpg)
$(selector).pluginName(params);
![Page 79: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/79.jpg)
$.fn を拡張する
![Page 80: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/80.jpg)
$(selector).pluginName(params);
;(function($){
})(jQuery);
![Page 81: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/81.jpg)
$(selector).pluginName(params);
;(function($){
$.fn.extend({
});
})(jQuery);
![Page 82: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/82.jpg)
$(selector).pluginName(params);
;(function($){
$.fn.extend({
"pluginName" : function(params){
}
});
})(jQuery);
![Page 83: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/83.jpg)
$(selector).pluginName(params);
;(function($){
$.fn.extend({
"pluginName" : function(params){
// do something.
return this; }
});
})(jQuery);
![Page 84: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/84.jpg)
$(selector).pluginName(params);
;(function($){
})(jQuery);
![Page 85: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/85.jpg)
$(selector).pluginName(params);
;(function($){
$.fn.pluginName = function(params){
};
})(jQuery);
![Page 86: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/86.jpg)
$(selector).pluginName(params);
;(function($){
$.fn.pluginName = function(params){
// do something.
return this; };
})(jQuery);
![Page 87: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/87.jpg)
$(selector).pluginName(params);
;(function($){
$.fn.pluginName = function(params){
// do something.
return this; };
})(jQuery);
←重要
![Page 88: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/88.jpg)
メソッドチェイン
$(‘#target’).someFunc() .addClass(‘someClass’) .slideDown();
といったように、対象のオブジェクトに対して連続で操作を適用するような書き方をするために必要
![Page 89: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/89.jpg)
Tips 1
•オプション(引数)のデフォルト値を定義する
$.pluginName({foo: true})等、呼び出し時にオプション引数を与えて、プラグインの振る舞いを変更したい場合に利用
![Page 90: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/90.jpg)
(function($){
$.fn.pluginName = function(params){
// override input params params = $.extend({}, $.fn.pluginName.defaults, params); // do something...
};
// default values $.fn.pluginName.defaults = { foo: 'hoge', bar: 'fuga' };
})(jQuery);
![Page 91: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/91.jpg)
(function($){
$.fn.pluginName = function(params){
// override input params params = $.extend({}, $.fn.pluginName.defaults, params); // do something...
};
// default values $.fn.pluginName.defaults = { foo: 'hoge', bar: 'fuga' };
})(jQuery);
} 初期値を定義
![Page 92: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/92.jpg)
(function($){
$.fn.pluginName = function(params){
// override input params params = $.extend({}, $.fn.pluginName.defaults, params); // do something...
};
// default values $.fn.pluginName.defaults = { foo: 'hoge', bar: 'fuga' };
})(jQuery);
} 初期値を定義
↓初期値を上書き
![Page 93: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/93.jpg)
Tips 2
•ローカル関数を定義・利用する
プラグイン内部でのみ利用する関数を定義
![Page 94: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/94.jpg)
(function($){
var localFunction = function(params) {
alert('local function'); }; $.fn.pluginName = function(params){
// do something.. localFunction(params); // do something.. }; })(jQuery);
![Page 95: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/95.jpg)
(function($){
var localFunction = function(params) {
alert('local function'); }; $.fn.pluginName = function(params){
// do something.. localFunction(params); // do something.. }; })(jQuery);
} 関数を定義
![Page 96: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/96.jpg)
(function($){
var localFunction = function(params) {
alert('local function'); }; $.fn.pluginName = function(params){
// do something.. localFunction(params); // do something.. }; })(jQuery);
} 関数を定義
} 関数を呼び出し
![Page 97: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/97.jpg)
Tips 3
• 複数の機能を定義する• $.pluginName.funcA()• $.pluginName.funcB()
ひとつのプラグインで複数の機能を提供したい場合に利用
![Page 98: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/98.jpg)
(function($){
$.pluginName = {};
})(jQuery);
![Page 99: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/99.jpg)
(function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
})(jQuery);
![Page 100: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/100.jpg)
(function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
})(jQuery);
} $.pluginName.FuncA()
![Page 101: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/101.jpg)
(function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
$.pluginName.FuncB = function(){
// do something...
};
})(jQuery);
![Page 102: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/102.jpg)
(function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
$.pluginName.FuncB = function(){
// do something...
};
})(jQuery);
} $.pluginName.FuncB()
![Page 103: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/103.jpg)
Example.
![Page 104: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/104.jpg)
jQuery.formControll.js
![Page 105: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/105.jpg)
jQuery.formControll.js
•上下矢印キーおよび、TAB, Enterキーによる入力要素の移動
おまけ• Meta + Enter キーによるフォームの送信• 文字数制限のあるフィールドで規定文字数入力時、次のフィールドへの自動移動• textarea内でのTABキー入力
![Page 106: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/106.jpg)
Demo
![Page 107: jQuery プラグイン作成入門](https://reader034.vdocuments.site/reader034/viewer/2022042518/555a88e7d8b42a98568b52d4/html5/thumbnails/107.jpg)
Thank you for your listening!!