Как создать плагин jQuery

jQuery используется около 60 000 000 сайтов, он стал фундаментальной библиотекой, которую должен использовать каждый веб-сайт из-за своей простоты и производительности.

Следующая простая структура определит наш плагин jQuery, и мы будем готовы создавать наши пользовательские функции.

(function($){
$.fn.extend({
// an object with our functions
});
})(jQuery);

Структура почти такая же, как в обычной библиотеке, но вместо того, чтобы получить объект окна, мы получим jQuery. Обратите внимание, что вам нужно, очевидно, загрузить JQuery перед вашим плагином.

jQuery является объектно-ориентированным, поэтому наши функции будут иметь имя, которое мы даем ключу объекта, например:

{
// This will paint the background color of a div with our given value.
myCustomAlert:function(color){
this.css({
backgroundColor:color
});
}
}
// Then we will call it like this :
$('#myselector').myCustomAlert('red');

Если вашему плагину не нужен селектор, но в любом случае требуется jQuery, вы можете создать свойство для jQuery с помощью своей функции, например

var createAlert = {
showAlert : function(){
// The code that will show the alert
},
hideAlert : function(){
// the code that will hide the alert
}
};
$.myCustomAlert = createAlert;
// or if you want jQuery instead $
jQuery.myCustomAlert = createAlert;
// Then execute your plugin like this
$.myCustomAlert.showAlert();

Это все, что вам нужно знать, когда вы хотите создать свой собственный плагин jQuery. Теперь давайте создадим что-то более сложное!

Следующий плагин будет выполнять функцию через каждые x миллисекунд после последнего события keyup, эта функция может быть полезна, когда вы хотите создать автозаполнение или повысить производительность функции, которая выполняется каждый раз, когда пользователь нажимает клавишу. Поиграйте со следующей скрипкой, исходный код можно посмотреть на вкладке javascript.

Получайте удовольствие и создайте свой собственный плагин jQuery!

Ссылка на основную публикацию
Adblock
detector