HOW YOU CAN SUPPORT UKRAINE
Авг
16
11

Лучшие системы табов для wordpress

wordpress табыС недавних пор табы стали неотъемлемою частью различных дизайнов сайтов, причем это не только касается блогов на wordpress, но и других проектов. Оно и не удивительно, решение достаточно функциональное и полезное, часто встречается в плагинах шорткодов. С его помощью вы сможете сэкономить место на странице при отображении большого количества информации. Для тех, кто не знает, что такое табы, можно использовать слова «закзаладки» / «вкладки», пользователь переключается между ними и видит разную информацию — последние записи блога, облако тегов, лучших комментаторов и т.п.

Однажды я уже рассказывал про табы в wordpress блоге — о том как реализовать их с помощью UI/Tabs jQuery. С тех пор прошло уже больше 2-х лет и в сети появилась еще парочку интересных реализаций механизмов табов.

Недавно в сети нашел подборку с табами, где выбрал парочку механизмов создания, о которых сейчас и поведаю. Не буду рассказывать подробно об установке каждого из них, поскольку это займет очень много времени, а лишь остановлюсь на главных моментах.

StereoTabs

StereoTabs — простая система табов, является частью библиотеки script.aculo.us.

табы StereoTabs

Stereotabs — маленький, небольшой скрипт для легкого добавления интерактивных закладок (табов) на странице, управление простое, внешний вид приятный.  Особенности:

  • Загрузка скрипта происходит после страницы без вмешательства в html код. Пользователи без включенного javascript также увидят контент.
  • Простота добавления — всегда пару строк кода позволит разместить табы на любой странице.
  • Скрипт маленький — 82 строки кода, 2кб!
  • После перезагрузки страницы активный там все равно запоминается, что весьма хорошо.
  • Есть специальные эффекты (затемнение) при переключении табов — на соответствующих по дизайну сайтах смотрелось бы очень стильно.

DOMTab

Про систему табов DOMTab есть много хороших отзывов.

система табов DOMTab

DOMtab это JavaScript который превращает ссылки на блоки контента в табы. Скрипт автоматически удаляет все ссылки типа «back to top» и скрывает контент всех блоков кроме первой закладки. Вы можете использовать сколько угодно табов для страницы. Из нового было добавлено, что если URL страницы указывает на какой-то из табов напрямую, то он будет подсвечиваться. Также можно определить классы и настроить ссылки типа «предыдущая» и «следующая» для навигации по табам, что иногда может очень пригодится. В целом, оригинальный такой скриптик.

Easy Tabs 1.2

Easy Tabs 1.2 — еще одна хорошая и «легкая» система для табов.

скрипт Easy Tabs 1.2

Новая версия скрипта поддерживает автосмену табов, если я правильно понял. При этом, как обычно, система совместима со своими браузерами. Кое-что из опций:

  • Можно осуществлять навигацию по табам с помощью клавиши TAB.
  • Доступна установка стартовой (активной) закладки.
  • Поддерживается любое количество табов.
  • Можно задать смену табов при наведении на них мышкой.
  • Абсолютно бесплатное использование для любых (и коммерческих) проектов.
  • Если отключено JavaScript будут отображаться все блоки контента.

В принципе, неплохой скрипт, понравилось как на странице с его описанием в сайдбаре для табов использовались не просто название блоков, а логотипы twitter, youtube.

Tabifier

Tabifier — еще один скрипт для табов.

скрипт для табов Tabifier

Автоматически создает табы из HTML кода с помощью JavaScript. Основным особенностями являются:

  • Собственно основная возможность — конвертация HTML в табы, вам не нужно знать никакой JavaScript для этого. Выделение и стили задаются через CSS.
  • Можно использовать альтернативные выделения стилями, если, например, на влючен JavaScript или для страницы печати.
  • Допускается несколько блоков с табами на одной странице.
  • Можно сделать любой таб активным.
  • Используются cookie для запоминания последнего выбранного таба, чтобы выводить его когда вы снова вернетесь на страницу.
  • Объектно-ориентированный код с подробными комментариями — полезно для разработчиков.

В целом, последний скрипт похож на наиболее «общим» и сырым, так сказать широченное поле возможностей для разработчиков. Каждая из представленных систем табов имеет какие-то свои плюсы, особенности, что могут пригодится в тех или иных ситуациях, поэтому выбрать однозначно нельзя.

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 9, средний балл: 4,67 из 7)
Загрузка...

категория Категории: Возможности; Хаки и секреты;
теги Теги: , , , , , , .

комментариев 11 к статье “Лучшие системы табов для wordpress”

  • Allpa   17.08.2011

    А я использую табы от Димокса: _dimox.name/universal-jquery-tabs-script/

  • Читер   23.08.2011

    Я кстати тоже. Во первых они универсальны,во вторых там все в ксс задается легко. Потом скрипт очень короткий. Вроде строк 6 и все). Имхо удобная вещь)

  • asa   27.08.2011

    А я использую табы от Димокса

  • Алькор   29.08.2011

    Ну прям реклама этого Димокса, пойду и я посмотрю что ж там хорошего.

  • Tod   30.08.2011

    Allpa, Читер, asa, нужно будет и себе потом глянуть на эти табы)
    Алькор, да, Димокс крут.

  • Rivolt   26.09.2011

    Люди, кто в состоянии помочь с табами Димокса,? К ним надо прикрутить ajax загрузку, но только загружать информацию, если таб активен, а так он скопом все грузит и это нехорошо.

  • Tod   26.09.2011

    Rivolt, наверное Димокс и может помочь)

  • Rivolt   26.09.2011

    Да, написал ему….ему лень тестировать:) какой то кошмар творится:)
    Вот мой переделанный пример
    http://narod.ru/disk/26384649001/%D1%82%D0%B0%D0%B1%D1%8B%20%D1%81%20ajax.rar.html
    Для людей с нужным образованием это займет минут 10.
    Всего то нужно добавить в скрипт что то типа этого : если таб активен, то загружать ajax такой то, если не активен, выводить прелоадер (или вобще не выводить) (или иначе прелоадер)…мои познания в программировании…их нет.

  • Евгений   24.10.2011

    Как-то давно попробовал DOMTab, тогда при нажатии на ссылку «читать запись полностью», и не только, также при нажатии где-то в сайдбаре, к примеру на «читать последний комментарий». Всегда добавляло к (диву = контент) — «display:none;», попробовал множество других решений и все таки вот снова поставил се такое решение, как DOMTab, на свой новый блог. И вот теперь решил всячески попытаться решить такие проблемы. Но это решение с табами, порадовало тогда больше всего.

  • Вадим   15.03.2013

    Подскажите как установить Easy Tabs 1.2 на вордпрес?

  • Tod   16.03.2013

    Вадим, на сайте скрипта найдете инструкцию по установке — там не сложно должно быть.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

  • Бесплатная cms (18%, голосов - 740)
  • Простота освоения (16%, голосов - 666)
  • Много плагинов (15%, голосов - 610)
  • Постоянное развитие (10%, голосов - 410)
  • Легкость в настройке (9%, голосов - 385)
  • Много шаблонов (8%, голосов - 337)
  • Заточена под блоги (7%, голосов - 305)
  • Русская локализация (7%, голосов - 296)
  • Функции "из коробки" (5%, голосов - 186)
  • Сообщество разработчиков (3%, голосов - 110)
  • Безопасность (2%, голосов - 64)

Всего голосов: 2 670

Загрузка ... Загрузка ...
Друзья проекта
Последние новости