Заметил несколько переходов с поисковика по фразе «написание плагина под jQuery«. Решил оправдать ожидания и разместить тут небольшое руководство о том, как быстро и легко написать плагин.
Написать свой плагин под jQuery просто, и если вы будете следовать моим инструкциям то и остальным будет просто установить его у себя. Для начала нужно создать файлик jquery.[plugin_name].js, например jquery.myplugin.js
Внутри файлика должна находиться обертка, это анонимная функция принимающая в качестве единственного параметра объект jQuery и вызывающая сама себя.
(function($) {
// some code here
})(jQuery);
После этого надо внутри обертки описать новый метод которым вы будете вызывать ваш плагин. Для этого в jQuery предусмотрен механизм расширения функционала.
(function($) {
$.fn.myplugin = function(){
alert("hello from myplugin!");
}
})(jQuery);
Теперь его можно вызвать подобным образом:
$("myElement").myplugin();
Но чаще всего бывает нужно обработать внутри плагина все выбранные элементы, например отметить все выбранные checkbox’ы.
(function($) {
$.fn.myplugin = function(option){
this.each(function(){
$(this).attr({checked:"checked"});
});
// в лучшем стиле, чтобы не разрывать цепочку нужно возвращать объект jQuery
return this;
}
})(jQuery);
$("myForm:checkbox").myplugin()
Пример, конечно, высосан из пальца, так такая функциональность и так присутствует, но он выступит фундаментом для следующего более сложного примера в котором будет использован вспомогательный объект и продемонстрирована передача параметров в плагин. Итак, задача усложняется теперь нужно отметить/убрать отметку/инвертировать выделение всех checkbox’ов в зависимости от переданного параметра.
(function($) {
// вспомогательный объект для обработки статуса checkbox'a
var myChecker = function(element, option){this.init(element,option)}
myChecker.prototype = {
// конструктор
init : function(element, option){
switch(option){
case 'on':
this.check(element, true);
break;
case 'off':
this.check(element, false);
break;
case 'toggle':
this.check(element, !element.checked);
break;
}
}
// функция которая включает или отключает checkbox в зависимости от условия
check : function(element, condition){
if(condition)
$(element).attr({checked:"checked"});
else
$(element).removeAttr("checked");
}
}
$.fn.myCheckBoxToggler = function(option){
option = option || 'on';
this.each(function(){
// создаем новый вспомогательный объект
new myChecker(this, option)
});
return this;
}
})(jQuery);
Теперь при желании этим плагином можно пользоваться таким образом.
$("myForm:checkbox").myCheckBoxToggler();
$("myForm:checkbox").myCheckBoxToggler('on');
$("myForm:checkbox").myCheckBoxToggler('off');
$("myForm:checkbox").myCheckBoxToggler('toggle');
Надеюсь вам понравилось мое руководство, и все было понятно, а если вы что-то все-таки осталось непонятно спрашивайте в комментариях.