Простой пример табов на jQuery — Записки программиста

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

И Но этоти недостатоки устраняется подключением небольшого скрипта плавного скролла при прокрутке страницы до якоря.

Плавный якорь jQuery

Для создания плавных якорей при прокрутке страницы необходимо подключение библиотеки jQuery. На WordPress библиотека jQuery подключена по умолчанию. Поэтому остается подключить в footer.php данный скрипт.

Важные настройки скрипта навигации по статье

Настройка исключения скролла для некоторых идентификаторов страниц.

Очень важная настройка.

Некоторые плагины могут создавать свои идентификаторы ID, например аккордион #accordion. В этом случае аккордион работать не будет! Чтобы скрипт скролла не реагировал на данный идентификатор, в код скрипта нужно добавить исключение:

В коде скрипта некоторые исключения уже вписаны:

Настройка отступа от верха браузера

Настройка скорости скролла

Рубрики HTML, СSS, PHP, jQuery

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

Вот пример как это выглядят табы:

  • Вкладка 1
  • Вкладка 2
  • Вкладка 3
  • Представляет собой идеальный вариант для тех, кто только начинает свой бизнес в Сети и не может определиться с нужным функционалом или ограничен на данном этапе в средствах. В дальнейшем есть возможность совершенствования функционала магазина.
  • Оптимальное сочетание невысокой стоимости и расширенного функционала.

    Помимо функций, которые включены в тариф «Оптимальный», вы получите в свое распоряжение личный кабинет на сайте, возможность реализовать систему скидок, возможность организации рассылки.

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

Назад

Опубликовано в Блог » CSS,

Привет, дорогой друг! Давно я не писал в блоге, но вот наконец я добрался до текстового редактора своего сайта :). Собственно, поехали.

Табы являются отличным способом для компактного предоставления информации пользователю, а также помогают разделить эту информацию на тематические группы. Сегодня мы создадим эту модную штучку без Javascript на одних лишь HTML и CSS3.

При создании табов мы будем пользоваться тегом input и CSS селектером :checked. Ну и начинаем с разметки.

HTML

При нажатии на радио-боксы мы будем активировать соответствующие табы. Для первого выставляем атрибут checked=»checked», чтобы сделать по умолчанию открытым первый таб. Сами элементы формы мы спрячем, а нажимать на них нам поможет тег label. Ну и в блоке .tabs_cont у нас находятся блоки с табами. Пока все просто.

CSS

Тут мы делаем тег label блочным элементом и ставим как нам необходимо, прячем input‘ы с помощью абсолютного позиционирования. Дальше идет тот самый селектор :checked. Простыми словами, если элемент с #tab_1 отмечен (в нашем случае это тот радио-бокс), то применяем стили к блоку #tab_l1 и т. д. В нашем случае мы применяем стили к выбранному названию таба. Ну и в конце задаем стили к блоку с контентом табов.

Уже что то вырисовывается и это хорошо. Теперь необходимо сделать, чтобы наши табы переключались.

Для начала прячем все табы. Это можно сделать с помощью display: none, но нам нужна плавность, поэтому мы не ищем легких путей. С помощью абсолютного позиционирования сдвигаем наши блоки к собачьим чертям, так сказать, и делаем прозрачность на 0, чтобы потом плавно сменить ее к значению 1.

Это мы сделаем с помощью свойства transition, которое описано после. Далее опять же пользуемся селектером :checked и делаем видимыми нам блоки для соответствующих радио-боксов.

Вот и все! Ничего сложного в этом вовсе нет. Немного поработав со стилями можно сделать нечто подобное, что я сделал в демо. Ну и по традиции исходники можно скачать ниже.

Шаблоны для dle 10 — 10.1CSS3-Tabs.zip [36,03 Kb] (cкачиваний: 4215)скачать dle 10.1русский торрент трекер

CSS, CSS3, HTML, HTML5, Урок

Навыки Интересы Я здесь


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

Это можно сделать при помощи JS или CCS3. Рассмотрим пример простых табов создаваемых при помощи JQuery.

Создаем простые стили:

#tabs { display:inline-block; } #tabs > div { padding:10px 0 0 0; } #tabs ul { margin:0px; padding:0px; } #tabs ul:after { clear:both; content:""; display:block; height:5px; background:#000; } #tabs ul li { cursor:pointer; margin:0 2px 0 0; display:block; float:left; padding: 15px; background:#ED6D9C; color:#000; } #tabs ul li.active, #tabs ul li.active:hover { background:#000; color:#fff; } #tabs ul li:hover { background:#d6d6d7; }

Далее сам “плагин” для табов:

И активируем его:

И конечно же сам HTML:

<div class="tabs"> <ul> <li>Первая тестовая вкладка</li> <li>Вторая вкладка</li> <li>Третья вкладочка</li> </ul> <div> <div>РЫБА: С другой стороны консультация с широким активом позволяет оценить значение соответствующий условий активизации. Не следует, однако забывать, что постоянный количественный рост и сфера нашей активности способствует подготовки и реализации соответствующий условий активизации. Товарищи! новая модель организационной деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям. </div> <div>Текст вкладки №2</div> <div>Текст вкладки №3</div> </div> </div>

Вот такой быстрый способ создания легких вкладок при помощи JQuery

Написать комментарий через:

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

Закрыть меню