Яркие вкладки с помощью jQuery и CSS3

Содержание

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Вступление

Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге.

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

Почему я называю свой новый скрипт для jQuery-вкладок универсальным:

  • он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
  • можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
  • содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,3 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.

Что ж, хватит сухих слов, переходим к сути.

Код jQuery-скрипта для переключаемых блоков с вкладками

Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами и ):

Я предпочитаю «брать» его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во-вторых, скорость серверов Гугла стабильна и быстра, в-третьих, Гугл отдает его в сжатом виде (gzip), и, например, для версии 1.4.2 размер составляет всего 24 килобайта по сравнению с несжатым файлом (70 Кб).

Вот такой у меня получился скрипт:

Добавлено 07.03.2010 (обновлено 09.04.2015)

В комментариях подсказали еще более сокращенный вариант этого скрипта (обратите внимание, что для него нужно использовать jQuery не ниже версии 1.7):

Для тех, кто еще не знает, как подключать этот скрипт — создать файл с расширением .js , вставить в него код скрипта и подключить по аналогии c jQuery (см. выше), естественно, заменив ссылку на адрес скрипта.

Скачать

Универсальный jQuery-скрипт для блоков с вкладками

Загрузок: 26155 | Размер: 15 Кб

Если вы желаете отблагодарить автора финансово, воспользуйтесь следующей формой, указав произвольную сумму рублей:

HTML-код, который нужно использовать для скрипта

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

Обязательные CSS-стили для вышеуказанного HTML-кода

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

Примеры

  • 1-й пример.
  • 2-й пример, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie).
  • 3-й пример, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie).
  • 4-й пример, в котором при переходе по ссылке с якорем, указывающим на номер таба, активируется соответствующий таб.

P.S. Мне в твиттере как-то сказали, что я «изобретаю колесо», что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я «изобрел колесо», главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)

Требуется разработка печатного каталога товаров или услуг? Создание каталога в студии «Верстаем.ru» это оптимальное решение!

Делаем красивые табы (вкладки) с помощью CSS и JQuery

Здравствуйте, уважаемые читатели блога. В этот, такой морозный день мы будем делать с Вами красивые табы с помощью CSS и JQuery. Оказывается, что эти, так называемые, табы очень полезны для сайта в целом, они позволяют существенно сэкономить место на странице. Их можно разместить везде, в сайдбаре, или не посредственно, в самом контенте, статье.

Так же, табы, которые мы будем делать, красивого дезайна, они существенно украсят Ваш сайт. Во как :-) красиво и полезно, мне кажется редкое совпадение. Тем более делаются они только при помощи CSS, соответственно: быстро загружаются, и не несут никакой нагрузки на сервер.

Посмотреть пример

Ну а теперь пришло время перейти к самому уроку, и так, поехали.

Сама оболочка табов довольно проста, она состоит из тегов

    и

Как видите теги

    — это будущие заголовки табов, этому тегу мы присвоили >

Теперь давайте придадим нашим табам красивый вид.

Данные стили очень просты и понятны, которые Вы с лёгкостью сможете изменить по Вашему усмотрению, тем более никаких изображений, только CSS.

Теперь нам нужно сделать плавное переключение между табами, это реализовывать мы будем с помощью JQuery.

JQuery

Вот в принципе и всё, Вы главное экспериментируйте, В данные вкладки можно добавить фоновые изображения, которые существенно предадут им вида, только вот загружаться они будут дольше.

Посмотреть пример

Совместимость с браузерами

Эти табы поддерживают практически все браузеры, только в некоторых они будут выглядеть чуть по другому, потому что многие, ещё пока, не поддерживают CSS3.

Вот и всё, надеюсь Вам понравилось :-) Если что то Вам будет не понятно обязательно спрашивайте в комментариях. До скорых встреч.

11 бесплатных CSS и jQuery плагинов и руководств по созданию вкладок

А сегодня мы решили поделиться с вами подборкой из 11 бесплатных CSS-jQuery плагинов и руководств, посвященных созданию вкладок. Эти плагины помогут разработчикам создавать навигацию из вкладок, а также улучшить юзабилити и предоставить более приятный опыт взаимодействия. Разработка меню навигации – это зачастую одна из сложнейших задач при разработке веб-сайта, так как разработчикам необходимо уместить все важнейшие ссылки и при этом не заставить пользователей раздражаться.

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

Tabslet представляет собой еще один удобный jQuery-плагин для организации вкладок. Плагин очень легкий, очень простой в использовании, и совместим с такими браузерами как IE7+, Chrome, Firefox и Safari.

Отдельная область контента с несколькими вкладками, каждая из которых привязана к заголовку в списке.

В этой статье вы сможете узнать, как создать анимированные вкладки контента при помощи чистого кода CSS.

jQuery-модуль для создания вкладок в современном веб-дизайне!

EasyTabs – это миниатюрный jQuery-плагин , который предоставляет полный функционал навигации с вкладками, в то время как стилизация элемента остается за вами.

jQuery-плагин, который позволяет добавить вкладки, визуально привязанные к положению скроллинга.

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

Статья, посвященная разработке привлекательных CSS3-вкладок.

В этой статье вам расскажут о том, как создать простой информационный блок с вкладками при помощи HTML, а затем сделать его функциональным при помощи javascript. Кроме того, вы научитесь реализовывать подобный эффект при помощи jQuery-библиотеки.

Цукерберг рекомендует:  Хостинг - Вопрос насчёт домена и хостинга

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

17 нововведений jQuery 3 и советы по их использованию

Прошло уже более 10 лет с того момента, как библиотека jQuery начала своё широкое распространение по Интернету, и она до сих пор пользуется большой популярностью. В июле 2015 года jQuery анонсировала альфа-версию 3.0 — крупнейшее обновление за долгие годы.

Текущая версия 3.1.1, вышедшая в сентябре 2020 года, исправила множество багов, добавила новые методы и удалила избыточные, также изменив поведение некоторых функций. Давайте разберемся в нововведениях, которые были представлены в этой версии.

Методы скрытия и отображения

Для лучшей совместимости с адаптивным дизайном jQuery3 была усовершенствована, получив возможность скрытия нескольких элементов. Тесты показали, что новая версия справляется с этим на 2% быстрее, чем предыдущая.

Кроме того, методы .hide() , .show() и .toggle() будут ориентироваться на inline-стили. Эта особенность позволит корректно работать с функцией display , что позволит правилам CSS изменяться динамически в зависимости от таких событий, как изменение разрешения окна и ориентации экрана.

Методы wrapAll() и unwrap()

В jQuery 2 метод .wrapAll() при передаче функции в качестве аргумента вёл себя точно так же, как и метод .wrap() . Это изменили — теперь .wrapAll(function) вызывает функцию и использует строковое представление результата как обёртку коллекции.

В jQuery 3 также появился опциональный параметр-селектор метода unwrap() . Это нововведение позволяет передавать методу строковое значение, которое содержит выражение селектора.

Полосы прокрутки высоты и ширины теперь учитываются

В jQuery 2 вызов $(window).width() возвращал ширину содержимого, не учитывая полосы прокрутки, добавленные браузером, когда содержимое превышало размеры элемента. Для того, чтобы предоставить возможность измерения, эквивалентную CSS-медиазапросу, $(window).outerWidth() и $(window).outerHeight() теперь возвращают ширину и длину с учётом полос прокрутки. Это эквивалентно свойству DOM window.innerWidth .

Поведение data()

В jQuery 3 поведение метода data() было немного изменено, чтобы он подходил под спецификации Dataset API. Теперь он переводит имена свойств в верблюжью нотацию.

При использовании старой версии вы получите следующий результат:

В jQuery 3 вы получите:

Как вы заметили, название параметра переведено в верблюжью нотацию, в то время как в старых версиях параметр оставался в нижнем регистре с дефисом.

Поддержка SVG при операциях с классами

jQuery до сих пор не полностью поддерживает SVG, но методы наподобие .hasClass() или .addClass() , которые управляют CSS-классами, могут быть использованы для работы с SVG. Вы можете изменять или находить классы в SVG, затем применять стили к классам, используя CSS.

Фильтры скрытия и отображения

jQuery 3 изменяет смысл фильтров :visible и :hidden . Он воспринимает элементы как :visible , если у них есть хоть какие-то окна макета, включая те, которые имеют нулевую ширину и длину. Для примера, элемент br и строковые элементы без содержимого будут выделены фильтром :visible .

Если вы имеете следующую HTML-страницу:

и запускаете выражение:

то в jQuery 2, вы получите результат 0 , а в третьей версии результат будет равен 3 .

jQuery больше не округляет параметры высоты и ширины

Теперь jQuery возвращает дробные значения .width() и .height() вместо целого числа, если браузер поддерживает это. Для пользователей, которым нужна субпиксельная точность (например, при дизайне веб-сайтов), это может быть полезным.

Например, у вас есть 3 элемента с шириной, равной одной третьей (33.333333%), внутри контейнера шириной 100px:

Если вы запросите ширину дочернего элемента:

то получите значение 33.33333 , что будет являться более точным результатом.

Дополнительный уровень защиты

Дополнительный уровень был добавлен для защиты от межсайтового скриптинга (XSS). Разработчикам теперь нужно уточнять dataType:”script” в опциях методов $.ajax() и $.get() . Это предотвращает возможность атак. Предоставляем пример кода:

Неприменимый хеш

jQuery 3 возвращает синтаксическую ошибку, если строка селектора состоит лишь из хеша, вроде jQuery(«#») или .find(«#») . В старой версии $(«#») возвращал пустое множество, а .find(«#») — ошибку.

Новый метод для выделения строк

Новый метод jQuery.escapeSelector() позволяет вам выделить любую строку или символ, которые имеют определенное значение в CSS-селекторах.

XYZ school, Москва, до 250 000 ₽

Например, если элемент на странице имеет id “abc.xyz”, то он не может быть выбран методом $(«abc.xyz») , т.к. селектор будет распознан как элемент с id “abc”, и классом “xyz”. Однако он может быть выбран новой функцией $(«#» + $.escapeSelector(«abc.xyz»)) .

Аргументы jQuery.when()

В jQuery 3 при добавлении методом then() аргумента к $.when() , он возвращает его promise-версию. Это расширяет возможности для ввода, включая промисы Bluebird и промисы ES6, что дает возможность писать более сложные асинхронные обратные вызовы.

Хеш в URL

Теперь функция jQuery.ajax() больше не удаляет хеш в URL, если он присутствует. Однако, вам придется удалять его вручную до отправки запроса, если сервер на другом конце соединения не может обработать URL с хешем.

Deferred-объекты совместимы с JS-промисами

Deferred’ы — это объекты которые можно соединять цепными обратными вызовами. jQuery 3 сделал их совместимыми с новыми стандартами Promises/A+. Также есть ключевое изменение в функции .then() . Любое исключение, выбрасываемое в рамках обратного вызова .then() , теперь конвертируется в отклоняемое значение. Непромисообразные значения, возвращенные обработчиком отклонений, меняются на выполняемые значения.

Новый стандарт поведения Promises/A+:

Новый API для анимации

jQuery 3 использует API requestAnimationFrame() для работы с анимацией. Этот API воспроизводит анимации плавнее и быстрее, затрачивая меньше вычислительного времени. Он используется лишь в тех браузерах, которые поддерживают этот API. Для старых же браузеров, таких как Internet Explorer 9, jQuery использует старый API в качестве запасного варианта.

jQuery 3 работает в строгом режиме

Большинство браузеров, поддерживающих jQuery3, используют строгий режим (strict mode). Новая версия была создана с учётом это. Несмотря на то, что jQuery 3 была написана в строгом режиме, вашему коду не обязательно использовать его. Следовательно, вам не нужно переписывать уже существующий код, если вы желаете перейти на новую версию. Однако есть одно исключение: некоторые версии ASP.NET не совместимы из-за строгого режима.

Новая сигнатура методов get и post

jQuery получила новые сигнатуры сервисных функций $.get() и $.post() для единообразия с $.ajax() .

Оператор цикла for…of

jQuery 3 поддерживает оператор цикла for..of , который имеется в спецификации ECMAScript 6. Это позволяет вам запускать цикл по итерируемым объектам, таким как Map , Set , Array и т.д.

Оператор цикла for..of может быть использован для замены синтаксической конструкции $.each( ) . Предположим, что вы хотите применить имя к каждому вводимому элементу страницы.

Код на jQuery 2 выглядит так:

Но код на jQuery 3 будет иметь следующий вид:

Анимированные вкладки на CSS3 и HTML5

Вкладки очень распространенный элемент в веб-дизайне, и зачастую он очень полезен. Ведь вкладки позволяют красиво и, главное, компактно оформить текст или комментарии, а также многое другое. Итак, в этом уроке мы собираемся реализовать несколько простых CSS3 вкладок при помощи радиокнопок и псевдоэлемента :checked.

Пример разных видов переходов вкладок можно увидеть здесь:

Посмотреть примерСкачать

Возможно вам понравится прошлый урок, где мы также создавали красивые вкладки — Красивые анимированные вкладки на CSS.

HTML часть

Мы будем использовать элемент с разными классами, для переключения между вкладками. А в теге содержится название вкладки:

CSS часть

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

Вкладки будут похожи на элемент , но на самом деле мы будем нажимать на :

Так как не нужна нижняя часть тени для этого элемента, то мы используем псевдоэлемент :after с пустым значением свойства content:

Когда вкладка становиться активной, то у нее есть для этого свой стиль отображения. А также она становится поверх остальных. Делается это с помощью свойства z-index:

Итак, мы скрываем все остальные вкладки с помощью выставления opacity: 0. Мы не можем использовать свойство display: none, т.к. оно не поддерживает эффекты перехода:

Когда мы делаем вкладку активной, то выставляется значение opacity: 1, а также большой z-index:

Вывод

В этой статье мы создали вкладки на CSS3 и HTML5. Они красиво будут работать в современных браузерах. Разные виды переходов можно найти в примерах выше, а также скачать исходники и применять.

Успехов!

Еще материалы по этой теме

Отправить статью

Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

10 комментариев к записи

Добрый день, подскажите начинающему в данном примере .tabs input.tab-selector-1:checked

.content .content-1, что означает знак «

Здравствуйте, Артур. Тильда значит что будут выбраны все элементы с классами «.content .content-1», которые следуют за элементами с классами и псевдоселектором «.tabs input.tab-selector-1:checked».

Спасибо Юрий, за урок и за прояснение. Я немного на свой лад делал и вместо текста у меня формы на вкладках, по началу такая белеберда получилась, но сейчас разобрался вроде все ок.

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

Денис, придется тогда немного изменить CSS. Необходимо задавать background не для одного блока (сейчас белый фон задается для блока с классом «content»), в котором находятся все 4 вкладки, а для каждого отдельно в 106-й строке файла style.css.

Как сделать прямую ссылку на конкретную вкладку. Например, чтобы человек, нажав на ссылку, попал на 3 вкладку сразу? Якоря не работают ((

Николай, у активной вкладки есть атрибут checked. Его можно задавать динамически с помощью jQuery при нажатии на ссылку.

Цукерберг рекомендует:  C# - Как вывести математическую формулу в TetxBoxRichTextBox C#

Но как реализовать это? Попадение на вкладку с ссылки. Подскажите пожалуйста

Доброго времени суток! Возможно как-нибудь сделать во вкладках вложенные вкладки? Пробовал скопировать в одну из вкладок код секции с вкладками, но при нажатии на любую из вложенных вкладок они все пропадают.

Добрый день, Владимир!

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

Кроме этих вкладок, на сайте также есть следующие виды вкладок:

Вкладки для сайта с помощью CSS3

Вкладки стали весьма популярными в структуре сайта, они помогают экономить место на ресурсе и привлекать пользователей своей анимацией при смене закладок. В данном уроке мы рассмотрим процесс организации вкладок для компактного вывода содержания. Для создания таких вкладок и организации внешнего вида, будет использоваться техника CSS3, и подключенная библиота jQuery с репозитория Google, чтобы ускорить загрузку сайта. А сам функционал реализуется несколькими строками JavaScript кода. Такие вкладки будут отлично дополнять дизайн любого сайта..

Для начала мы рассмотрим простую разметку HTML. Атрибут title может показаться излишеством, но в нашем случае он будет использоваться в части jQuery.

Следует объяснить некоторое содержание:

#tabs –неупорядоченный список, который содержит навигацию закладок.

#content – контейнер для содержания каждой закладки.

Теперь рассмотрим стили CSS которые используются для демонстрации, все достаточно просто:

Последний шаг будет jQuery. Код достаточно прост, для наглядного описания некоторые строчки описаны:

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru

Статьи по теме CSS3

Я уже публиковал урок «Нестандартные Checkbox (RadioButton) без использования JavaScript» . Прекрасные кнопочки, но там используются картинки. В данном примере используется только CSS. Всё очень просто вы вставляете код в свой стиль и получаете стильные, а именно на мой взгляд, в современном стиле кнопки.

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

Библиотека анимационных эффектов перехода, основанная на анимации CSS.

С личного опыта могу сказать, что связь между управляющими сайтом и пользователями очень важна, ведь посетителей необходимо информировать о выполненных действиях, тем самым держа в курсе последних событий. На помощь нам придут временные уведомления, которые будут появляться при выполнении определенного действия пользователем, и исчезать через указанный промежуток времени. В данном уроке мы рассмотрим как создать стильные временные уведомления с помощью анимации css3.

Раскрутка в соцсетях

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

Хотите уникальный сайт? Ознакомьтесь с нашими ценами!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка. ПОРТФОЛИО

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Форма обратной связи

Все поля обязательны для заполнения!

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика — это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа — это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Как создать интерфейс с вкладками с помощью jquery и css3?

Это моя цель. Угловые вкладки с прозрачностью поверх другого. Как я могу построить это без использования jpg или png, но только css?

Это поможет вам, но я попробую сделать что-то через минуту!

Вот окончательный результат:

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

Должен ли он быть с CSS, или вы просто надеетесь не использовать растровые изображения? Например, вы можете использовать фоновое изображение SVG, которое, вероятно, будет меньшим размером файла, чем растровое изображение, и будет лучше масштабироваться. Вы можете использовать uri данных, если вас беспокоят запросы HTTP. Возможно, вы также можете использовать SVG или png в качестве пограничного изображения, если вы не хотите использовать фоновое изображение.

Как сделать вкладки-табы для сайта на jQuery

В сегодняшней статье давайте рассмотрим, как сделать простой вариант вкладок для сайта на jQuery. Данная реализация подойдет там, где необходимо установить простенькие табы, на дополнительных эффектах визуализации останавливаться не будем.

Начинаем, как всегда, со структуры HTML: кладем заготовку будущих табов в блок-обертку с >

Переходим к CSS стилям наших вкладок.

Тут главное указать для активного блока с контентом свойство display со значением block, а для активной вкладки — такой же стиль, как и при наведении.

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

Принцип работы скрипта заключается в отслеживании клика по вкладке (div с классом tab). При совершении данного события в переменные tabs и cont будут сохраняться выборки всех блоков вкладок и всех блоков с контентом. После чего у всех элементов удаляется класс active (сделано это для удобства, чтобы не отслеживать наличие данного класса у элементов по отдельности) и добавляется той вкладке, по которой кликнули. Вместе с ней дописывается класс active соответствующему ей блоку с контентом.

Google Play вкладки на jQuery и CSS3

Здравствуйте, уважаемые читатели XoZbloga! Вкладки на странице позволяют намного лучше структурировать информацию. Поэтому создание вкладок достаточно широко используемый прием для дополнительной навигации. А если еще и достойно реализовать такой элемент юзабилити, то это вдвойне хорошо. Есть так много способов, так много вариантов создания вкладок, но цель создания у всех одна: щелкнуть на вкладку и увидеть ее содержимое без обновления страницы.

В этом уроке Вы узнаете, как можно создать вкладки с дизайном от Google Play.

Разметка HTML

Как всегда, начнем с описания гипертекстовой разметки создаваемых вкладок. Сами вкладки организованы в виде маркированного списка. Атрибут ссылки name используется для определения якоря внутри страницы, и совпадает с id связных блоков контента.

ul id = «tabs» >
li > a href = «#» name = «#tab1» > Первая / a > / li >
li > a href = «#» name = «#tab2» > Вторая / a > / li >
li > a href = «#» name = «#tab3» > Третья / a > / li >
li > a href = «#» name = «#tab4» > Последняя / a > / li >
/ ul >

div id = «content» >
div id = «tab1» > . / div >
div id = «tab2» > . / div >
div id = «tab3» > . / div >
div id = «tab4» > . / div >
/ div >

Стили CSS

Цель как всегда одна, сделать красиво, желательно без использования изображений и с минимальным кодом CSS насколько это возможно.

#tabs <
overflow : hidden ;
width : 100% ;
margin : 0 ;
padding : 0 ;
list-style : none ;
>

#tabs li <
float : left ;
margin : 0 -15px 0 0 ;
>

Здесь все просто прописываем основные правила для вкладок, ширина на 100% но стоить заметить что в демо версии ширина тела страницы всего 700px . Так что куда бы вкладки не были встроены, они будут подгоняться под всю ширину. Отображаться будет только область внутри элемента, остальное будет скрыто — свойство overflow: hidden;

Также можно видеть, что для элемента списка отступ справа отрицательный: margin: 0 -15px 0 0; Это сделано для того, чтобы вкладки как-бы накладывались друг на друга.

Вот стили непосредственно для ссылки внутри элемента списка. Благодаря text-transform: uppercase; все символы текста становятся прописными. Также хочется отметить, что высота элемента нулевая, однако граница снизу border-bottom равна 30px и межстрочный интервал line-height 30px, что позволяется тексту оставаться по центру. А уже граница справа border-right в 30px и с прозрачным фоном создает эффект среза. Также для всего элемента ссылки задается легкая прозрачность фона в 30%.

Чтобы стало более понятней, как создается эффект среза я подготовил картинку. Где блок div с похожими стилями, что и у нас только правая граница синяя, и есть высота и ширина в 100px .

Цукерберг рекомендует:  Свой блог за 5 минут в Microsoft Azure

Ну а здесь описываются стили, применяемые при наведении на вкладку и для активной вкладки #current .

#tabs a : hover ,
#tabs a : focus <
border-bottom-color : #2ac7e1 ;
opacity : 1 ;
filter : alpha ( opacity = 100 ) ;
>

#tabs a : focus <
outline : 0 ;
>

#tabs #current <
z-index : 3 ;
border-bottom-color : #3d3d3d ;
opacity : 1 ;
filter : alpha ( opacity = 100 ) ;
>

В следующем фрагменте стилей, исписываются правила для оформления области с текстом.

Вот так вот выглядят создаваемые вкладки.

jQuery

Теперь пару слов о jQuery коде. Есть возможность получить доступ к вкладкам непосредственно по URL, например, my-site/index.html#tab2 . То есть можно использовать 2 варианта с проверкой по адресной строке и без.

1 вариант (простой):

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

( function ( ) <
$ ( «#content div» ) . hide ( ) ; // Первоначально скрываем весь контент
$ ( «#tabs li:first a» ) . attr ( «id» , «current» ) ; // Активной делается первая вкладка
$ ( «#content div:first» ) . fadeIn ( ) ; // И показывается текст первой вкладки
$ ( «#tabs a» ) . on ( «click» , function ( e ) < // клик на вкладку
e. preventDefault ( ) ;

if ( $ ( this ) . attr ( «id» ) == «current» ) < //проверяем активна ли сейчас вкладка
return // если да, то ничего не происходит
>
else <
resetTabs ( ) ;
$ ( this ) . attr ( «id» , «current» ) ; // иначе делаем вкладку активной
$ ( $ ( this ) . attr ( ‘name’ ) ) . fadeIn ( ) ; // показываем контент активной вкладки
>
> ) ;

2 вариант (с проверкой URL):

Теперь после обновления страницы вкладка остается активной. Если использовать данный вариант, то ссылки вкладок надо заменить с # на index.html#tab1 или #tab1 . То есть разметка вкладок будет выглядеть так.

В этом фрагменте мы объявляем переменные, которые понадобятся дальше. А также функцию resetTabs() .

function resetTabs ( ) <
$ ( «#content div» ) . hide ( ) ; //Скрываем весь текст
$ ( «#tabs a» ) . attr ( «id» , «» ) ; //Сбрасываем id’s
>

var myUrl = window. location . href ; //в переменную записывается URL
var myUrlTab = myUrl. substring ( myUrl. indexOf ( «#» ) ) ; //из предыдущей переменной вытаскиваем якорь. для локальной машины my-site/index.html#tab2, myUrlTab = #tab2
var myUrlTabName = myUrlTab. substring ( 0 , 4 ) ; // myUrlTabName = #tab

А теперь основной код. Происходит тоже самое, что и в предыдущем варианте. отслеживаем клик придаем стиль активной вкладке, но также и проверяем URL после обновления страницы. То есть после обновления страницы откроется вкладка выбранная ранее, а не первая как в предыдущем примере. Код похожий только убирается e.preventDefault(); .

( function ( ) <
$ ( «#content div» ) . hide ( ) ; // Первоначально скрываем весь контент
$ ( «#tabs li:first a» ) . attr ( «id» , «current» ) ; // Активной делается первая вкладка
$ ( «#content div:first» ) . fadeIn ( ) ; // И показывается текст первой вкладки
$ ( «#tabs a» ) . on ( «click» , function ( e ) < // клик на вкладку

if ( $ ( this ) . attr ( «id» ) == «current» ) < //проверяем активна ли сейчас вкладка
return // если да, то ничего не происходит
>
else <
resetTabs ( ) ;
$ ( this ) . attr ( «id» , «current» ) ; // иначе делаем вкладку активной
$ ( $ ( this ) . attr ( ‘name’ ) ) . fadeIn ( ) ; // показываем контент активной вкладки
>
> ) ;
// проверка по URL
for ( i = 1 ; i $ ( «#tabs li» ) . length ; i ++ ) <

if ( myUrlTab == myUrlTabName + i ) <
resetTabs ( ) ;
$ ( «a[name='» + myUrlTab + «‘]» ) . attr ( «id» , «current» ) ; // Активируем вкладку по URL
$ ( myUrlTab ) . fadeIn ( ) ; // показываем контент
>
>
> ) ( )

Заключение

На этом все. Данные вкладки работают во всех браузерах, кроме IE 6 и ниже ��

17 нововведений jQuery 3 и советы по их использованию

Прошло уже более 10 лет с того момента, как библиотека jQuery начала своё широкое распространение по Интернету, и она до сих пор пользуется большой популярностью. В июле 2015 года jQuery анонсировала альфа-версию 3.0 — крупнейшее обновление за долгие годы.

Текущая версия 3.1.1, вышедшая в сентябре 2020 года, исправила множество багов, добавила новые методы и удалила избыточные, также изменив поведение некоторых функций. Давайте разберемся в нововведениях, которые были представлены в этой версии.

Методы скрытия и отображения

Для лучшей совместимости с адаптивным дизайном jQuery3 была усовершенствована, получив возможность скрытия нескольких элементов. Тесты показали, что новая версия справляется с этим на 2% быстрее, чем предыдущая.

Кроме того, методы .hide() , .show() и .toggle() будут ориентироваться на inline-стили. Эта особенность позволит корректно работать с функцией display , что позволит правилам CSS изменяться динамически в зависимости от таких событий, как изменение разрешения окна и ориентации экрана.

Методы wrapAll() и unwrap()

В jQuery 2 метод .wrapAll() при передаче функции в качестве аргумента вёл себя точно так же, как и метод .wrap() . Это изменили — теперь .wrapAll(function) вызывает функцию и использует строковое представление результата как обёртку коллекции.

В jQuery 3 также появился опциональный параметр-селектор метода unwrap() . Это нововведение позволяет передавать методу строковое значение, которое содержит выражение селектора.

Полосы прокрутки высоты и ширины теперь учитываются

В jQuery 2 вызов $(window).width() возвращал ширину содержимого, не учитывая полосы прокрутки, добавленные браузером, когда содержимое превышало размеры элемента. Для того, чтобы предоставить возможность измерения, эквивалентную CSS-медиазапросу, $(window).outerWidth() и $(window).outerHeight() теперь возвращают ширину и длину с учётом полос прокрутки. Это эквивалентно свойству DOM window.innerWidth .

Поведение data()

В jQuery 3 поведение метода data() было немного изменено, чтобы он подходил под спецификации Dataset API. Теперь он переводит имена свойств в верблюжью нотацию.

При использовании старой версии вы получите следующий результат:

В jQuery 3 вы получите:

Как вы заметили, название параметра переведено в верблюжью нотацию, в то время как в старых версиях параметр оставался в нижнем регистре с дефисом.

Поддержка SVG при операциях с классами

jQuery до сих пор не полностью поддерживает SVG, но методы наподобие .hasClass() или .addClass() , которые управляют CSS-классами, могут быть использованы для работы с SVG. Вы можете изменять или находить классы в SVG, затем применять стили к классам, используя CSS.

Фильтры скрытия и отображения

jQuery 3 изменяет смысл фильтров :visible и :hidden . Он воспринимает элементы как :visible , если у них есть хоть какие-то окна макета, включая те, которые имеют нулевую ширину и длину. Для примера, элемент br и строковые элементы без содержимого будут выделены фильтром :visible .

Если вы имеете следующую HTML-страницу:

и запускаете выражение:

то в jQuery 2, вы получите результат 0 , а в третьей версии результат будет равен 3 .

jQuery больше не округляет параметры высоты и ширины

Теперь jQuery возвращает дробные значения .width() и .height() вместо целого числа, если браузер поддерживает это. Для пользователей, которым нужна субпиксельная точность (например, при дизайне веб-сайтов), это может быть полезным.

Например, у вас есть 3 элемента с шириной, равной одной третьей (33.333333%), внутри контейнера шириной 100px:

Если вы запросите ширину дочернего элемента:

то получите значение 33.33333 , что будет являться более точным результатом.

Дополнительный уровень защиты

Дополнительный уровень был добавлен для защиты от межсайтового скриптинга (XSS). Разработчикам теперь нужно уточнять dataType:”script” в опциях методов $.ajax() и $.get() . Это предотвращает возможность атак. Предоставляем пример кода:

Неприменимый хеш

jQuery 3 возвращает синтаксическую ошибку, если строка селектора состоит лишь из хеша, вроде jQuery(«#») или .find(«#») . В старой версии $(«#») возвращал пустое множество, а .find(«#») — ошибку.

Новый метод для выделения строк

Новый метод jQuery.escapeSelector() позволяет вам выделить любую строку или символ, которые имеют определенное значение в CSS-селекторах.

XYZ school, Москва, до 250 000 ₽

Например, если элемент на странице имеет id “abc.xyz”, то он не может быть выбран методом $(«abc.xyz») , т.к. селектор будет распознан как элемент с id “abc”, и классом “xyz”. Однако он может быть выбран новой функцией $(«#» + $.escapeSelector(«abc.xyz»)) .

Аргументы jQuery.when()

В jQuery 3 при добавлении методом then() аргумента к $.when() , он возвращает его promise-версию. Это расширяет возможности для ввода, включая промисы Bluebird и промисы ES6, что дает возможность писать более сложные асинхронные обратные вызовы.

Хеш в URL

Теперь функция jQuery.ajax() больше не удаляет хеш в URL, если он присутствует. Однако, вам придется удалять его вручную до отправки запроса, если сервер на другом конце соединения не может обработать URL с хешем.

Deferred-объекты совместимы с JS-промисами

Deferred’ы — это объекты которые можно соединять цепными обратными вызовами. jQuery 3 сделал их совместимыми с новыми стандартами Promises/A+. Также есть ключевое изменение в функции .then() . Любое исключение, выбрасываемое в рамках обратного вызова .then() , теперь конвертируется в отклоняемое значение. Непромисообразные значения, возвращенные обработчиком отклонений, меняются на выполняемые значения.

Новый стандарт поведения Promises/A+:

Новый API для анимации

jQuery 3 использует API requestAnimationFrame() для работы с анимацией. Этот API воспроизводит анимации плавнее и быстрее, затрачивая меньше вычислительного времени. Он используется лишь в тех браузерах, которые поддерживают этот API. Для старых же браузеров, таких как Internet Explorer 9, jQuery использует старый API в качестве запасного варианта.

jQuery 3 работает в строгом режиме

Большинство браузеров, поддерживающих jQuery3, используют строгий режим (strict mode). Новая версия была создана с учётом это. Несмотря на то, что jQuery 3 была написана в строгом режиме, вашему коду не обязательно использовать его. Следовательно, вам не нужно переписывать уже существующий код, если вы желаете перейти на новую версию. Однако есть одно исключение: некоторые версии ASP.NET не совместимы из-за строгого режима.

Новая сигнатура методов get и post

jQuery получила новые сигнатуры сервисных функций $.get() и $.post() для единообразия с $.ajax() .

Оператор цикла for…of

jQuery 3 поддерживает оператор цикла for..of , который имеется в спецификации ECMAScript 6. Это позволяет вам запускать цикл по итерируемым объектам, таким как Map , Set , Array и т.д.

Оператор цикла for..of может быть использован для замены синтаксической конструкции $.each( ) . Предположим, что вы хотите применить имя к каждому вводимому элементу страницы.

Код на jQuery 2 выглядит так:

Но код на jQuery 3 будет иметь следующий вид:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих