Главная » Web-дизайн » JQuery — скрипт для вкладок (табов) в блоках. [реализация на Ucoz]
JQuery — скрипт для вкладок (табов) в блоках. [реализация на Ucoz]
Доброго времени суток дорогие читатели! Сравнительно недавно я на одном из сайтов увидел очень удобную и функциональную фишку в виде табов, вкладок в блоках (сейчас такая фишка есть и на моем сайте сбоку в блоках). Это решение очень удобное и эффективное в плане экономии места на вашем сайте. Я поспрашивал об этом на различных форумах, поискал в поисковых системах, но толкового ничего не нашел (на ucoz многие скрипты не работали), но узнал что реализуются эти вкладки с помощью фреймворков или если по русски с помощью библиотеки JQuery.
О том, что это такое можно прочитать на википедии. И стал искать уже как с помощью этих библиотек реализовать данные вкладки. И случайно набрел на сайт dimox.name. Я упоминал уже однажды об этом сайте в статье про кнопки социальных закладок. Так вот на этом сайте я нашел то, что искал. Все было разложено по полочкам вроде бы, но не было того, как это реализуется на ucoz. Возможно, это из-за не знания сути того, как подключалась JQuery библиотека. Но как бы там ни было я чуть было не забросил это дело с вкладками, но все же додумался своей дурьей головой и как вы можете видеть реализовал эти вкладки у себя на сайте. А о том как мне это удалось сделать я вам сейчас и расскажу. И так… Вперед…
Подключение библиотеки JQuery на сайтах Ucoz
И так подключение JQuery из-за отсутствия достаточных знаний в области HTML и JQuery для меня оказалось самым не понятным smile , хотя легче этого ничего и не было. Сначала я расскажу вам как неправильно я подключал библиотеки, а потом покажу в чем была ошибка и какие проблемы она создавала. Сначала я все делал точно так как было написано на сайте dimoxа. На сайте был выложен код, который подключал эти самые библиотеки. Вот тот самый код:
Код
Код
Я так и сделал. Перешел в панель управления сайтом, там в управление дизайном, а далее в страницы сайта. И там в шаблоне между тегами прописал как было сказано данный код.
Подключение скрипта Jquery вкладок.
Далее нужно было подключить сам скрипт вкладок. Скрипт у автора получился довольно таки миниатюрный, но от этого не менее эффективный. Вот код скрипта:
Код
(например с названием tabs) с расширением .js(java script). Далее нам необходимо данный созданный файл с сохраненным в формате .js кодом скрипта загрузить на сайт через файловый менеджер (панель управления —> инструменты —> файловый менеджер). Подключаем его по аналогии с библиотекой JQuery, только вместо ссылки на библиотеку указываем ссылку на файл скрипта. Например, если файл скрипта назвали tabs ссылка на него будет выглядеть так:
Код
Код
(табы). Обязательные CSS-стили скрипта вкладок.
Код
(если в странице, то на странице), где будут размещены вкладки, т.е. переходим в панель управления —> управление дизайном и далее в группе глобальные блоки переходим в нужный контейнер и ставим код:
Код
(об этом написано здесь). При подключении библиотек я упустил, что на сайтах Ucoz библиотека прошита по умолчанию и дополнительно подключать сторонние библиотеки не рекомендуется. Таким образом код:
СПАСИБО!!! ОГРОМНОЕ.. Наконец-то, хоть кто-то смог нормально расписать, как нужно это меню вставлять. Целый день потратил на это, пока не нашел ваш сайт.
спасибо большое братан . наконецто кто объяснил все подробнее
Рад, что сумел помочь
СПАСИБО!!! ОГРОМНОЕ..
Наконец-то, хоть кто-то смог нормально расписать, как нужно это меню вставлять.
Целый день потратил на это, пока не нашел ваш сайт.
Пожалуйста. Обращайтесь если что…