Приветствую всех!
Сегодня хочу поделиться небольшим плагином для jQuery, который я разработал специально для этого блога.
UPD. Эта информация устарела, т.к. появилась новая версия плагина.
Идею плагина я позаимствовал на очень популярном блоге Mashable. Если вы откроете любую их статью, то слева от текста увидите небольшую панель с кнопками социальных сетей. Самое главное в том, что при прокрутке страницы, эта панель смещается вниз и кнопки видны постоянно.
Мне такое решение показалось очень удачным. Ведь, скорее всего, посетитель захочет отправить ссылку в твиттер после того, как прочтёт часть статьи. Поэтому будет неплохо, если соответствующая кнопка в нужный момент окажется перед глазами.
Возвращаемся к плагину.
Демонстрацию его работы вы можете увидеть слева от этого текста. В данном случае я использовал кнопку твиттера, которую создаёт сервис Tweetmeme, но вы можете использовать любую другую кнопку в том числе и обычную картинку.
Принцип использования.
1) Подключаете библиотеу jQuery и плагин.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/left_floating_button.jquery.js"></script>
2) Создаёте тег div с кодом кнопки
<div id="twitter_widget"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>
3) Подключаете плагин
$('#twitter_widget').left_floating_button();
4) Если есть необходимость, указываете параметры. Тут нужны некоторые пояснения. Всего можно задать четыре параметра:
fromCenter — расстояние от середины страницы до середины виджета
fromTop — расстояние от виджета до верхней границы видимой части страницы
minTop — расстояние от виджета до начала страницы
Я сделал небольшой рисунок, чтобы было понятнее о каких расстояниях идёт речь.
Кстати, обратите внимание, что использовать плагин имеет смысл только для страниц с фиксированной шириной. По этой же причине расстояние устанавливается от центра страницы, а не от левого края.
Установить свои значения можно с помощью метода left_floating_button. Например, так
$('#twitter_widget').left_floating_button({
'fromCenter': 520,
'fromTop': 50,
'minTop': 200
});
Рассмотрим код плагина.
(function($) {
$.fn.left_floating_button = function(settings) {
//значения по-умолчанию
var config = {
'fromCenter': 520,
'fromTop': 50,
'minTop': 200
};
//если пользователь указал свои параметры, то используем их
if (settings) $.extend(config, settings);
var element = this;
//абсолютно позиционируем виджет
element.css('position', 'absolute');
var curWindow = $(window);
updateElement();
//изменяем положения виджета при прокрутке страницы
curWindow.scroll(function() {
updateElement();
});
function updateElement() {
//определяем размеры окна
var windowWidth = curWindow.width();
var windowTop = curWindow.scrollTop();
//рассчитываем положение виджета
var elementLeft = windowWidth / 2 - config.fromCenter - element.width() / 2;
var elementTop = windowTop + config.fromTop;
if (elementTop < config.minTop) {
elementTop = config.minTop;
}
//изменяем CSS свойства left и top,
//в результате виджет будет перемещаеться
element.css({'left':elementLeft, 'top':elementTop});
}
};
})(jQuery);
Как видите, он совсем небольшой. Пояснять каждую строчку кода я не буду, думаю, в этом нет необходимости, лучше поясню общий принцип работы.
Как только вы вызываете метод left_floating_button для какого-нибудь элемента страницы, плагин делает его абсолютно позиционированным (с помощью CSS свойства position: absolute). После этого, положение элемента можно изменять с помощью свойств top и left. Т.е. нужно пересчитывать значения этих свойств при каждой прокрутке страницы.
Для того, чтобы отслеживать прокрутку страницы нужно назначить обработчик события scroll, а рассчитать положение элемента несложно, зная ширину окна и расстояние до начала страницы. Последние можно получить с помощью методов $(window).width() и $(window).scrollTop().
Запуск перемещения выполняется присваиванием новых значений свойствам top и left.
Вот и всё. Но хочу предупредить, это только бета версия плагина в будущем он может измениться, и, кстати, эти изменения могут зависеть от ваших идей 🙂 . Так что, если вам кажется, что плагин можно улучшить или вы нашли баг, не стесняйтесь, пишите в комментариях к этой статье!
Исходники плагина
SourceУдачи!
Интересное
Мой дом — моя крепость. Но кто сказал, что крепость не должна быть красивой? В этом вам поможет отделка фасада загородного дома. Ваш дом действительно будет выделяться.
