Vytvárame jQuery plugin

1. $.fn.myPlug
Vytvárame
jQuery
PLUGIN
vlastný

2. Najskôr úvod

3. var x = {};

4. var x = {};
Object Definition

5. var x = {
doMath: function(){…}
};

6. var x = {
doMath: function(){…}
};
Object Method

7. …on(‘click’, function(){…})

8. Anonymous Function
…on(‘click’, function(){…})
“…a function without name”

9. (doMath)();

10. (doMath)();
Function Closure

11. Add some magic

12. (function(x){…})(abc);
Function Closurewith Anonymous Function

13. “Tak ako urobím ten plugin?”
Comic Sans

14. Takto!
Plugin sa bude volať
yolo

15. Úplný základ je…

16. jQuery.fn.yolo = function () {
// Your code
};

17. jQuery.fn.yolo = function () {
// Your code
return this;
};

18. jQuery.fn.yolo = function () {
// Your code
return this;
};

19. jQuery.fn.yolo = function () {
return $(this).each(function () {
// Your code
});
};

20. jQuery.fn.yolo = function () {
return $(this).each(function () {
// Your code
});
};

21. (function ($) {
$.fn.yolo = function () {
return $(this).each(function () {
// Your code
});
};
})(jQuery);

22. (function ($) {
$.fn.yolo = function () {
return $(this).each(function () {
// Your code
});
};
})(jQuery);

23. (function ($) {
$.fn.yolo = function (options) {
return $(this).each(function () {
// Your code
});
};
})(jQuery);

24. (function ($) {
$.fn.yolo = function (options) {
return $(this).each(function () {
// Your code
});
};
})(jQuery);

25. (function ($) {
$.fn.yolo = function (options) {
var settings = $.extend({}, options);
return $(this).each(function () {
// Your code
});
};
})(jQuery);

26. (function ($) {
$.fn.yolo = function (options) {
var settings = $.extend({}, options);
return $(this).each(function () {
// Your code
});
};
})(jQuery);

27. (function ($) {
$.fn.yolo = function (options, callback) {
var settings = $.extend({}, options);
return $(this).each(function () {
// Your code
(callback)();
});
};
})(jQuery);

28. (function ($) {
$.fn.yolo = function (options, callback) {
var settings = $.extend({}, options);
return $(this).each(function () {
// Your code
(callback)();
});
};
})(jQuery);

29. That’s simple start folks!

30. Zdroje ďalších informácií
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/
Introduction_to_Object-Oriented_JavaScript
• http://learn.jquery.com/plugins/
• http://learn.jquery.com/performance/
• http://learn.jquery.com/code-organization/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/
Reference/Methods_Index

31. Otázky?
© 2015 by Mino