• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery プラグイン作成入門
 

jQuery プラグイン作成入門

on

  • 5,190 views

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

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

Statistics

Views

Total Views
5,190
Views on SlideShare
4,909
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!!