Оформлення скроллбар в єдиному стилі для все браузерів

1. MooTools ScrollContro
2. Плагін jScrollPane для JQuery

Добрий день. Відразу ж хочу вибачитися перед читачами блогу за те, що так довго нічого не писав. На це були свої причини, більшість вельми приємні, про які я розповім в моєму ЖЖ. А поки, повернемося до корисних робочим записів.

Працюючи над черговим проектом, постало завдання оформити скроллбар в блоці в єдиному стилі для всіх браузерів. Зазначу відразу, що особисто я є противником того, щоб як небудь прикрашати, переробляти або кастомизировать елементи системного інтерфейсу в браузерах. Навіть якщо ви тільки починаєте вивчати створення сайтів , То постарайтеся відучити себе і своїх замовників від кастомізації системних елементів. Але є замовники, які хочуть «щоб було красиво ...» і хоч кіл їм на голові чеши. Спеціально для таких випадків ця стаття.

Отже, у нас є завдання. Вирішити цю проблему із застосуванням одного тільки CSS не вдасться. Для цього нам знадобитися JavaScript і CSS. Я не буду розповідати в цій статті про методи, які засновані на використанні чистого JavaScript, оскільки це, як правило, рішення з великими і об'ємними кодами. В даному матеріалі я розповім про два способи, кожен з яких заснований на популярних JavaScript фреймворк - jQuery і MooTools. Чому саме ці фреймворки, та тому, що на сьогодні це одні з найпопулярніших JS-бібліотек. Крім того, MooTools за замовчуванням використовується в Joomla! 1.5, а jQuery дружить з WordPress і Drupal, а це «три кити» з якими найчастіше сьогодні працюють веб-майстри.

MooTools ScrollContro

Даний плагін дозволяє вам замінити скроллбар в будь-якому контейнері в якому він використовується. Причому кількість таких контейнерів на сторінці не обмежена.

При цьому вам доступні всі основні фанкціі скроллбар:

• Перетягування бігунка вгору-вниз
• Управління стрілками вгору-вниз
• Використання коліщатка миші

Крім цього:

• Розмір бару змінюється в залежності від вмісту блоку
• Ви можете використовувати коліщатко миші, тільки якщо курсор знаходиться над змістом
• Якщо вміст менше, ніж задане простір, то контролери скроллбар НЕ будуть виводиться

плюс:

• Якщо JavaScript відключений виводиться стандартний скроллбар
• Вид сролла повністю налаштовується за допомогою CSS
• Необмежене число скроллбар
• Працює в IE, FF, Opera, Safari, Chrome

Застосовувати його дуже просто. Достатньо лише помістити контент в контейнер з ідентифікатором #contentcontainer:

<Div id = "contentcontainer"> Text content </ div>

При цьому його оформлення може бути різним, але в CSS описі обов'язково повинен бути присутнім атрибут overflow: auto або overflow: scroll. наприклад:

#contentcontainer {height: 300px; width: 435px; padding-top: 0; padding-right: 10px; overflow: scroll; overflow-x: hidden; margin-top: 20px; font-size: 1.1em; }

Включити роботу самого плагіна потрібно за допомогою простої функції:

window.addEvent ( 'domready', function () {new ScrollControl ($ ( 'contentcontainer'), { 'createControls': true});});

Якщо ж ви будете використовувати кілька контейнерів, то їм потрібно присвоїти різні ідентифікатори. Крім цього ви можете самі визначити назви для елементів управління і для контейнера зі скролл, якщо вам необхідно, щоб другий контейнер відрізнявся від першого. Робиться це за допомогою такого рядка:

new ScrollControl ($ ( 'contentcontainer1'), { 'htmlElementPrefix': 'control2_'}, $ ( 'scrolltrack1'), $ ( 'scrollknob1'), $ ( 'scrollUpBtn1'), $ ( 'scrollDownBtn1'));

де:

• htmlElementPrefix - префікс контейнера-маски
• scrolltrack1 - альтернативний клас для контейнера по якому рухається бігунок
• scrollknob1 - альтернативний клас бігунка
• scrollUpBtn1 і scrollDownBtn1 - кнопки вниз і вгору на Скролл

Для використання плагіна вам знадобиться бібліотека Mootools 1.11 і сам плагін, який можна завантажити на eSteak.net . Плагін створений A + media.

Плагін jScrollPane для JQuery

jScrollPane є jQuery плагіном, який дозволяє замінити дефолтний скроллбар браузера в будь-якому блоці зі стилем overflow: auto. Ви можете легко контролювати зовнішній вигляд прокрутки за допомогою CSS.

jScrollPane кросбраузерності рішення, що використовує jQuery. А якщо ж браузер користувача не підтримує jQuery або JavaScript, то ви побачите дефолтний скролл. При цьому плагін дублює всі основні дії скролла як і попередній варіант, але для точної копії всіх подій миші потрібно підключити додатково mouse wheel plugin.

Використання
Для роботи плагіна необхідні наступні файли:

• Біблтотека jQuery
• the mouse wheel плагін (якщо вам потрібна повна підтримка всіх подій миші)
• the jQEm плагін (якщо вам потрібно щоб ваш скролл автоматично змінював розмір при додаванні контенту користувачем)
• сам jScrollPane плагін
• файл jScrollPane.css

Всі файли можна завантажити зі сторінки плагіна jScrollPane .

Підключається все це простим додаванням в head вашої сторінки наступних посилань:

<Script type = "text / javascript" src = "scripts / jquery-1.2.6.min.js"> </ script> <script type = "text / javascript" src = "scripts / jquery.mousewheel.min.js "> </ script> <script type =" text / javascript "src =" scripts / jquery.em.js "> </ script> <script type =" text / javascript "src =" scripts / jScrollPane.js "> </ script> <link rel = "stylesheet" type = "text / css" media = "all" href = "styles / jScrollPane.css" />

Ви можете використовувати будь-який селектор по відношенню до елементу, до якого потрібно застосувати дію плагіна. У прикладі нижче плагін починає працювати, коли завантажений документ і має на сторінці хоча б один елемент з класом scroll-pane:

$ (Function () {$ ( '. Scroll-pane'). JScrollPane ();});

Також ви можете додати до функції додаткові параметри:

• scrollbarWidth [int] - ширина скроллбар в пікселях (за умовчанням 10)
• scrollbarMargin [int] - відступ зліва від скроллбар в пікселях (за умовчанням 5)
• wheelSpeed [int] - управління швидкістю переміщення контенту при Скролл в пікселях (за умовчанням 18)
• showArrows [boolean] - управляє висновком стрілок вгору-вниз (за замовчуванням задано 'false')
• arrowSize [int] - висота стрілок якщо showArrows = true (підраховується з CSS якщо не задана)
• animateTo [boolean] - визначає автопрокрутку до певного прапору scrollTo and scrollBy (За замовчуванням 'false')
• dragMinHeight [int] - мінімальна висота при якій з'являється скролл (за замовчуванням 0)
• dragMaxHeight [int] - максимальна висота при якій з'являється скролл (за замовчуванням 99999!)
• animateInterval [int] - Інтервал в мілісекундах для поновлення і анімації області скролла (за замовчуванням 100)
• animateStep [int] - визначає відстань при досягненні якого починається анімація (за замовчуванням 3)
• maintainPosition [boolean] - Дозволяє зафіксувати позицію контенту при його зміні (за замовчуванням 'true')
• scrollbarOnLeft [boolean] - визначає положення скроллбар зліва від контенту (також можна визначити за допомогою CSS)
• reinitialiseOnImageLoad [boolean] - визначає чи повинен скрипт реініціалізіровать себе при додаванні в контент зображення (за замовчуванням 'false')

Ось, мабуть, і все. Залишається тільки додати що я не став показувати приклади роботи скриптів, так як це можна побачити на їх сторінках.

PS Думки про умільців ...
Так, не перестаю дивуватися талантам наших умільців. У більш того прозорливості і таланту одеситів. Адже навіть не потрібно заходити на сайт міста одеса , Щоб знати що в ній є все. Припустимо, швейцарський годинник - swiss replica watches , Або горезвісний fake rolex - так, якщо ти чогось не знайшов, то їдь до Одеси. І буде тобі не тільки Rolex, а й ROLLS-ROYCE за подібною ціною. Туристичне спорядження, спальник, рюкзак, намет магазин