A- A A+
Расширение для Joomla! - Top of the Page

Модуль из предыдущего видео для Joomla! 2.5 не подходит, поэтому пришлось выискивать альтернативу. А конечный результат получился даже ещё лучше. Пример работы плагина Top of the Page на этом сайте, просто немного прокрутите страницу вниз.

Карточка расширения Top of the Page:

Дополнительная информация

Тип расширения: Плагин
Версия: 2.0
Совместимость: 2.5 и 3.x

О плагине Top of the Page

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

Нечто подобное мы сделаем для Joomla 1.7. Так как, тот модуль не подходит для версий 1.7 и 2.5, пришлось немало потрудиться и найти решение, которое даже лучше. У нас в этот раз будет не модуль, а плагин.

Шаг 1. Установка плагина

Обычная установка - РАСШИРЕНИЯ => МЕНЕДЖЕР РАСШИРЕНИЙ => Загрузить файл пакета.

Переходим в РАСШИРЕНИЯ => МЕНЕДЖЕР ПЛАГИНОВ.

Здесь находим строку - Top of the Page и заходим в настройки.

Установка плагина Top of the Page

Шаг 2. Включение плагина

В разделе Подробно включаем плагин.

Проверяем на сайте, что получилось. Появилась желтая кнопка с черными буквами на которой написано "Return to Top". Естественно, это не устроит большинство. Перейдем к настройкам.

Включение плагина Top of the Page

Шаг 3. Меняем кнопку

Смотрим Основные параметры. Настройка отвечающая за внешний вид кнопки находится под строкой Link Style.

Строка с кодом плагина Top of the Page

Мы предлагаем сделать свою картинку. Также Вы можете получить картинку другим способом, описанным в уроке "Автоматическое создание кнопок и логотипов". У нас же кнопка подготовлена и закачана на сайт.

Следующим шагом является изменение стиля. Прописываем под Link Style свой код, старый можно полностью удалить и заменить, за исключением идентификатора #gototop. Иначе плагин не будет работать.

Пример кода:

#gototop {
margin-right: 150px; (отступ от края окна справа)
margin-bottom: 15px; (отступ от края окна снизу)
width: 110px; (ширина кнопки)
height: 35px; (высота кнопки)
background-image: url(../images/gototop.png); (путь к картинке кнопки)
}

Замена кода в Top of the Page

Получилась такая экспериментальная кнопка.

Новая кнопка в Top of the Page

Шаг 4. Основные параметры

Пройдемся по другим пунктам раздела Основные параметры.

  • Button Reveral Position – Указывается на какое количество пикселей пользователь должен прокрутить страницу вниз, чтобы появилась кнопка.
  • Omit Button Text – Включение (отключение) текста на кнопке плагина по умолчанию.
  • Scroll Duration – Время появления (исчезновения) кнопки на экране. По умолчанию - 500 (полсекунды).
  • Transition Easing – Эффекты исчезновения кнопки.
  • Link Location – Место на экране, где будет появляться кнопка. По умолчанию - Bottom Right (внизу и справа).
  • Use Styles – Обязательно должно быть включено использование находящихся ниже стилей.

Используйте на своих сайтах такую кнопку, она здорово облегчает жизнь пользователя.

 

Комментарии  

#23 -2 Владимир Данилов 14.12.2012 13:19
Спасибо!
Цитировать
#22 -2 Андрей 30.06.2012 02:42
Цитирую rutika:
Цитирую Виталий Куликов:
Цитирую rutika:
Не работает на Joomla 2.5.6. Кнопка отображается только вместе с надписью "Return to Top".

Отлично работает на той же версии. Про Return to Top есть в видео

Получилось, но не так как у вас в видео уроке (#gototop{margin:30px;padding:25px 48px;background-image:url(-----------);})

Ну вот видите, не нужно опускать руки. У меня при подготовке видео тоже не всегда с первого раза всё работает, приходится искать причины и способы устранения
Цитировать
#21 -2 Андрей 30.06.2012 02:40
Цитирую Виталий Куликов:
Цитирую rutika:
Не работает на Joomla 2.5.6. Кнопка отображается только вместе с надписью "Return to Top".

Отлично работает на той же версии. Про Return to Top есть в видео

Получилось, но не так как у вас в видео уроке (#gototop{margi n:30px;padding: 25px 48px;background -image:url(---- -------);})
Цитировать
#20 -1 Андрей 29.06.2012 18:44
Цитирую rutika:
Не работает на Joomla 2.5.6. Кнопка отображается только вместе с надписью "Return to Top".

Отлично работает на той же версии. Про Return to Top есть в видео
Цитировать
#19 -2 Андрей 29.06.2012 16:42
Не работает на Joomla 2.5.6. Кнопка отображается только вместе с надписью "Return to Top".
Цитировать
#18 -1 Андрей 2007 14.06.2012 12:40
Цитирую Андрей 2007:
Блин. Не пойму. А откуда у меня две кнопки появилось???? www.chetokakto.ru

Решение конечно нестандартное, но действенное. Поставил отступ справа -30px. Всё лишнее уехало :D Хотя странно. Насколько я понимаю шаблоны у нас одинаковые.
Цитировать
#17 0 Андрей 2007 14.06.2012 12:19
Цитирую Виталий Куликов:
Цитирую Андрей 2007:
Блин. Не пойму. А откуда у меня две кнопки появилось???? www.chetokakto.ru

Чё-то как-то я тоже не пойму. В исходном коде только одна прописана. Попробуйте удалить плагин и заново поставить

Фиг знает. Всё равно две. Ну да ладно. Как нибудь потом разберусь. Пусть две будет пока.
Цитировать
#16 0 Андрей 14.06.2012 12:00
Цитирую Андрей 2007:
Блин. Не пойму. А откуда у меня две кнопки появилось???? www.chetokakto.ru

Чё-то как-то я тоже не пойму. В исходном коде только одна прописана. Попробуйте удалить плагин и заново поставить
Цитировать
#15 0 Андрей 2007 14.06.2012 10:50
Блин. Не пойму. А откуда у меня две кнопки появилось???? www.chetokakto.ru
Цитировать
#14 0 valent 15.05.2012 11:41
Цитирую Сергей:
обновление плагина не помогло все таже проблема...

Похоже на конфликт с шаблоном, попробуйте проверить например на стандартном. И второе. Я тестировал расширение на сайте в сети, а на локалке проблемы могут быть
Цитировать

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!