JOOMLA КНОПКА ON TOP

  • Тип - плагін, який дозволяє прокручувати сторінки сайту Joomla вгору.

 

  •  Rusifikator початок сторінки.

 

Top of the Page - це плагін, що дозволяє прокручувати сторінки сайту Joomla вгору. Підтримується Joomla 1.6 - 2.5. У фронтальній частині сайту виводиться кнопка для переходу до початку сторінки (до її верху). Даний плагін буде корисний для тих сайтів, які містять довгі матеріали, для повного перегляду яких користувачеві необхідно прокручувати «кілька екранів». Для того, щоб повернутися до початку сторінки і, наприклад, скористатися пошуком або перейти за допомогою меню до іншого розділу сайту, користувачеві необхідно або прокрутити сторінку за допомогою вертикальної смуги прокрутки, або натиснути на клавіатурі клавішу Page Up і так далі. А можна просто натиснути мишкою на кнопку, що з'явилася Вгору і перейти до початку сторінки.

До основних особливостей Top of the Page відносяться наступні:

  • Підтримка Joomla 1.6, 1.7, 2.5.
  • Простота установки і легкість настройки.
  • Підтримка багатомовності.
  • Гнучке стильове оформлення кнопки.
  • Підтримка в якості кнопки як тексту так і зображення.

Огляд буде проводитися для останньої на момент написання статті (01.03.2012) версії Top of the Page 1.8, Joomla 2.5.

Кнопка вгору Joomla може бути налаштована під Ваш сайт так, як необхідно з огляду на особливості дизайну. Давайте розглянемо настройки плагіна Top of the Page (малюнок нижче).

Налаштування Top of the Page

  • Опція Button Reveal Position дозволить Вам задавати висоту (в пікселях), після досягнення якої буде відображатися кнопка. Тобто Ви вказуєте на скільки користувач повинен «прокрутити» сторінку вниз, щоб з'явилася кнопка «Вгору».
  • Якщо Ви хочете використовувати в якості фону кнопки малюнок, то опція Omit Button Text дозволить Вам це зробити, прибравши текст, підвантажуємий з мовного файлу.
  • Включивши опцію Always at Top, Ви вказуєте на те, що необхідно завжди починати відображення сторінки зверху. Якщо, наприклад, Ви посилаєтеся з однієї сторінки сайту на іншу, використовуючи якір, що знаходиться в кінці сторінки, то краще відключити цю опцію.
  • Smooth Scroll . Дозволяє використовувати плавну прокрутку сторінки.
  • Scroll Duration . За допомогою даної опції Ви зможете задавати швидкість плавної прокрутки (в умовних одиницях). 1000 умовних одиниць = 1 секунда.
  • Scroll Transition . Дана опція дозволить налаштувати «ефект» при прокручуванні сторінки вгору. Вона працює, якщо включена опція Smooth Scroll . Вам буде доступний один з дванадцяти «ефектів».
  • Link Location . Ви можете вибрати одне з шести місць для відображення кнопки «Вгору» на сторінці. Вгорі зліва, по центру, справа або внизу зліва, по центру, справа.
  • Опція Use Styles включає або відключає використання власного стилю посилання. Якщо дана опція вимкнена, то буде використовуватися стиль Вашого шаблону сайту. Якщо включена, то Ви зможете задати унікальний стиль відображення кнопки в поле Link Style .

Давайте розглянемо декілька варіантів оформлення кнопки. Якщо Ви хочете використовувати в якості кнопки «Вгору» зображення, то спершу створіть його в будь-якому растровому редакторі і збережіть в папці з сайтом. Наприклад, файл, який Ви створили (або знайшли в інтернеті), називається button . png і знаходиться в папці images Вашого сайт. Тоді вміст поля Link Style може виглядати приблизно так:

Читай ще:   оновлюється FLASH PLAYER НА WINDOWS 8

#gototop{width: 70px;height: 30px;background-image: url(/images/button.png);}

Де параметри width і height вказують на ширину і висоту зображення кнопки.

Ви можете зіткнутися з проблемою коли зображення «прилипає» до країв екрану. Ви можете зробити розмір «полотна» зображення (на прикладі графічного редактора під Adobe Photoshop) більше, ніж безпосередньо малюнок самої кнопки. А «надлишкову» частина зробити прозорою. Причому, якщо кнопка у Вас на сайті розміщується в правому нижньому кутку, то малюнок кнопки на «полотні» в Adobe Photoshop повинен розміщуватися в лівій верхній частині. Донастроіть параметри width і height, Ви досягнете красивого (без «прилипання» до країв) відображення кнопки на сайті.

Але можна налаштувати відображення кнопки «Вгору» у вигляді тексту і фону. При цьому Вам будуть доступні для редагування товщина кордону кнопки, її колір, колір фону кнопки, колір шрифту і кольору фон і шрифту при наведенні курсору миші на кнопку. Виглядає це так:

#gototop{border:0px solid #000;margin:5px;padding:5px;background-color:#9BDCED;color:#000000;} #gototop:hover{background-color:#D4EFF6;color:#8A6D51;}

Де параметр border : - товщина обведення кнопки (в пікселях), solid - колір обведення, margin - відступ від країв вікна браузера (в пікселях), padding - відступ від тексту кнопки (слова «Вгору») до кордону (в пікселях). Іншими словами, за допомогою padding Ви можете збільшити або зменшити саму кнопку, якщо вона реалізована не за допомогою зображення. background - color - колір фону (поза фокусом курсору миші), color - колір шрифту (поза фокусом курсору миші), # gototop : hover background - color - колір фону в фокусі миші, # gototop : hover color - колір шрифту напису в фокусі миші .

Як Ви могли помітити кнопки вгору Joomla сайту з даними плагіном у Вас не буде проблем.

Top of the Page дозволить Вам зробити його зручнішим для користування сайтом. Не дивлячись на те, що піднятися на початок сторінки існує безліч способів, Top of the Page все одно буде корисний і зручний Вашим користувачам. Однак варто пам'ятати, що на тих сайтах, де шаблон розрахований на 100% ширини вікна браузера, кнопка «Вгору» може перекривати вміст сторінки. Тому варто уважно переглянути роботу Top of the Page і визначити, чи не заважає він користувачам.

Rusifikator початок сторінки

Завантажити українізатор Top of the Page.

 

Схожі матеріали

  • Огляд DJ-MegaMenu. Модуль меню Joomla
  • Огляд DJ-Suggester. Спливаюче вікно на сайті Joomla
  • Огляд Tag Transform. Joomla мітки
  • Огляд Joomla com_tags. Додавання міток матеріалів
  • Rusifikator початок сторінки

 

Корисні посилання:

  • Офіційний сайт програми.

SKYLINE SCROLL TO TOP - КНОПКА ПОВЕРНЕННЯ НАВЕРХ СТОРІНКИ

Чергова кнопка, яка здійснює швидке повернення наверх сторінки, що переглядається. Раніше описані аналогічні розширення «Adeptus UP» , «Top of the Page» , «SmoothTop» , неодноразово створювали проблеми у читачів блогу. Сподіваємося, що дана технологія не викличе нарікань.

Skyline Прокрутити вгору

ДЕМО

Joomla
2.5, 3.0

ЗАВАНТАЖИТИ

версія
2.0

Крок 1. Встановлення розширення

  • «Установка і включення розширень CMS Joomla!»

Крок 2. Налаштування. Вкладка «Плагін»

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

Тепер безпосередньо до налаштувань:

Skyline Прокрутити вгору

  • Admin Enable - використання кнопки в панелі управління сайтом
  • Engine - вибір бібліотеки JavaScript для анімації кнопки - jQuery
  • Background Image - розпаковуємо архів з картинками в папку «Images» і вибираємо зображення

Текстовий блок:

Skyline Прокрутити вгору

  • Text - текст на кнопці
  • Title - назва кнопки, яке буде спливати при наведенні курсору

Skyline Прокрутити вгору

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

Skyline Прокрутити вгору

  • Background Color - колір фону
  • Text Color - колір напису на кнопці
  • Hover Background Color - колір фону при фокусі на кнопці
  • Hover Text Color - колір тексту при наведенні курсору
Читай ще:   ДЛЯ ЧОГО СЛУЖИТИ SERVER CONNECTION CHANNEL

Міняємо фон і отримуємо наступний варіант відображення кнопки.

Skyline Прокрутити вгору

Останній блок відповідає за розташування кнопки:

Skyline Прокрутити вгору

  • Position - кнопку можна розмістити вгорі або внизу, праворуч або ліворуч
  • Border Radius - значення заокруглення кутів кнопки
  • Offset Left / Right - зміщення зліва і справа
  • Offset Top / Bottom - зміщення вгорі і внизу
  • Padding Left & Right - відступи зліва і справа
  • Padding Top & Bottom - відступи вгорі і внизу

Крок 3. Налаштування.
Вкладка «Додаткові параметри»

Додаткові необов'язкові настройки:

Skyline Прокрутити вгору

  • Scroll Duration - тривалість прокрутки (500 = півсекунди)
  • Scroll Transition - ефекти при переміщенні сторінки
  • Custom CSS - поле для вставки інших стилів

Поділіться статтею зі своїми друзями в соціальних мережах.

 

  • Коментарі (3)
  • Вконтакте ()
  • Google+
  • facebook ()

Виберіть мову

польськийанглійська німецький Іспанська французький італійський Португальська турецький Арабська Український шведський угорський болгарський естонський Китайська (спрощена) В'єтнамський румунський тайський Словенська Словацька сербський Малайський Норвезька Латвійська Литовський Корейська японський Індонезійська хінді іврит Фінський грецький нідерландський чеський Данська Хорватська Китайська (традиційна) Філіппінська урду Азейбарджанскій Вірменський білоруський бенгальська грузинський казахський каталонська Mongolski Русский Таджітскій Tamil'skij телугу узбецький


Додати коментар

Ваш e-mail не буде опублікований. Обов'язкові поля позначені *