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

Владимир | | CSS, HTML, JavaScript, Web разработка.

twitter button

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

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

Кстати, обратите внимание, что использовать плагин имеет смысл только для страниц с фиксированной шириной. По этой же причине расстояние устанавливается от центра страницы, а не от левого края.

Установить свои значения можно с помощью метода 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

Удачи!

Интересное

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

  • 2low4

    А примерчик живой можно посмотреть?
    Спасибо!

  • 2low4

    А примерчик живой можно посмотреть?
    Спасибо!

  • Примерчик живой слева от текста! Очень полезный плагин! Спасибо)

  • Примерчик живой слева от текста! Очень полезный плагин! Спасибо)

  • Что-то я ничего не наблюдаю слева от статьи (Opera 10.51).

    • Странно. Только что проверил в этой же версии оперы, все работает http://screencast.com/t/NTQ4NmY1YWYt.

      • Разобрался в причине — у меня UserJS-скрипт его заблокировал. В общем, можно юзать. Только, как уже сказали ниже, при прокрутке некрасиво дергается.

      • Не, заблокировал не UserJS, а сама Опера. Срабатывает встроенный блокировщик всплывающих окон.

        • Блокировщик в данном случае побороть не получиться. Т.к. кнопка Tweetmeme вставляется с помощью JS кода с их сайта, а он создаёт iframe, который не нравится блокировщику.

          На работу самого плагина это не влияет, но, скорее всего, кнопку придется поискать другую.

    • Maslennikow_a_m

      цукцу

  • Что-то я ничего не наблюдаю слева от статьи (Opera 10.51).

    • Странно. Только что проверил в этой же версии оперы, все работает http://screencast.com/t/NTQ4NmY1YWYt.

      • Разобрался в причине — у меня UserJS-скрипт его заблокировал. В общем, можно юзать. Только, как уже сказали ниже, при прокрутке некрасиво дергается.

      • Не, заблокировал не UserJS, а сама Опера. Срабатывает встроенный блокировщик всплывающих окон.

        • Блокировщик в данном случае побороть не получиться. Т.к. кнопка Tweetmeme вставляется с помощью JS кода с их сайта, а он создаёт iframe, который не нравится блокировщику.

          На работу самого плагина это не влияет, но, скорее всего, кнопку придется поискать другую.

  • Александр

    А чем position:fixed не устраивает?

  • Александр

    А чем position:fixed не устраивает?

  • Александр

    Плохо сделано. Скролишь мышкой за ползунок — всё мигает, скачет.

    Я такое реализовывал в Мегаплане. Правильное и красивое решение — динамически менять на position: fixed и обратно.

  • Александр

    Плохо сделано. Скролишь мышкой за ползунок — всё мигает, скачет.

    Я такое реализовывал в Мегаплане. Правильное и красивое решение — динамически менять на position: fixed и обратно.

  • Все отлично работает в Хроме!
    Спасибо, хороший плагин, надо и себе будет такой поставить.

  • Все отлично работает в Хроме!
    Спасибо, хороший плагин, надо и себе будет такой поставить.

  • 2low4

    А всё, вижу. У меня просто NoScript привет передал))

  • 2low4

    А всё, вижу. У меня просто NoScript привет передал))

  • Всем спасибо за отзывы!

    Я постараюсь решить проблему с мерцанием в ближайшее время.

    @Александр спасибо за совет, попробую. Просто когда виджет находится вверху страницы, то свойство top нужно менять с помощью JS и я думал, что не будет особой разницы между position:fixed и position:absolute. Но похоже вы правы, с динамической заменой на position:fixed должно лучше получиться.

  • Всем спасибо за отзывы!

    Я постараюсь решить проблему с мерцанием в ближайшее время.

    @Александр спасибо за совет, попробую. Просто когда виджет находится вверху страницы, то свойство top нужно менять с помощью JS и я думал, что не будет особой разницы между position:fixed и position:absolute. Но похоже вы правы, с динамической заменой на position:fixed должно лучше получиться.

  • Alex

    Спасибо за плагин! Немножко мерцает при скролинге, но это не критично!

  • Спасибо за плагин! Немножко мерцает при скролинге, но это не критично!

  • Pingback: Блог-шоу - выпуск 37()

  • Отличный плагин!!!! Спасибочки

  • Отличный плагин!!!! Спасибочки

  • Timur

    Долго искал подобное, плагин отличный.

  • Долго искал подобное, плагин отличный.

  • Долго искал подобное, плагин отличный

  • Долго искал подобное, плагин отличный

  • Андрей

    Очень удобная кнопочка,вот и я бьюсь в конвульсиях в поиске одного решения нужна типа такая же кнопочка но чтоб она была пришита к краю страницы и при нажатии на неё выезжала окошко с заданным виджетом,очень полезная вещь,пример такой но уже готовой под форму обратной связи есть тут onwf.ru,немогли бы Вы как то открыть глазки на этот вопрос.

    • Если ваша форма будет иметь фиксированную ширину, то задача решается достаточно просто.
      1) верстаете виджет с формой
      2) устанавливаете для виджета абсолютное позиционирование и отрицательное значение свойства left (если виджет нужно прижать к левому краю страницы). Например, left: -200px если ширина формы 200px.
      3) устанавливаете для кнопки обработчик события click, который будет изменять значение left с -200 до 0 и наоборот (вообще, лучше переключать не значение свойства, а изменять CSS класс, который эти свойства устанавливает, в этом случае можно использовать jQuery.toggleClass()). В результате форма будет мгновенно выдвигаться с левой стороны окна браузера.
      4) добавляете анимацию, чтобы сделать перемещение формы плавным.