jQuery плагин: плавающий виджет с кнопками

Приветствую всех!

Сегодня хочу поделиться небольшим плагином для 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.

Вот и всё. Но хочу предупредить, это только бета версия плагина в будущем он может измениться, и, кстати, эти изменения могут зависеть от ваших идей 🙂 . Так что, если вам кажется, что плагин можно улучшить или вы нашли баг, не стесняйтесь, пишите в комментариях к этой статье!

Исходники плагина

Удачи!

Интересное

Мой дом — моя крепость. Но кто сказал, что крепость не должна быть красивой? В этом вам поможет отделка фасада загородного дома. Ваш дом действительно будет выделяться.