JQuery — скрипт для вкладок (табов) в блоках. [реализация на Ucoz]

Доброго времени суток дорогие читатели! Сравнительно недавно я на одном из сайтов увидел очень удобную и функциональную фишку в виде табов, вкладок в блоках (сейчас такая фишка есть и на моем сайте сбоку в блоках). Это решение очень удобное и эффективное в плане экономии места на вашем сайте. Я поспрашивал об этом на различных форумах, поискал в поисковых системах, но толкового ничего не нашел (на ucoz многие скрипты не работали), но узнал что реализуются эти вкладки с помощью фреймворков или если по русски с помощью библиотеки JQuery.

jQuery скрипт вкладок, табов в сайдбаре сайта

О том, что это такое можно прочитать на википедии. И стал искать уже как с помощью этих библиотек реализовать данные вкладки. И случайно набрел на сайт dimox.name. Я упоминал уже однажды об этом сайте в статье про кнопки социальных закладок. Так вот на этом сайте я нашел то, что искал. Все было разложено по полочкам вроде бы, но не было того, как это реализуется на ucoz. Возможно, это из-за не знания сути того, как подключалась JQuery библиотека. Но как бы там ни было я чуть было не забросил это дело с вкладками, но все же додумался своей дурьей головой и как вы можете видеть реализовал эти вкладки у себя на сайте. А о том как мне это удалось сделать я вам сейчас и расскажу.
И так… Вперед…

Подключение библиотеки JQuery на сайтах Ucoz

И так подключение JQuery из-за отсутствия достаточных знаний в области HTML и JQuery для меня оказалось самым не понятным smile , хотя легче этого ничего и не было. Сначала я расскажу вам как неправильно я подключал библиотеки, а потом покажу в чем была ошибка и какие проблемы она создавала. Сначала я все делал точно так как было написано на сайте dimoxа. На сайте был выложен код, который подключал эти самые библиотеки. Вот тот самый код:

Код
Код

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

Подключение скрипта Jquery вкладок.

Далее нужно было подключить сам скрипт вкладок. Скрипт у автора получился довольно таки миниатюрный, но от этого не менее эффективный. Вот код скрипта:

Код
(например с названием tabs) с расширением .js (java script). Далее нам необходимо данный созданный файл с сохраненным в формате .js кодом скрипта загрузить на сайт через файловый менеджер (панель управления —> инструменты —> файловый менеджер). Подключаем его по аналогии с библиотекой JQuery, только вместо ссылки на библиотеку указываем ссылку на файл скрипта. Например, если файл скрипта назвали tabs ссылка на него будет выглядеть так:

Код
Код
(табы).
Обязательные CSS-стили скрипта вкладок.
Код
(если в странице, то на странице), где будут размещены вкладки, т.е. переходим в панель управления —> управление дизайном и далее в группе глобальные блоки переходим в нужный контейнер и ставим код:

Код
(об этом написано здесь). При подключении библиотек я упустил, что на сайтах Ucoz библиотека прошита по умолчанию и дополнительно подключать сторонние библиотеки не рекомендуется. Таким образом код:

Код

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

JQuery — скрипт для вкладок (табов) в блоках. [реализация на Ucoz]: 4 комментария

  • rostigor

    СПАСИБО!!! ОГРОМНОЕ..
    Наконец-то, хоть кто-то смог нормально расписать, как нужно это меню вставлять.
    Целый день потратил на это, пока не нашел ваш сайт.

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

Ваш e-mail не будет опубликован.