Главная > Руководства > Разработка простенького jQuery-плагина для Pinterest

Разработка простенького jQuery-плагина для Pinterest


23 мая 2013, 15:15. Разместил: Design FactoRy
Плагины играют важную роль в успешном применении jQuery. Существует множество различных плагинов, а также возможность создавать собственные – и это, несомненно, отличное преимущество. Учитывая растущую популярность социальной сети Pinterest, мы решили, что было бы хорошо научить наших пользователей разрабатывать плагины для Pinterest на jQuery. Сегодня мы займемся разработкой плагина обмена информацией.

Разработка простенького jQuery-плагина для Pinterest

Приступаем...

Сначала нам нужно взять шаблон jQuery-плагина.

(function( $ ) {
$.fn.pinterest = function(options) {

var settings = $.extend( {
}, options);

return this.each(function() {

});

};
})( jQuery );

Этот шаблон предоставляет нам возможность указать исходные значения конфигурации (настройки), а также позволяет извлечь преимущества из известной системы связки в jQuery (return this.each). Мы собираемся извлечь стандартные значения конфигурации, указав исходное изображение Pinterest, которое мы будем использовать. Его можно переписать при инициализации плагина за счет указания URL до желаемого изображения.

Исходное изображение

Разработка простенького jQuery-плагина для Pinterest

Собственное изображение

Разработка простенького jQuery-плагина для Pinterest

(function( $ ) {
$.fn.pinterest = function(options) {

var settings = $.extend( {
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);

return this.each(function() {

});

};
})( jQuery );

$(document).on('ready', function(){
$('img#share').pinterest({ button: 'pinterest-alt.png'});
});

Теперь, когда мы разобрались с базовым фреймворком, давайте начнем добавлять функционал. Нам нужно обновить функцию this.each, чтобы она инициализировала каждое изображение и давала нам кое-какие события. Мы решили сделать иконку поверх изображения, которым пользователь собирается поделиться. Чтобы сделать это, нам нужно обернуть изображение в span-элемент, который имеет абсолютное позиционирование. Затем нам нужно добавить сюда изображение для отправки, и расположить его абсолютно. Для этих целей мы используем нижний правый угол, но вы можете делать все по вашему усмотрению.

(function( $ ) {
$.fn.pinterest = function(options) {

var settings = $.extend( {
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);

return this.each(function() {
img = $(this);
img.wrap('<span class="pin-it" style="position: relative;" />');
img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');
});
};
})( jQuery );

$(document).on('ready', function(){
$('img#share').pinterest({ button: 'pinterest-alt.png'});
});

Теперь, когда нужные нам элементы на месте, мы можем начать привязывать события. Мы воспользуемся событиями hover и click. Когда пользователь наводит курсор на изображение, появляется кнопка “Share”.

(function( $ ) {
$.fn.pinterest = function(options) {

var settings = $.extend( {
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);

function on_click () {
};

function on_hover_in() {
$(this).siblings('img:first').show(500);
};

return this.each(function() {
img = $(this);
img.wrap('<span class="pin-it" style="position: relative;" />');
img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');
img.hover(on_hover_in);
img.siblings('img:first').on('click', on_click);
});

};
})( jQuery );

$(document).on('ready', function(){
$('img#share').pinterest({ button: 'pinterest-small.png'});
});

Событие on_click выглядит следующим образом:

function on_click () {
img = $(this).siblings('img:first');
description = img.attr('title');
url = document.location;
media = img.attr('src');

var pin_url = 'http://pinterest.com/pin/create/button/?url=' + encodeURIComponent( url ) +
'&media=' + encodeURIComponent( media ) +
'&description=' + encodeURIComponent( description );

window.open(pin_url, 'Pin - ' + description, 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
$(this).hide(1000);
};

Оно извлекает изображение, которым мы хотим поделиться, а затем считывает его атрибуты title и scr. Оно также получает URL текущей страницы при помощи document.location. URL для обмена данными в Pinterest имеет 3 параметра, которые нам понадобятся:

* url – страница, с которой мы выполняем публикацию
* media – изображение, которым мы собираемся поделиться
* description – текст, который должен быть отображен на изображении

Когда мы генерируем ссылку для публикации, мы используем javascript-функцию encodeURIComponent, чтобы удостовериться в том, что значения были извлечены корректно.

Есть еще один параметр, который мы должны указать – будет ли scr url изображения относительным или нет. Если он будет относительным, нам нужно обновить url медиафайла.

function getUrl(src){
var url = document.location.toString();
var http = /^https?:\/\//i;
if (!http.test(src)) {
if(src[0] == '/'){
url = url.substring(0, url.lastIndexOf('/')) + src;
} else {
url = url.substring(0, url.lastIndexOf('/')) + '/' + src;
}
} else {
url = src;
}

return url;
};

Данная функция проверяет, начинается ли предоставленный URL src с http или нет. Если нет, то будет создан и возвращен в ответе абсолютный URL.

И на этом все! Теперь у вас есть полноценный jQuery-плагин для совершения публикаций в Pinterest. Ниже приведены исходные файлы HTML и javascript. Изображение, которое мы использовали в статье, - это «Три Музыканта» Пабло Пикассо.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Creating a simple Pinterest! jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

(function( $ ) {
$.fn.pinterest = function(options) {

var settings = $.extend( {
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);

function getUrl(src){
var url = document.location.toString();
var http = /^https?:\/\//i;
if (!http.test(src)) {
if(src[0] == '/'){
url = url.substring(0, url.lastIndexOf('/')) + src;
} else {
url = url.substring(0, url.lastIndexOf('/')) + '/' + src;
}
} else {
url = src;
}

return url;
};

function on_click () {
img = $(this).siblings('img:first');
description = img.attr('title');
url = document.location;
media = getUrl( img.attr('src') );

var pin_url = 'http://pinterest.com/pin/create/button/?url=' + url +
'&media=' + media +
'&description=' + description;

window.open(pin_url, 'Pin - ' + description, 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
$(this).hide(1000);
};

function on_hover_in() {
$(this).siblings('img:first').show(500);
};

return this.each(function() {
img = $(this);
img.wrap('<span class="pin-it" style="position: relative;" />');
img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');
img.hover(on_hover_in);
img.siblings('img:first').on('click', on_click);
});

};
})( jQuery );
</script>
</head>
<body>
<div id="page">
<!-- [banner] -->
<header id="banner">
<hgroup>
<h1>Creating a simple Pinterest! jQuery</h1>
</hgroup>
</header>
<!-- [content] -->
<section id="content">
<img id="share" src="picasso.jpg" title="Three Musicians" />
</section>

<script>
$(document).on('ready', function(){
$('img#share').pinterest({ button: 'pinterest-small.png'});
});
</script>
</div>
<!-- [/page] -->
</body>
</html>

Демо | Скачать исходные коды
Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад