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

6 апреля, 2010
twitter button

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

Сегодня хочу поделиться небольшим плагином для jQuery, который я разработал специально для этого блога.

UPD. Эта информация устарела, т.к. появилась новая версия плагина.

Идею плагина я позаимствовал на очень популярном блоге Mashable. Если вы откроете любую их статью, то слева от текста увидите небольшую панель с кнопками социальных сетей. Самое главное в том, что при прокрутке страницы, эта панель смещается вниз и кнопки видны постоянно.

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

Возвращаемся к плагину.

Демонстрацию его работы вы можете увидеть слева от этого текста. В данном случае я использовал кнопку твиттера, которую создаёт сервис Tweetmeme, но вы можете использовать любую другую кнопку в том числе и обычную картинку.

Принцип использования.

1) Подключаете библиотеу jQuery и плагин.

  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="js/left_floating_button.jquery.js"></script>

2) Создаёте тег div с кодом кнопки

  1. <div id="twitter_widget"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>

3) Подключаете плагин

  1. $('#twitter_widget').left_floating_button();

4) Если есть необходимость, указываете параметры. Тут нужны некоторые пояснения. Всего можно задать четыре параметра:

fromCenter – расстояние от середины страницы до середины виджета
fromTop – расстояние от виджета до верхней границы видимой части страницы
minTop – расстояние от виджета до начала страницы

Я сделал небольшой рисунок, чтобы было понятнее о каких расстояниях идёт речь.

left_twitter_button_thumb

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

Установить свои значения можно с помощью метода left_floating_button. Например, так

  1. $('#twitter_widget').left_floating_button({
  2.         'fromCenter': 520,
  3.         'fromTop': 50,
  4.         'minTop': 200
  5.     });

Рассмотрим код плагина.

  1. (function($) {
  2.     $.fn.left_floating_button = function(settings) {
  3.         //значения по-умолчанию
  4.         var config = {
  5.             'fromCenter': 520,
  6.             'fromTop': 50,
  7.             'minTop': 200
  8.         };
  9.         //если пользователь указал свои параметры, то используем их
  10.         if (settings) $.extend(config, settings);
  11.  
  12.         var element = this;
  13.        
  14.         //абсолютно позиционируем виджет
  15.         element.css('position', 'absolute');
  16.         var curWindow = $(window);
  17.         updateElement();
  18.        
  19.         //изменяем положения виджета при прокрутке страницы
  20.         curWindow.scroll(function() {
  21.             updateElement();
  22.         });
  23.        
  24.         function updateElement() {
  25.             //определяем размеры окна
  26.             var windowWidth = curWindow.width();
  27.             var windowTop = curWindow.scrollTop();
  28.             //рассчитываем положение виджета
  29.             var elementLeft = windowWidth / 2 – config.fromCenter – element.width() / 2;
  30.             var elementTop = windowTop + config.fromTop;
  31.             if (elementTop < config.minTop) {
  32.                 elementTop = config.minTop;
  33.             }
  34.            
  35.             //изменяем CSS свойства left и top,
  36.             //в результате виджет будет перемещаеться
  37.             element.css({'left':elementLeft, 'top':elementTop});
  38.         }
  39.     };
  40. })(jQuery);

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

Как только вы вызываете метод left_floating_button для какого-нибудь элемента страницы, плагин делает его абсолютно позиционированным (с помощью CSS свойства position: absolute). После этого, положение элемента можно изменять с помощью свойств top и left. Т.е. нужно пересчитывать значения этих свойств при каждой прокрутке страницы.

Для того, чтобы отслеживать прокрутку страницы нужно назначить обработчик события scroll, а рассчитать положение элемента несложно, зная ширину окна и расстояние до начала страницы. Последние можно получить с помощью методов $(window).width() и $(window).scrollTop().

Запуск перемещения выполняется присваиванием новых значений свойствам top и left.

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

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

архив с исходным кодом

Удачи!

Интересное

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

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в CSS, HTML, JavaScript, Web разработка View Comments

]]>
  • Долго искал подобное, плагин отличный
  • Timur
    Долго искал подобное, плагин отличный.
  • Отличный плагин!!!! Спасибочки
  • Alex
    Спасибо за плагин! Немножко мерцает при скролинге, но это не критично!
  • Я рад, что вам он понравился. Проблема с мерцанием уже исправлена.
  • Всем спасибо за отзывы!

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

    @Александр спасибо за совет, попробую. Просто когда виджет находится вверху страницы, то свойство top нужно менять с помощью JS и я думал, что не будет особой разницы между position:fixed и position:absolute. Но похоже вы правы, с динамической заменой на position:fixed должно лучше получиться.
  • 2low4
    А всё, вижу. У меня просто NoScript привет передал))
  • Все отлично работает в Хроме!
    Спасибо, хороший плагин, надо и себе будет такой поставить.
  • Александр
    Плохо сделано. Скролишь мышкой за ползунок - всё мигает, скачет.

    Я такое реализовывал в Мегаплане. Правильное и красивое решение - динамически менять на position: fixed и обратно.
  • Александр
    А чем position:fixed не устраивает?
  • Что-то я ничего не наблюдаю слева от статьи (Opera 10.51).
  • Странно. Только что проверил в этой же версии оперы, все работает http://screencast.com/t/NTQ4NmY1YWYt.
  • Не, заблокировал не UserJS, а сама Опера. Срабатывает встроенный блокировщик всплывающих окон.
  • Блокировщик в данном случае побороть не получиться. Т.к. кнопка Tweetmeme вставляется с помощью JS кода с их сайта, а он создаёт iframe, который не нравится блокировщику.

    На работу самого плагина это не влияет, но, скорее всего, кнопку придется поискать другую.
  • Разобрался в причине - у меня UserJS-скрипт его заблокировал. В общем, можно юзать. Только, как уже сказали ниже, при прокрутке некрасиво дергается.
  • Примерчик живой слева от текста! Очень полезный плагин! Спасибо)
  • 2low4
    А примерчик живой можно посмотреть?
    Спасибо!
blog comments powered by Disqus ]]>