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

jQuery UI logoВечер добрый. Как и обещалось, речь сегодня пойдет о JavaScript. Этой статьей я открываю новую рубрику, в которой и буду писать о различных Java скриптах, которые использую сам или которые считаю полезными. Сегодня у нас на обзоре jQuery UI, а если быть точнее его виджет Tabs. Виджет этот достаточно прост и позволяет нам использовать вкладки. Прямую реализацию можете посмотреть у меня в сайдбаре — да-да, это именно он. С его помощью я сэкономил место в сайдбаре и смог повесить список последних комментариев. Давайте рассмотрим данный виджет поближе.


Кастомизация и загрузка виджета.

Начать стоит с посещения сайта 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



Запись опубликована в рубрике JavaScript с метками , , , , . Добавьте в закладки постоянную ссылку.

11 комментариев: jQuery UI tabs — делаем меню вкладками

  1. Уведомление: jQuery UI tabs – делаем меню вкладками | Grabr

  2. Ильдар Хакимов говорит:

    Обязательно попробую что-нибудь сфорганить! Спасибо!

    • Гилязетдинов Руслан говорит:

      будут вопросы — обращайтесь — постараюсь помочь

  3. Hachi31 говорит:

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

    • Гилязетдинов Руслан говорит:

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

  4. Nik говорит:

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

  5. Уведомление: Табы на JQ

  6. Adik Isakov говорит:

    у меня не работает, сделал все по инструкциям, а блоки выводятся обычно
    вот тут, где комменты

  7. Anton говорит:

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

  8. Денис Черников говорит:

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

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

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

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

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

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

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

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

  9. василий говорит:

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

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

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