jQuery プラグイン作成入門
Upcoming SlideShare
Loading in...5
×
 

jQuery プラグイン作成入門

on

  • 5,256 views

2010年10月30日に行われたCSS Nite MIYAZAKIで発表させていただいたときのスライドです。

2010年10月30日に行われたCSS Nite MIYAZAKIで発表させていただいたときのスライドです。

Statistics

Views

Total Views
5,256
Views on SlideShare
4,975
Embed Views
281

Actions

Likes
10
Downloads
47
Comments
0

4 Embeds 281

http://w3q.jp 212
http://s.deeeki.com 56
http://localhost 9
http://coderwall.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery プラグイン作成入門 jQuery プラグイン作成入門 Presentation Transcript

  • jQuery
  • :••• etc..
  • :••• etc.. jQuery OK!!
  • “jQuery”HTML/CSS JavaScriptWeb
  • • jQuery • jQuery • DOM • • •
  • 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
  • About ?
  • ?
  • About jQuery HTML/CSS JavaScript
  • About jQuery : http://jquery.com/• CSS DOM• DOM Element /••• GPL/MIT
  • Getting started with jQuery• jQuery • 1.4.3 (2010/10/30 )• <script>
  • Getting started with jQuery• jQuery • 1.4.3 (2010/10/30 )• <script type="text/javascript" <script> src="js/jquery-1.4.3.min.js"></script>
  • Getting started with jQuery• jQuery • 1.4.3 (2010/10/30 )• <script type="text/javascript" <script> src="js/jquery-1.4.3.min.js"></script> <script type="text/javascript"><!-- $(document).ready(function(){ /* */ }; // --></script>
  • Manipulate DOM
  • DOM
  • DOM =
  • DOM = Document Object Model
  • DOM = Document Object Model• HTML XML JavaScript API•
  • DOM = Document Object Model title head ... html li h1 ul body ... div p
  • How to select DOM Elements with jQuery
  • jQuery CSS DOM
  • $(ul);
  • $(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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(#title);
  • $(#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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(#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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(.message);
  • $(.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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(.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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(#contents p);
  • $(#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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(#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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • DOM Traversing DOM
  • $(#contents).next();
  • $(#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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(#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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(#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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(#contents).find(p);
  • $(#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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(#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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(#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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(li.message).parent(div);
  • $(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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $(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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • $ ?
  • $ is jQuery $ jQuery// <div id="contents">$(#contents).next();// <div id="contents"> p$(#contents).find(p);// <input id="email"/> form$(input#email).parent(form);
  • $ is jQuery $ jQuery// <div id="contents">jQuery(#contents).next();// <div id="contents"> pjQuery(#contents).find(p);// <input id="email"/> formjQuery(input#email).parent(form);
  • Manipulate DOM elementsjQuery DOM
  • Manipulate DOM elements• append()• prepend()• remove()
  • Manipulate DOM elements• html(val) HTML val• text(val) val val
  • Manipulate DOM elements• attr(key, val) key val• removeAttr(key) key
  • Manipulate DOM elements• addClass(val) class val• removeClass(val) class val• css(key, val) style key: val
  • Demo
  • Event Handler
  • Event Handler• • • • • •
  • Event Handler• click(func) onClick$(a).click(function(){ // Move to return confirm(Move to " + this.href + ");});
  • Event Handler• ready(func) • DOM$(document).ready(function(){ // Complete alert(Complete);});
  • Event Handler• • change() • dbclick() • error() • focus() • keydown() • keypress() • keyup() • load() • mousedown() • mousemove() • .....
  • Animation with jQuery
  • jQuery
  • Animation• jQuery • hide() / show() • slideUp() / slideDown() • fadeOut() / fadeIn()•
  • Create Animation• animate(properties, options)$(.move-right).click(function(){ // .move-right $(#box).animate({ left: +=50px // #box 50px }, { duration: "slow", // // complete: function(){ alert(Move!); } });});
  • Letʼs create jQuery Plugin!
  • jQuery !
  • 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>
  • Why Plugin?• • • HTML JavaScript •
  • How to create Plugin• • jQuery • $(‘selector’) jQuery
  • $.pluginName(params);
  • $.pluginName(params);;(function($){})(jQuery);
  • $.pluginName(params);;(function($){ ←})(jQuery); ←
  • $.pluginName(params);;(function($){ $.extend({ });})(jQuery);
  • $.pluginName(params);;(function($){ $.extend({ "pluginName" : function(params){ } });})(jQuery);
  • $.pluginName(params);;(function($){ $.extend({ "pluginName" : function(params){ // do something... } });})(jQuery);
  • $(selector).pluginName(params);
  • $.fn
  • $(selector).pluginName(params);;(function($){})(jQuery);
  • $(selector).pluginName(params);;(function($){ $.fn.extend({ });})(jQuery);
  • $(selector).pluginName(params);;(function($){ $.fn.extend({ "pluginName" : function(params){ } });})(jQuery);
  • $(selector).pluginName(params);;(function($){ $.fn.extend({ "pluginName" : function(params){ // do something. return this; } });})(jQuery);
  • $(selector).pluginName(params);;(function($){})(jQuery);
  • $(selector).pluginName(params);;(function($){ $.fn.pluginName = function(params){ };})(jQuery);
  • $(selector).pluginName(params);;(function($){ $.fn.pluginName = function(params){ // do something. return this; };})(jQuery);
  • $(selector).pluginName(params);;(function($){ $.fn.pluginName = function(params){ // do something. }; return this; ←})(jQuery);
  • $(‘#target’).someFunc() .addClass(‘someClass’) .slideDown();
  • Tips 1• ( ) $.pluginName({foo: true})
  • (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);
  • (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);
  • (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);
  • Tips 2•
  • (function($){ var localFunction = function(params) { alert(local function); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); // do something.. };})(jQuery);
  • (function($){ var localFunction = function(params) { } alert(local function); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); // do something.. };})(jQuery);
  • (function($){ var localFunction = function(params) { } alert(local function); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); } // do something.. };})(jQuery);
  • Tips 3• • $.pluginName.funcA() • $.pluginName.funcB()
  • (function($){ $.pluginName = {};})(jQuery);
  • (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... };})(jQuery);
  • (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... } $.pluginName.FuncA() };})(jQuery);
  • (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; $.pluginName.FuncB = function(){ // do something... };})(jQuery);
  • (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; $.pluginName.FuncB = function(){ // do something... } $.pluginName.FuncB() };})(jQuery);
  • Example.
  • jQuery.formControll.js
  • jQuery.formControll.js• TAB, Enter • Meta + Enter • • textarea TAB
  • Demo
  • Thank you for your listening!!