Як і обіцяв, сьогодні викладаю нову версію плагіна для 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 = cu rWindow.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) і зміна відбувається тільки якщо поточне значення не відповідає новому. Тобто при прокручуванні сторінки це властивість буде змінюватися тільки один раз.
Як бачите, змін не дуже багато, але, сподіваюся, вони виявляться корисними. І, як завжди, буду радий почути ваші відгуки та побажання щодо розвитку плагіна!
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.