Пишем свой первый плагин на jQuery
В сегодняшней статье я расскажу, как создать простой плагин на jQuery. А чтобы было интересней его создавать, поставим реальную задачу, которую должен этот плагин выполнять. Не долго думая я решил создать плагин, который бы при прокрутки страницы вниз выводил бы блок в углу экрана, при клике на который страница плавно прокручивалась бы вверх. Сейчас такие штуки довольно популярны и их можно встретить на многих сайта.
Постановка задачи
Прежде чем продолжить, давайте разобьем нашу задачу на несколько этапов:
Требования к плагину
Плагин должен иметь настройки:
Итак, с требованиями и задачами разобрались. Теперь можно смело переходить к реализации данного плагина на jQuery.
При создании плагина на jQuery необходимо код плагина поместить в отдельный файл, который бы имел название: jquery.название_плагина.js. Это такой стандарт. Так что лучше ему придерживаться.
Итак, наш плагин будет называться scroller, поэтому создадим пустой файлик с именем jquery.scroller.js
Для того чтобы создать плагин необходимо объекту jQuery.fn добавить новый метод, где имя метода — это название нашего плагина. Давайте взглянем на пример:
Как Вы успели заметить, вместо знака доллара $ мы используем слово jQuery. Это делается для того, чтобы наш плагин не конфликтовал с другими javascript библиотеками (например,Mootools, Prototype), которые также используют знак доллара $. Если же Вам привычнее работать со знаком доллара $, то тогда весь код плагина надо обвернуть в само вызывающееся замыкание:
В первой и последней строчке данного кода мы объявили анонимную функцию, которая принимает всего один параметр $, и сразу же вызвали её, а в качестве параметра передали ей объект jQuery. Теперь мы смело можем использовать знак доллара в своем коде и не думать ни о каких конфликтах с другими библиотеками.
Следующим шагом реализуем возможность задавать некоторые настройки для плагина, о которых мы говорил выше. Реализуется это следующим способом:
Все параметры хранятся в переменной options. Для инициализации этой переменной мы используем фунцию $.extend(), первым аргументом которой указываем объект, с параметрами по умолчанию, второй аргумент – параметры, указанные пользователем. В нашем случае используется 2 параметра:
Прежде чем продолжить, следует сказать несколько слов о контексте. Внутри плагина зарезервированное слово this это ссылка на объект jQuery, к которому вызывается плагин. Но когда, в коде плагина используются callback функции, то там this — это ссылка на нативный DOM элемент. Ошибки возникают тогда, когда разработчики лишний раз делают $(this) или наоборот забывают это делать. Ниже по тексту Вы все поймете.
Итак, движемся дальше. Так как наш плагин может быть вызван сразу к набору элементов ($('.class').scroller();), то нам надо этот момент учесть и обойти все элементы которые вошли в этот набор и к каждому применить наш плагин. Реализуется это очень просто. Используется функция each(). Давайте посмотрим на пример:
Как видите в данном случае this — это ссылка на объект jQuery, поэтому здесь не надо делать $(this)! Кроме того наш плагин возвращает этот объект this, так как используется ключевое слово return. Это сделано для того, чтобы поддерживать цепочки вызовов jQuery. Ведь красота и лаконичность цепочек вызовов jQuery является одной из причин, почему jQuery так популярна. Поэтому для того, чтобы Ваш плагин поддерживал эти цепочки вызовов, Вы должны убедиться, что Ваш плагин возвращает этот this в своей главной функции
Теперь можно приступать к реализации самого функционала плагина. Давайте объявим несколько переменных для дальнейшей работы.
Для того чтобы не путаться в дальнейшем, я создал локальную переменную $this, которой присвоил объект jQuery. Также определили начальную высоту объекта, так как именно от неё будет зависеть, когда будет появляться блок внизу экрана. Кроме этого создали html разметку нашего блока и вставили его внутрь объекта, для которого вызывался плагин.
Теперь осталось повесить собыите scroll, для выбранного элемента и в зависимости от установок плагина и прокрутки страницы, выводить или прятать блок внизу экрана. А также при клике на этот блок прокручивать страницу в начало экрана.
Для того чтобы использовать данный плагин у себя на сайте необходимо между тегами подключить саму библиотеку jQuery и сам плагин:
А также добавить следующие стили на страницу:
А теперь вызвать этот плагин можно так:
Здесь мы вызываем сам плагин и в качестве параметров передаем свой путь до картинки и высоту прокрутки экрана. В нашем случае height: 1 означает, что когда пользователь прокрутит страницу больше чем на одну высоту своего экрана, то у него появится блок внизу экрана.
Посмотреть демо можно здесь
Скачать исходники можно по этой ссылке
Если что-то не понятно, то отписуйтесь в комментариях!
Постановка задачи
Прежде чем продолжить, давайте разобьем нашу задачу на несколько этапов:
- Когда пользователь скролит страницу вниз больше чем на одну высоту экрана, то у него внизу экрана должен плавно появиться блок с изображением стрелочки вверх
- При клике на этот блок страница должна автоматически прокрутиться в начало страницы
- Если пользователь будет скролить страницу вверх, то блок должен автоматически прятаться
Требования к плагину
Плагин должен иметь настройки:
- для задания изображения, которое будет появляться в блоке
- установка высоты прокрутки экрана, после которой будет появляться блок для скрола
Итак, с требованиями и задачами разобрались. Теперь можно смело переходить к реализации данного плагина на jQuery.
При создании плагина на jQuery необходимо код плагина поместить в отдельный файл, который бы имел название: jquery.название_плагина.js. Это такой стандарт. Так что лучше ему придерживаться.
Итак, наш плагин будет называться scroller, поэтому создадим пустой файлик с именем jquery.scroller.js
Для того чтобы создать плагин необходимо объекту jQuery.fn добавить новый метод, где имя метода — это название нашего плагина. Давайте взглянем на пример:
jQuery.fn.scroller = function(){
//здесь будет код нашего плагина
};
Как Вы успели заметить, вместо знака доллара $ мы используем слово jQuery. Это делается для того, чтобы наш плагин не конфликтовал с другими javascript библиотеками (например,Mootools, Prototype), которые также используют знак доллара $. Если же Вам привычнее работать со знаком доллара $, то тогда весь код плагина надо обвернуть в само вызывающееся замыкание:
(function($){
$.fn.scroller = function(){
//здесь будет код нашего плагина
};
}(jQuery);
В первой и последней строчке данного кода мы объявили анонимную функцию, которая принимает всего один параметр $, и сразу же вызвали её, а в качестве параметра передали ей объект jQuery. Теперь мы смело можем использовать знак доллара в своем коде и не думать ни о каких конфликтах с другими библиотеками.
Следующим шагом реализуем возможность задавать некоторые настройки для плагина, о которых мы говорил выше. Реализуется это следующим способом:
(function($){
$.fn.scroller = function(options){
//Значения по умолчанию
options = $.extend({
img_src: 'images/scrollup.png',
height: 1.5,
}, options);
};
}(jQuery);
Все параметры хранятся в переменной options. Для инициализации этой переменной мы используем фунцию $.extend(), первым аргументом которой указываем объект, с параметрами по умолчанию, второй аргумент – параметры, указанные пользователем. В нашем случае используется 2 параметра:
- img_src — полный путь к картинке на сервере, которая будет выводится в блоке внизу страницы. По умолчанию равен — 'images/scrollup.png'
- height — высота прокрутки страницы, после которой будет появляться блок. По умолчанию равна — 1.5
Прежде чем продолжить, следует сказать несколько слов о контексте. Внутри плагина зарезервированное слово this это ссылка на объект jQuery, к которому вызывается плагин. Но когда, в коде плагина используются callback функции, то там this — это ссылка на нативный DOM элемент. Ошибки возникают тогда, когда разработчики лишний раз делают $(this) или наоборот забывают это делать. Ниже по тексту Вы все поймете.
Итак, движемся дальше. Так как наш плагин может быть вызван сразу к набору элементов ($('.class').scroller();), то нам надо этот момент учесть и обойти все элементы которые вошли в этот набор и к каждому применить наш плагин. Реализуется это очень просто. Используется функция each(). Давайте посмотрим на пример:
(function($) {
$.fn.scroller = function(options) {
//Значения по умолчанию
options = $.extend({
img_src: 'images/scrollup.png',
height: 1.5,
}, options);
return this.each(function(){
//здесь код плагина
});
};
})(jQuery);
Как видите в данном случае this — это ссылка на объект jQuery, поэтому здесь не надо делать $(this)! Кроме того наш плагин возвращает этот объект this, так как используется ключевое слово return. Это сделано для того, чтобы поддерживать цепочки вызовов jQuery. Ведь красота и лаконичность цепочек вызовов jQuery является одной из причин, почему jQuery так популярна. Поэтому для того, чтобы Ваш плагин поддерживал эти цепочки вызовов, Вы должны убедиться, что Ваш плагин возвращает этот this в своей главной функции
Теперь можно приступать к реализации самого функционала плагина. Давайте объявим несколько переменных для дальнейшей работы.
(function($) {
$.fn.scroller = function(options) {
//Значения по умолчанию
options = $.extend({
img_src: 'images/scrollup.png',
height: 1.5,
}, options);
return this.each(function(){
//ссылка на нативный элемент DOM
var $this = $(this),
//Высота прокручиваемого элемента
height = $this.height(),
content = '<div class="scrollup"><img src="'+options.img_src+'" alt="Прокрутить страницу вверх" title="Прокрутить страницу вверх"></div>',
scrollup = $(content).appendTo('body');
});
};
})(jQuery);
Для того чтобы не путаться в дальнейшем, я создал локальную переменную $this, которой присвоил объект jQuery. Также определили начальную высоту объекта, так как именно от неё будет зависеть, когда будет появляться блок внизу экрана. Кроме этого создали html разметку нашего блока и вставили его внутрь объекта, для которого вызывался плагин.
Теперь осталось повесить собыите scroll, для выбранного элемента и в зависимости от установок плагина и прокрутки страницы, выводить или прятать блок внизу экрана. А также при клике на этот блок прокручивать страницу в начало экрана.
(function($) {
$.fn.scroller = function(options) {
//Значения по умолчанию
options = $.extend({
img_src: 'images/scrollup.png',
height: 1.5,
}, options);
return this.each(function(){
var $this = $(this),
height = $this.height(),
content = '<div class="scrollup"><img src="'+options.img_src+'" alt="Прокрутить страницу вверх" title="Прокрутить страницу вверх"></div>',
scrollup = $(content).appendTo('body');
$this.scroll(function(){
if($(this).scrollTop() >= height*options.height){
//показываем кнопку прокрутки вверх
scrollup.fadeIn();
}
else{
//прячем кнопку прокрутки вверх
scrollup.fadeOut();
}
});
//При клике на блок,
//прокручиваем экран в начало страницы
scrollup.bind('click',function(){
$('html,body').animate({scrollTop:0},500);
}).
hover(function(){
$(this).css('cursor','pointer');
});
});
};
})(jQuery);
Для того чтобы использовать данный плагин у себя на сайте необходимо между тегами подключить саму библиотеку jQuery и сам плагин:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.scroller.js"></script>
А также добавить следующие стили на страницу:
div.scrollup {
position: fixed;
height: 48px;
bottom: 0;
right: 100px;
display: none;
}
А теперь вызвать этот плагин можно так:
$(function(){
$(window).scroller({
img_src: 'images/my_scrollup.png',
height: 1
});
});
Здесь мы вызываем сам плагин и в качестве параметров передаем свой путь до картинки и высоту прокрутки экрана. В нашем случае height: 1 означает, что когда пользователь прокрутит страницу больше чем на одну высоту своего экрана, то у него появится блок внизу экрана.
Посмотреть демо можно здесь
Скачать исходники можно по этой ссылке
Если что-то не понятно, то отписуйтесь в комментариях!
0 комментариев