Современные вкладки на jQuery и CSS3

24 февраля 2013
727

Приветствую, друзья! Я тут начал немного дорабатывать свой блог - первые результаты можно видеть в комментариях к записям: добавлена форма комментирования для пользователей ВКонтакте. Обе формы комментариев - обычная и ВКонтакте - уживаются на соседних вкладках, которые удобно переключать. Как такие вкладки сделать, сегодня и расскажу.

Современному сайту уже мало быть просто красивым, он должен быть ещё и динамичным. Всплывающие окна вместо переключения на новые вкладки браузера, эффект lightbox для открытия изображений, слайд-шоу вместо статичной галереи и так далее. Чем меньше перезагрузок страницы для отправки форм, обновления содержания страницы и открытия новой информации, тем лучше: меньше обращений к серверу, меньше ожидание посетителя, пока обновится страница. Думаю, хорошие курсы web дизайна убедят в этом любого.

Вкладки на jQuery

О комментариях на AJAX - как раз для отправки сообщения без последующей перезагрузки страницы - я писал почти два года назад. Пока новее статьи нет - над этим надо поработать.

Сегодня поговорим о создании вкладок на jQuery. Это библиотека JavaScript, ориентированная на на взаимодействие JavaScript и HTML. О вкладках я тоже когда-то писал, но сейчас даже ссылку давать не буду - тогда рассматривались плагины WordPress для добавления вкладок на боковую панель. Сейчас я сторонник минимального использования плагинов. А код, что мы сегодня разберём, позволит легко добавлять вкладки куда угодно.

Но сначала надо подключить библиотеку jQuery, если она у вас ещё не подключена. Пригодится, кстати, для реализации ещё многих интересных функций, так что штука исключительно полезная.

Для подключения jQuery просто добавим в файл header.php между тегами <head> и </head> следующий код:

 Он загружает из специального хранилища Google минимизированную версию библиотеки. Подробнее о подключении jQuery к сайту в специальной статье.

Следующий код, отвечающий за переключение вкладок, также добавляем в секцию между <head> и </head>:

Обращаю ваше внимание! Есть у этого скрипта один недостаток: изначально при закрытии вкладки он присваивал всем div-контейнерам данной вкладки атрибут display: none, а при открытии вкладки возвращал видимость только контейнеру верхнего уровня, оставив вложенные контейнеры невидимыми.

Я заменил в коде div на span, теперь тоже самое он делает с контейнером span. Чем это лучше? В вёрстке этот специфический контейнер используется куда реже. Таким образом, содержимое вкладок должно быть окружено контейнером span, а вложенные контейнеры должны быть div'ами. Объясню на примере.

Мы уже подключили библиотеку и добавили скрипт, обеспечивающий работу вкладок, осталось добавить сами вкладки. За это отвечает следующий код, который вы вставляете туда, где вам требуются вкладки.

 Как видите, содержимое вкладок заключено в контейнер span. В самом содержимом придётся обойтись без него, иначе часть содержимого при переключении вкладок будет пропадать. Надеюсь, доступно объяснил.

Остались последний штрих - оформление. Вкладки должны выглядеть современно, как им и полагается. Для соответствующего внешнего вида добавьте следующие стили CSS в файл style.css или другой, отвечающий на вашем сайте за стили.

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

Related Posts Plugin for WordPress, Blogger...

Комментируйте - автору важно ваше мнение!

Дополнительно: