Как оформить аккордеон в jQuery UI

  1. HTML-разметка
  2. JQuery UI Аккордеон
  3. Основные стили
  4. Стилизация Аккордеона
  5. Последние детали
  6. Internet Explorer
  7. Заключительные слова

В этом посте мы собираемся создать что-то реальное и функциональное, и мы собираемся использовать структурный селектор , размер коробки и CSS3 градиенты из наших предыдущих уроков, чтобы создать собственную тему для JQuery UI Аккордеон и точить наши Навыки CSS ,

Рекомендуемое чтение: Как сохранить разметку кода CSS3 тонкой

HTML-разметка

Для начала давайте поместим следующий div с id аккордеоном, который будет содержать весь контент аккордеона.

<div id = "accordion"> <! - содержание -> </ div>

У нас будет пять случайных разделов веб-тем для контента аккордеона, таких как HTML5, CSS3 Sass, Dreamweaver и JQuery , Это всего лишь пример; Вы действительно можете поместить что-нибудь для контента, если только вы измените разметку соответствующим образом. Вот разметка на основе этих 5 тем.

<h3> <a href="#"> HTML5 </a> </ h3> <div> <p> <strong> HTML5 </ strong> - это язык разметки для структурирования и представления контента для World Wide Web, и является основной технологией Интернета, первоначально предложенной Opera Software. Это пятая версия стандарта HTML (созданная в 1990 году и стандартизированная как HTML4 на 1997 год), и по состоянию на июль 2012 года она все еще находится в стадии разработки. </ p> </ div> <h3> <a href="#"> CSS3 </a> </ h3> <div> <p> В отличие от CSS 2, который представляет собой большую отдельную спецификацию, определяющую различные функции, CSS 3 делится на несколько отдельных документов, называемых «модулями». Каждый модуль добавляет новые возможности или расширяет возможности, определенные в CSS 2, за счет сохранения обратной совместимости. <em> <strong> Источник: </ strong> <a href="http://en.wikipedia.org/wiki/Css"> WikiPedia.org </a> </ em> </ p> </ div > <h3> <a href="#"> Sass </a> </ h3> <div> <p> <strong> Sass </ strong> снова делает CSS забавным. Sass - это расширение CSS3, добавляющее вложенные правила, переменные, миксины, наследование селектора и многое другое. Он переведен в хорошо отформатированный стандартный CSS с использованием инструмента командной строки или плагина веб-фреймворка. </ p> </ div> <h3> <a href="#"> Dreamweaver </a> </ h3> <div> <p> <strong> Adobe Dreamweaver </ strong> (ранее Macromedia Dreamweaver) является Запатентованное приложение для веб-разработки, изначально созданное Macromedia. Сейчас она разработана компанией Adobe Systems, которая приобрела Macromedia в 2005 году. </ P> </ div> <h3> <a href="#"> jQuery </a> </ h3> <div> <p> <strong > jQuery </ strong> - это кросс-браузерная библиотека JavaScript, разработанная для упрощения клиентского сценария HTML. Он был выпущен в январе 2006 года на BarCamp NYC Джоном Резигом. JQuery, используемая более чем на 55% из 10 000 самых посещаемых веб-сайтов, сегодня является самой популярной библиотекой JavaScript. </ p> </ div>

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

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

JQuery UI Аккордеон

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

<script type = "text / javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </ script> <script type = "text / javascript "src =" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js "> </ script>

Затем поместите следующий скрипт после них.

$ (function () {$ ("# accordion"). accordion ();});

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

Тем не менее, наш аккордеон по-прежнему выглядит просто белым, поэтому давайте добавим к нему несколько стилей.

Тем не менее, наш аккордеон по-прежнему выглядит просто белым, поэтому давайте добавим к нему несколько стилей

Основные стили

Во-первых, нам нужно сбросить все стили элементов по умолчанию, чтобы сохранить стиль согласованность в разных браузерах с Normalize.css , а затем мы добавляем цвет фона в тег HTML. Мы также удаляем подчеркивание по умолчанию из ссылки, а также контур, когда он находится в активном состоянии или в состоянии фокусировки.

html {height: 100%; фон: # e3e3e0; } {текстовое оформление: нет; }: focus,: active {outline: 0; }

Дальнейшее чтение: Просмотр приоритетов стилей

Мы также применим модель рамки для определения размера рамки во всех элементах следующим образом:

* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; размер коробки: бордюр; }

Дальнейшее чтение: CSS Box-Sizing

Стилизация Аккордеона

В этом разделе мы начнем оформление аккордеонных разделов. Во-первых, нам нужно указать контейнер для аккордеона для 300px и отцентрировать его.

#accordion {width: 300px; маржа: 50px авто; }

Содержимое аккордеона будет слегка белого цвета, в то время как текст внутри него будет темно-серого цвета # 777, тогда мы также уменьшим размер шрифта до 10pt.

#accordion .ui-accordion-content {ширина: 100%; цвет фона: # f3f3f3; цвет: # 777; размер шрифта: 10pt; высота строки: 16pt; }

Содержимое обернуто тегом абзаца, этот тег по умолчанию имеет верхнее и нижнее поле , поэтому здесь мы удалим поля и заменим их отступом 20px.

В случае, если вы не заключили содержимое в тег <p> или не располагали другими элементами, а не выбрали специально для p, мы выберем любые прямые элементы из .ui-accordion-content, как это.

#accordion .ui-accordion-content> * {margin: 0; отступы: 20 пикселей; }

Также, если у нас есть ссылки на контент, мы изменим цвет на темно-серый # 777.

#accordion .ui-accordion-content a {color: # 777; }

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

#accordion .ui-accordion-header {background-color: #ccc; поле: 0px; }

Нам также нужно добавить несколько стилей в тег привязки внутри заголовка. Мы сделаем текст на теге привязки белым , сделаем отступ текста на 10 пикселей и, наконец, уменьшим размер шрифта до 12pt.

#accordion .ui-accordion-header a {color: #fff; высота строки: 42px; дисплей: блок; размер шрифта: 12pt; ширина: 100%; текстовый отступ: 10px; }

Мы дадим каждому заголовку свой цвет. Это можно сделать, выбрав каждый заголовок с структурные селекторы и что касается первого заголовка, мы можем выбрать его, используя: first-of-type;

#accordion .ui-accordion-header: first-of-type {background-color: # fa9300; background-image: -moz-linear-Gradient (вверху, # fa9300 0%, # dc621e 100%); / * FF3.6 + * / background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # fa9300), остановка цвета (100%, # dc621e)); / * Chrome, Safari4 + * / background-image: -webkit-linear-Gradient (вверху, # fa9300 0%, # dc621e 100%); / * Chrome10 +, Safari5.1 + * / background-image: -o-linear-Gradient (вверху, # fa9300 0%, # dc621e 100%); / * Opera 11.10+ * / background-image: -ms-linear-Gradient (вверху, # fa9300 0%, # dc621e 100%); / * IE10 + * / background-image: линейный градиент (внизу, # fa9300 0%, # dc621e 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# fa9300', endColorstr = '# dc621e', GradientType = 0); / * IE6-9 * /}

Для заголовков со второго по четвертый мы можем выбрать их с помощью селектора: nth-of-type (n) следующим образом;

#accordion .ui-accordion-header: nth-of-type (2) {background-color: # 389abe; background-image: -moz-linear-Gradient (вверху, # 389abe 0%, # 2a7b99 100%); / * FF3.6 + * / background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # 389abe), остановка цвета (100%, # 2a7b99)); / * Chrome, Safari4 + * / background-image: -webkit-linear-Gradient (вверху, # 389abe 0%, # 2a7b99 100%); / * Chrome10 +, Safari5.1 + * / background-image: -o-linear-Gradient (вверху, # 389abe 0%, # 2a7b99 100%); / * Opera 11.10+ * / background-image: -ms-linear-Gradient (вверху, # 389abe 0%, # 2a7b99 100%); / * IE10 + * / background-image: линейный градиент (снизу, # 389abe 0%, # 2a7b99 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 389abe', endColorstr = '# 2a7b99', GradientType = 0); / * IE6-9 * /} #accordion .ui-accordion-header: nth-of-type (3) {background-color: # f87aa0; / * Старые браузеры * / background-image: -moz-linear-Gradient (вверху, # f87aa0 0%, # c86585 100%); / * FF3.6 + * / background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # f87aa0), остановка цвета (100%, # c86585)); / * Chrome, Safari4 + * / background-image: -webkit-linear-Gradient (вверху, # f87aa0 0%, # c86585 100%); / * Chrome10 +, Safari5.1 + * / background-image: -o-linear-Gradient (вверху, # f87aa0 0%, # c86585 100%); / * Opera 11.10+ * / background-image: -ms-linear-Gradient (вверху, # f87aa0 0%, # c86585 100%); / * IE10 + * / background-image: линейный градиент (снизу, # f87aa0 0%, # c86585 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# f87aa0', endColorstr = '# c86585', GradientType = 0); / * IE6-9 * /} #accordion .ui-accordion-header: nth-of-type (4) {background-color: # a8b700; background-image: -moz-linear-Gradient (вверху, # a8b700 0%, # 82922a 100%); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # a8b700), остановка цвета (100%, # 82922a)); / * Chrome, Safari4 + * / background-image: -webkit-linear-Gradient (вверху, # a8b700 0%, # 82922a 100%); фоновое изображение: -o-линейный градиент (вверху, # a8b700 0%, # 82922a 100%); background-image: -ms-linear-Gradient (вверху, # a8b700 0%, # 82922a 100%); background-image: линейный градиент (снизу, # a8b700 0%, # 82922a 100%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# a8b700', endColorstr = '# 82922a', GradientType = 0); / * IE6-9 * /}

… Для пятого или, в данном случае, последнего заголовка, мы можем выбрать его, используя: last-of-type;

#accordion .ui-accordion-header: last-of-type {background-color: # b3bec4; background-image: -moz-linear-Gradient (вверху, # b3bec4 0%, # 95a0a4 100%); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # b3bec4), остановка цвета (100%, # 95a0a4)); background-image: -webkit-linear-Gradient (вверху, # b3bec4 0%, # 95a0a4 100%); фоновое изображение: -o-линейный градиент (вверху, # b3bec4 0%, # 95a0a4 100%); background-image: -ms-linear-градиент (вверху, # b3bec4 0%, # 95a0a4 100%); background-image: линейный градиент (снизу, # b3bec4 0%, # 95a0a4 100%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# b3bec4', endColorstr = '# 95a0a4', GradientType = 0); / * IE6-9 * /}

Хорошо, теперь давайте посмотрим на результат на некоторое время.

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

Последние детали

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

#accordion .ui-accordion-header a {text-shadow: 1px 1px 0px rgba (0,0,0,0.2); тень текста: 1px 1px 0px rgba (0,0,0,0.2); border-right: 1px solid rgba (0, 0, 0, .2); Граница слева: 1px solid rgba (0, 0, 0, .2); border-bottom: 1px solid rgba (0, 0, 0, .2); border-top: 1px solid rgba (250, 250, 250, .2); }

В приведенном выше фрагменте мы добавили border-right, border-left, border-bottom для одного пикселя в цветном режиме rgba.

Цвет границ на самом деле черный, но так как мы уменьшили интенсивность до 20%, цвет стал прозрачным и создал своего рода более темную версию фона.

Цвет границ на самом деле черный, но так как мы уменьшили интенсивность до 20%, цвет стал прозрачным и создал своего рода более темную версию фона

Мы также сделали то же самое для border-top, но мы применяем белый цвет вместо черного, чтобы создать эффект подсветки.

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

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

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

#accordion .ui-accordion-content {box-shadow: врезка 0px -1px 0px 0px rgba (0, 0, 0, .4), врезка 0px 1px 1px 0px rgba (0, 0, 0, .2); } #accordion .ui-accordion-content: last-of-type {box-shadow: врезка 0px 1px 1px 0px rgba (0, 0, 0, .2), врезка 0px 0 0px 0px rgba (0, 0, 0, 0,5); }

Internet Explorer

Не в последнюю очередь, давайте не будем забывать нашего друга Internet Explorer. Селектор: nth-of-type и его вид в настоящее время не поддерживаются в IE6 - IE8, поэтому, если вы хотите улучшить совместимость в IE, вы можете использовать Mootools а также Selectivizr.js ,

Поместите следующие две строки перед пользовательским интерфейсом jQuery и jQuery:

<! - [if lte IE 8]> <script type = "text / javascript" src = "js / mootools.js"> </ script> <script type = "text / javascript" src = "js / selectivizr. js "> </ script> <! [endif] ->

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

Заключительные слова

Мы прошли все этапы. Как вы можете видеть, каждый новый селектор, такой как: nth-of-type, и новые свойства, такие как box-sizing в CSS3, имеют много преимуществ и решают многие проблемы в веб-дизайне.

В этом уроке мы использовали: nth-of-type для выбора заголовка каждого аккордеона без добавления дополнительных классов или использования классов, сгенерированных из пользовательского интерфейса jQuery, мы также использовали box-size, чтобы у нас не было проблем с вычислением правильной ширины элемент. И поскольку мы использовали CSS3-градиенты для заголовков, у нас меньше HTTP-запросов.

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