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