jQuery PLUGIN
Transcript of jQuery PLUGIN
![Page 1: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/1.jpg)
$.fn.myPlugin();
VytváramejQuery
PLUGIN
vlastný
![Page 2: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/2.jpg)
Najskôr úvod
![Page 3: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/3.jpg)
var x = {};
![Page 4: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/4.jpg)
var x = {};
Object Definition
![Page 5: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/5.jpg)
var x = { doMath: function(){…}
};
![Page 6: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/6.jpg)
var x = { doMath: function(){…}
};
Object Method
![Page 7: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/7.jpg)
…on(‘click’, function(){…})
![Page 8: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/8.jpg)
Anonymous Function
…on(‘click’, function(){…})
“…a function without name”
![Page 9: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/9.jpg)
(doMath)();
![Page 10: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/10.jpg)
(doMath)();
Function Closure
![Page 11: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/11.jpg)
Add some magic
![Page 12: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/12.jpg)
(function(x){…})(abc);
Function Closurewith Anonymous Function
![Page 13: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/13.jpg)
“Tak ako urobím ten plugin?”Comic Sans
![Page 14: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/14.jpg)
Takto!Plugin sa bude volať
yolo
![Page 15: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/15.jpg)
Úplný základ je…
![Page 16: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/16.jpg)
jQuery.fn.yolo = function () { // Your code };
![Page 17: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/17.jpg)
jQuery.fn.yolo = function () { // Your code return this; };
![Page 18: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/18.jpg)
jQuery.fn.yolo = function () { // Your code return this; };
![Page 19: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/19.jpg)
jQuery.fn.yolo = function () { return $(this).each(function () { // Your code });};
![Page 20: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/20.jpg)
jQuery.fn.yolo = function () { return $(this).each(function () { // Your code }); };
![Page 21: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/21.jpg)
(function ($) { $.fn.yolo = function () { return $(this).each(function () { // Your code }); }; })(jQuery);
![Page 22: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/22.jpg)
(function ($) { $.fn.yolo = function () { return $(this).each(function () { // Your code }); }; })(jQuery);
![Page 23: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/23.jpg)
(function ($) { $.fn.yolo = function (options) { return $(this).each(function () { // Your code }); }; })(jQuery);
![Page 24: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/24.jpg)
(function ($) { $.fn.yolo = function (options) { return $(this).each(function () { // Your code }); }; })(jQuery);
![Page 25: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/25.jpg)
(function ($) { $.fn.yolo = function (options) { var settings = $.extend({}, options); return $(this).each(function () { // Your code }); }; })(jQuery);
![Page 26: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/26.jpg)
(function ($) { $.fn.yolo = function (options) { var settings = $.extend({}, options); return $(this).each(function () { // Your code }); }; })(jQuery);
![Page 27: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/27.jpg)
(function ($) { $.fn.yolo = function (options, callback) { var settings = $.extend({}, options); return $(this).each(function () { // Your code (callback)(); }); }; })(jQuery);
![Page 28: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/28.jpg)
(function ($) { $.fn.yolo = function (options, callback) { var settings = $.extend({}, options); return $(this).each(function () { // Your code (callback)(); }); }; })(jQuery);
![Page 29: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/29.jpg)
That’s simple start folks!
![Page 30: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/30.jpg)
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
![Page 31: jQuery PLUGIN](https://reader030.fdocuments.in/reader030/viewer/2022032501/55b6cd56bb61eb196c8b4635/html5/thumbnails/31.jpg)
Otázky?© 2015 by Mino