Вечер добрый. Как и обещалось, речь сегодня пойдет о JavaScript. Этой статьей я открываю новую рубрику, в которой и буду писать о различных Java скриптах, которые использую сам или которые считаю полезными. Сегодня у нас на обзоре jQuery UI, а если быть точнее его виджет Tabs. Виджет этот достаточно прост и позволяет нам использовать вкладки. Прямую реализацию можете посмотреть у меня в сайдбаре — да-да, это именно он. С его помощью я сэкономил место в сайдбаре и смог повесить список последних комментариев. Давайте рассмотрим данный виджет поближе.
[adsense]
Кастомизация и загрузка виджета.
Начать стоит с посещения сайта http://jqueryui.com. Здесь можно найти множество различных виджетов и эффектов реализованных на JavaScript. Но повторюсь — сегодня нас интересует виджет jQuery UI Tabs.
Итак первое, что мы делаем, это переходим на страницу закачек http://jqueryui.com/download. Нажимаем «Deselect all components» и отмечаем только нужным нам виджет — Tabs. Мы видим, что вместе с Tabs отметились еще Core и Widget — это основные библиотеки необходимые для работы нашего виджета. C правой стороны мы видим заветную кнопку «Download», но не спешите ее нажимать.
Важным действием перед скачкой виджета является выбор темы оформления. Очень интересным моментом является возможность сделать тему самому — это дает нам возможность максимально кастомизировать виджет. Сделать это можно нажав на маленькую незаметную ссылку «design a custom theme».
Вы попадете на страницу создания темы. Но если вы как и я немного ленивы — обратите внимание — есть несколько готовых тем. Я подобрал себе тему по цветовой гамме используемой на моем сайте. Позже понадобилось лишь немного поиграть с CSS и сейчас вы видите то, что видите.
После того как вы подогнали оформление под себя или выбрали готовую тему — смело нажимайте на ссылку «download theme». Вас перекинет обратно к списку виджетов, с одним небольшим изменением — в поле выбора темы будет указана выбранная вами. Вот теперь смело нажимаем кнопку «Download» и скачивать архив с виджетом, библиотеками и файлом стилей CSS.
Установка на сайт.
Установка достаточна проста и незатейлива. Просто следуйте инструкциям в том порядке, в котором я буду их приводить — и я уверен все заработает с первого раза.
Распаковываем скачанный архив. Содержимое — это 3 папки: js, css, development-bundle
и документ html index.html
. Нам понадобится содержимое папок css и js — на остальное не обращайте внимания.
Итак сейчас задача состоит в том, чтобы скопировать на сервер файлы *.css
, *.js
и папку images
в каталог с вашей темой. После того как файлы окажутся на сервере, нам надо их подключить. Для этого необходимо отредактировать файл header.php в каталоге с вашей темой. Вставляем следующий код:
По-поводу файла jquery-ui-1.8.11.custom.css
: советую после окончательной настройки внешнего вида виджета интегрировать его в ваш файл style.css
— так вы уменьшите время загрузки вашего сайта. Для этого надо просто скопипастить все строки из jquery-ui-1.8.11.custom.css
в style.css
. Вставлять желательно в самом конце. После этой процедуры сам файл jquery-ui-1.8.11.custom.css
и строку
можно удалить из файла header.php
Продолжим. На данный момент у нас должно быть сделано следующее:
- на сервер залиты файлы jquery-1.5.1.min.js и jquery-ui-1.8.11.custom.min.js
- в файле header.php оба этих файла подключены к шаблону вашей темы
- содержимое файла jquery-ui-1.8.11.custom.css перемещено в style.css
Настало время для контента. Для примера, расскажу о своем сайдбаре. У меня в виджете выводится 3 блока div. Первый — список категорий, второй — архивы, третий — форма регистрации и логинизации.
Структура построения кода для виджета выглядит так:
- Название первого блока
- Название второго блока
- Название третьего блока
Рассмотрим код подробнее. Первым идет блок со списком — это названия вкладок. Далее идут 3 блока с нужным нам контеном. Все достаточно просто и понятно, надеюсь.
Последним шагом будет связка нашего виджета с html разметкой. Сразу после наших блоков нужно вставить следующий код:
И вот после этого виджет должен работать. Надеюсь, у вас все получилось. Если же есть какие-либо проблемы — пишите в комментарии — постараюсь помочь.
Традиционный бонус.
По традиции делюсь с вами бонусом. Следующий код позволит показывать вкладки не по клику, а при наведении указателя мышки на название вкладки. Смотрится довольно изящно, но не всем подойдет.
На этой приятной ноте прощаюсь с вами, но ненадолго. Есть вопросы? Задавайте в комментариях. И не забудьте подписаться на рассылку и твиттер блога или мой личный твиттер.
Рекоммендую почитать блог JoniKa
Обязательно попробую что-нибудь сфорганить! Спасибо!
будут вопросы — обращайтесь — постараюсь помочь
а может быть так что ссылки «#id1″…. «#idn» не работают или неправильно показывают из за ЧПУ????
на локальном ставил всё в норме, в сеть выкинул, где свой корявенькийдвижок стоит, и не отображает ничего…
возможно на странице есть ссылки типа a name=»имя». тогда обращение может происходить к ним… увидеть бы код всей страницы
вызвал с параметрами
$( «.selector» ).tabs({ collapsible: true });
но по-умолчанию открывается перваякак при загрузке оставить все вкладки закрытыми не кликая после инициализации ?
у меня не работает, сделал все по инструкциям, а блоки выводятся обычно
вот тут, где комменты
Руслан, такой вопрос — если я хочу, чтобы ссылки:
Название первого блока
работали так при клике: Название первого блока
А при наведении — открывали меню.
Как мне реализовать, поскольку когла заберу #tabs-1 с href — не будет работать (мучаюсь, не могу придумать)
Подскажите пожалуйста, что нужно написать в Вашем коде —
Название первого блока
Название второго блока
Название третьего блока
контент первого блока
контент второго блока
контент третьего блока
С названиями понятно (просто вписать любое слово)
А что вписать за место «Контент второго блока)
И данный код просто вставить в сайдбар?
Заранее, благодарю!
У меня ничего не получилось (( делал все как описано. Может я тупой?