jQuery プラグイン作成入門
11 likes2,554 views
2010年10月30日に行われたCSS Nite MIYAZAKIで発表させていただいたときのスライドです。
jQuery プラグイン作成入門
- 1. jQuery
- 2. : • • • etc..
- 3. : • • • etc.. jQuery OK!!
- 4. “jQuery” HTML/CSS JavaScript Web
- 5. • jQuery • jQuery • DOM • • •
- 6. •
- 7. 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
- 8. About ?
- 9. ?
- 10. About jQuery HTML/CSS JavaScript
- 11. About jQuery : http://jquery.com/ • CSS DOM • DOM Element / • • • GPL/MIT
- 12. Getting started with jQuery • jQuery • 1.4.3 (2010/10/30 ) • <script>
- 13. 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>
- 14. 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>
- 15. Manipulate DOM
- 16. DOM
- 17. DOM =
- 18. DOM = Document Object Model
- 19. DOM = Document Object Model • HTML XML JavaScript API •
- 20. DOM = Document Object Model title head ... html li h1 ul body ... div p
- 21. How to select DOM Elements with jQuery
- 22. jQuery CSS DOM
- 23. $('ul');
- 24. $('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>
- 25. $('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>
- 26. $('#title');
- 27. $('#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>
- 28. $('#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>
- 29. $('.message');
- 30. $('.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>
- 31. $('.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>
- 33. $('#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>
- 34. $('#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>
- 35. DOM Traversing DOM
- 37. $('#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>
- 38. $('#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>
- 39. $('#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>
- 41. $('#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>
- 42. $('#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>
- 43. $('#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>
- 45. $('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>
- 46. $('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>
- 47. $('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>
- 48. $ ?
- 49. $ is jQuery $ jQuery // <div id="contents"> $('#contents').next(); // <div id="contents"> p $('#contents').find('p'); // <input id="email"/> form $('input#email').parent('form');
- 50. $ 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');
- 51. Manipulate DOM elements jQuery DOM
- 52. Manipulate DOM elements • append() • prepend() • remove()
- 53. Manipulate DOM elements • html(val) HTML val • text(val) val val
- 54. Manipulate DOM elements • attr(key, val) key val • removeAttr(key) key
- 55. Manipulate DOM elements • addClass(val) class val • removeClass(val) class val • css(key, val) style key: val
- 56. Demo
- 57. Event Handler
- 59. Event Handler • • • • • •
- 60. Event Handler • click(func) onClick $('a').click(function(){ // Move to return confirm('Move to "' + this.href + '"'); });
- 61. Event Handler • ready(func) • DOM $(document).ready(function(){ // Complete alert('Complete'); });
- 62. Event Handler • • change() • dbclick() • error() • focus() • keydown() • keypress() • keyup() • load() • mousedown() • mousemove() • .....
- 64. jQuery
- 65. Animation • jQuery • hide() / show() • slideUp() / slideDown() • fadeOut() / fadeIn() •
- 66. Create Animation • animate(properties, options) $('.move-right').click(function(){ // .move-right $('#box').animate({ 'left': '+=50px' // #box 50px }, { duration: "slow", // // complete: function(){ alert('Move!'); } }); });
- 67. Letʼs create jQuery Plugin!
- 68. jQuery !
- 69. 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>
- 70. Why Plugin? • • • HTML JavaScript •
- 71. How to create Plugin • • jQuery • $(‘selector’) jQuery
- 75. $.pluginName(params); ;(function($){ $.extend({ }); })(jQuery);
- 76. $.pluginName(params); ;(function($){ $.extend({ "pluginName" : function(params){ } }); })(jQuery);
- 77. $.pluginName(params); ;(function($){ $.extend({ "pluginName" : function(params){ // do something... } }); })(jQuery);
- 79. $.fn
- 81. $(selector).pluginName(params); ;(function($){ $.fn.extend({ }); })(jQuery);
- 82. $(selector).pluginName(params); ;(function($){ $.fn.extend({ "pluginName" : function(params){ } }); })(jQuery);
- 83. $(selector).pluginName(params); ;(function($){ $.fn.extend({ "pluginName" : function(params){ // do something. return this; } }); })(jQuery);
- 85. $(selector).pluginName(params); ;(function($){ $.fn.pluginName = function(params){ }; })(jQuery);
- 86. $(selector).pluginName(params); ;(function($){ $.fn.pluginName = function(params){ // do something. return this; }; })(jQuery);
- 87. $(selector).pluginName(params); ;(function($){ $.fn.pluginName = function(params){ // do something. }; return this; ← })(jQuery);
- 88. $(‘#target’).someFunc() .addClass(‘someClass’) .slideDown();
- 89. Tips 1 • ( ) $.pluginName({foo: true})
- 90. (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);
- 91. (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);
- 92. (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);
- 93. Tips 2 •
- 94. (function($){ var localFunction = function(params) { alert('local function'); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); // do something.. }; })(jQuery);
- 95. (function($){ var localFunction = function(params) { } alert('local function'); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); // do something.. }; })(jQuery);
- 96. (function($){ var localFunction = function(params) { } alert('local function'); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); } // do something.. }; })(jQuery);
- 97. Tips 3 • • $.pluginName.funcA() • $.pluginName.funcB()
- 98. (function($){ $.pluginName = {}; })(jQuery);
- 99. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; })(jQuery);
- 100. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... } $.pluginName.FuncA() }; })(jQuery);
- 101. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; $.pluginName.FuncB = function(){ // do something... }; })(jQuery);
- 102. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; $.pluginName.FuncB = function(){ // do something... } $.pluginName.FuncB() }; })(jQuery);
- 103. Example.
- 105. jQuery.formControll.js • TAB, Enter • Meta + Enter • • textarea TAB
- 106. Demo
- 107. Thank you for your listening!!