Этот пост – вольный перевод очень полезной статьи Jeffrey Way Learn How to Create a jQuery Plugin.
Самое главное, приведенный здесь пример, можно использовать как шаблон для собственных плагинов. Кстати, вместе с оригинальным вариантом идет скринкаст. В общем, надеюсь, вам будет интересно 🙂
Вы можете скачать исходники этого примера или посмотреть демонстрацию.
У вас может возникнуть мысль: «Что за суета вокруг jQuery? Нужно загрузить кучу плагинов чтобы эта библиотека на что-нибудь годилась». Первое, это не так. Второе, jQuery специально разрабатывалась для широкого применения. Сохраняя ядро библиотеки маленьким – 16кБ (прим. – речь идет о сжатом варианте) – пользователи могут добавить дополнительные плагины по собственному усмотрению. Сегодня, я покажу вам, как создать собственный плагин под названием «Center» с нуля. Приступим!
Наша задача
Мы хотим написать плагин, который будет динамически изменять стили указанного элемента страницы так чтобы отцентрировать его по горизонтали и вертикали, даже при изменении размера окна браузера.
Нам потребуется совсем не много. Просто убедитесь, что вы скачали библиотеку jQuery.
Шаг 1
Первый шаг при разработке плагина – это создание нового JavaScript файла. В соответствии с соглашением об именах этот файл нужно назвать «YourPluginName.jQuery.js». Как только вы создали этот файл, убедитесь, что подключили его к странице.
<head>
<script src="jquery-1.2.6.pack.js" type="text/javascript">
<script src="center.jQuery.js" type="text/javascript">
</head>
Шаг 2
Теперь, скопируйте следующий код.
(function($){
$.fn.center = function(){
var element = this;
$(element).load(function(){
changeCss();
$(window).bind("resize", function(){
changeCss();
});
function changeCss(){
var imageHeight = $(element).height();
var imageWidth = $(element).width();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(element).css({
"position" : "absolute",
"left" : windowWidth / 2 - imageWidth / 2,
"top" : windowHeight /2 - imageHeight / 2
});
};
});
};
})(jQuery);
Я подробно объяснял все в видеоролике (прим. – на англ.), но хочу остановиться на нескольких ключевых моментах. Каждый ваш плагин должен находиться внутри:
$.fn.center = function(){};
«сenter» необходимо заменить на название вашего плагина. Это укажет jQuery, что вы добавляете новый метод. На данный момент он не делает ничего, но мы может его вызвать так:
$(function(){
$("#someElement").center();
});
Шаг 3
Вы должны понимать, как вручную центрировать картинку на странице до того как начнете создавать плагин. Первое, ваш элемент должен быть абсолютно позиционирован. В противном случае, он не будет двигаться после изменения значений «left» и «top«. Далее, картинка должна быть сдвинута на 50% ширины браузера влево. И, наконец, чтобы компенсировать ширину картинки, мы должны вычесть половину ее ширины (т.е. мы рассчитываем координаты ее левой стороны – прим.).
function changeCss(){
var imageHeight = $(element).height();
var imageWidth = $(element).width();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(element).css({
"position" : "absolute",
"left" : windowWidth / 2 - imageWidth / 2,
"top" : windowHeight /2 - imageHeight / 2
});
};
Таким образом, мы точно размещаем центр картинки в центре страницы.
Шаг 4
Продолжаем, нам нужно создать обработчик изменения размеров окна браузера.
$(window).bind("resize", function(){
changeCss();
});
Функция ChangeCss() присваивает новые координаты левому верхнему углу нашей картинки. Каждый раз при изменении размеров окна она будет пересчитывать эти значения.
Готово!
Если у вас возникли вопросы, можете спокойно задавать их в комментариях. И, как всегда, плагин не готов для использования в «живых» приложениях. Что произойдет если у пользователя выключен JavaScript? И конечно, есть несколько способов сделать то же самое на «чистом» CSS.
