jQuery UI tabs — делаем меню вкладками

Have a question? Ask in chat with AI!

jQuery UI logoВечер добрый. Как и обещалось, речь сегодня пойдет о 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».

custom theme jQuery UI

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

themes jQuery UI

После того как вы подогнали оформление под себя или выбрали готовую тему — смело нажимайте на ссылку «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


11 комментариев для “0

  1. Уведомление: jQuery UI tabs – делаем меню вкладками | Grabr
  2. а может быть так что ссылки «#id1″…. «#idn» не работают или неправильно показывают из за ЧПУ????
    на локальном ставил всё в норме, в сеть выкинул, где свой корявенькийдвижок стоит, и не отображает ничего…

    1. возможно на странице есть ссылки типа a name=»имя». тогда обращение может происходить к ним… увидеть бы код всей страницы

  3. вызвал с параметрами
    $( «.selector» ).tabs({ collapsible: true });
    но по-умолчанию открывается перваякак при загрузке оставить все вкладки закрытыми не кликая после инициализации ?

  4. Уведомление: Табы на JQ
  5. у меня не работает, сделал все по инструкциям, а блоки выводятся обычно
    вот тут, где комменты

  6. Руслан, такой вопрос — если я хочу, чтобы ссылки: 
    Название первого блока
    работали так при клике: Название первого блока
    А при наведении — открывали меню.
    Как мне реализовать, поскольку когла заберу #tabs-1 с href — не будет работать (мучаюсь, не могу придумать)

  7. Подскажите пожалуйста, что нужно написать в Вашем коде —

    Название первого блока
    Название второго блока
    Название третьего блока

    контент первого блока

    контент второго блока

    контент третьего блока

    С названиями понятно (просто вписать любое слово)
    А что вписать за место «Контент второго блока)

    И данный код просто вставить в сайдбар?

    Заранее, благодарю!

  8. У меня ничего не получилось (( делал все как описано. Может я тупой?

Добавить комментарий для Adik Isakov Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Пост на конкурс микрообзоров для блоггеров.
Следующая запись Opera дает возможность заработать