jQuery
           Takeru Suzuki
         November 21, 2009
jQuery

•                   jQuery

•
• jQuery
jQuery
$.fn.pluginName = function() {

};
$.fn




$.fn.pluginName = function() {

};
$.fn




$.fn.pluginName = function() {

};
                  $(elem).pluginName();
                              ↑
$.fn.pluginName = function() {

     this.each(function() {
         // Do something
     });

};
(this)
     this.each()
$.fn.pluginName = function() {

     this.each(function() {
         // Do something
     });

};
(this)
     this.each()
$.fn.pluginName = function() {

     this.each(function() {
         // Do something
     });

}; ...
$.fn.pluginName = function(options) {

     var o = $.extend({
         propName1: value1,
         propName2: value2
    ...
$.fn.pluginName = function(options) {

     var o = $.extend({
         propName1: value1,
         propName2: value2
    ...
$.fn.pluginName = function(options) {

     var o = $.extend({
         propName1: value1,
         propName2: value2
    ...
$.fn.pluginName = function(options) {

        var o = $.extend({
            propName1: value1,
            propName2: va...
$.fn.pluginName = function(options) {

     var o = $.extend({
         propName1: value1,
         propName2: value2
    ...
$.fn.pluginName = function(options) {

     var o = $.extend({
         propName1: value1,
         propName2: value2
    ...
$.fn.pluginName = function(options) {

     var o = $.extend({
         propName1: value1,
         propName2: value2
    ...
(function($) {

    $.fn.pluginName = function(options) {

         var o = $.extend({
             propName1: value1,
   ...
(function($) {

    $.fn.pluginName = function(options) {

         var o = $.extend({
              propName1: value1,
  ...
jQuery
<script type=”text/javascript”
    src=”jquery.js”></script>

<script type=”text/javascript”
    src=”jquery.plugin1.js”><...
// jquery.plugin1.js

(function($) {
    $.fn.plugin1 = function(options) {
        ...
    };
})(jQuery);


// project.js...
// jquery.plugin1.js

(function($) {
    $.fn.plugin1 = function(options) {
        ...
    };
})(jQuery);


// project.js...
// project.js

(function($) {

   $(function() {
       $(elem1).plugin1();
   });

   $.fn.plugin1 = function(options) {
...
// project.js

(function($) {

   $(function() {
       $(elem1).plugin1();
   });

   $.fn.plugin1 = function(options) {
...
// project.js

(function($) {

    $(function() {
        $(elem1).plugin1();
        $(elem2).plugin2();
    });

    $.f...
// project.js

(function($) {

    $(function() {
        $(elem1).plugin1();
        $(elem2).plugin2();
    });

    $.f...
Thank you.
 http://terkel.jp/
jQuery プラグインの作り方
jQuery プラグインの作り方
Upcoming SlideShare
Loading in …5
×

jQuery プラグインの作り方

5,864 views

Published on

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,864
On SlideShare
0
From Embeds
0
Number of Embeds
74
Actions
Shares
0
Downloads
32
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

jQuery プラグインの作り方

  1. 1. jQuery Takeru Suzuki November 21, 2009
  2. 2. jQuery • jQuery • • jQuery
  3. 3. jQuery
  4. 4. $.fn.pluginName = function() { };
  5. 5. $.fn $.fn.pluginName = function() { };
  6. 6. $.fn $.fn.pluginName = function() { }; $(elem).pluginName(); ↑
  7. 7. $.fn.pluginName = function() { this.each(function() { // Do something }); };
  8. 8. (this) this.each() $.fn.pluginName = function() { this.each(function() { // Do something }); };
  9. 9. (this) this.each() $.fn.pluginName = function() { this.each(function() { // Do something }); }; $(elem).pluginName(); ↑ this
  10. 10. $.fn.pluginName = function(options) { var o = $.extend({ propName1: value1, propName2: value2 }, options); this.each(function() { // Do something }); };
  11. 11. $.fn.pluginName = function(options) { var o = $.extend({ propName1: value1, propName2: value2 }, options); this.each(function() { // Do something }); };
  12. 12. $.fn.pluginName = function(options) { var o = $.extend({ propName1: value1, propName2: value2 }, options); this.each(function() { // Do something }); $(elem).pluginName({ }; propName1: value3, propName2: value4 });
  13. 13. $.fn.pluginName = function(options) { var o = $.extend({ propName1: value1, propName2: value2 }, options); this.each(function() { // Do something }); o.propName $(elem).pluginName({ $(this).addClass(o.className); }; propName1: value3, propName2: value4 });
  14. 14. $.fn.pluginName = function(options) { var o = $.extend({ propName1: value1, propName2: value2 }, options); this.each(function() { // Do something }); return this; };
  15. 15. $.fn.pluginName = function(options) { var o = $.extend({ propName1: value1, propName2: value2 }, options); this.each(function() { // Do something this }); return this; };
  16. 16. $.fn.pluginName = function(options) { var o = $.extend({ propName1: value1, propName2: value2 }, options); this.each(function() { // Do something this }); return this; $(elem).pluginName().method(); ↑ };
  17. 17. (function($) { $.fn.pluginName = function(options) { var o = $.extend({ propName1: value1, propName2: value2 }, options); this.each(function() { // Do something }); return this; }; })(jQuery);
  18. 18. (function($) { $.fn.pluginName = function(options) { var o = $.extend({ propName1: value1, Prototype propName2: value2 $ }, options); this.each(function() { // Do something }); jQuery return this; }; })(jQuery);
  19. 19. jQuery
  20. 20. <script type=”text/javascript” src=”jquery.js”></script> <script type=”text/javascript” src=”jquery.plugin1.js”></script> <script type=”text/javascript” src=”project.js”></script>
  21. 21. // jquery.plugin1.js (function($) { $.fn.plugin1 = function(options) { ... }; })(jQuery); // project.js (function($) { $(function() { $(elem1).plugin1(); }); })(jQuery);
  22. 22. // jquery.plugin1.js (function($) { $.fn.plugin1 = function(options) { ... }; })(jQuery); // project.js (function($) { $(function() { $(elem1).plugin1(); }); })(jQuery);
  23. 23. // project.js (function($) { $(function() { $(elem1).plugin1(); }); $.fn.plugin1 = function(options) { ... }; })(jQuery);
  24. 24. // project.js (function($) { $(function() { $(elem1).plugin1(); }); $.fn.plugin1 = function(options) { ... }; })(jQuery);
  25. 25. // project.js (function($) { $(function() { $(elem1).plugin1(); $(elem2).plugin2(); }); $.fn.plugin1 = function(options) { ... }; $.fn.plugin2 = function(options) { ... }; })(jQuery);
  26. 26. // project.js (function($) { $(function() { $(elem1).plugin1(); $(elem2).plugin2(); }); $.fn.plugin1 = function(options) { ... }; $.fn.plugin2 = function(options) { ... }; })(jQuery);
  27. 27. Thank you. http://terkel.jp/

×