Автор

Адаптивные таблицы цен на jQuery

Адаптивные таблицы цен на jQuery


Простые гибкие таблицы цен, в 3 разных стилях и с оживленной анимацией при переключении на разные планы.

 

ДЕМО
ИСХОДНИКИ

 

Готовая таблица цен является одним из тех ресурсов, которые имеются в нашем наборе инструментов. Они не являются особо сложными с точки зрения дизайна и удобства пользователей, но они представляют собой ключевой раздел нашей веб-страницы: именно там потенциальный клиент принимает меры.

Мы собрали легко настраиваемую таблицу ценообразования в 3 разных стилях. Кроме того, мы включили наш популярный фильтр контента Bouncy как переход при переключении с одного плана на другой.

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

 

Создание структуры

HTML структурирован в 2 блока: div.cd-pricing-switcher, содержащий фильтр, и ul.cd-pricing-list, содержащий таблицы ценообразования. Внутри каждого элемента списка .cd-pricing-list мы вложили второй элемент ul (тот, который вращается), содержащий таблицы цен в качестве элементов списка.

Каждая таблица ценообразования составлена из заголовка .cd-pricing (содержащего название и цену плана), тела .cd-pricing (содержащего функции плана) и .cd-price-footer (содержащего кнопку действия).

<div class="cd-pricing-container">
<div class="cd-pricing-switcher">
<p class="fieldset">
<input type="radio" name="duration" value="monthly" id="monthly" checked>
<label for="monthly">Monthly</label>
<input type="radio" name="duration" value="yearly" id="yearly">
<label for="yearly">Yearly</label>
<span class="cd-switch"></span>
</p>
</div> <!-- .cd-pricing-switcher -->

<ul class="cd-pricing-list">
<li>
<ul class="cd-pricing-wrapper">
<li data-type="monthly" class="is-visible">
<header class="cd-pricing-header">
<h2>Basic</h2>
<div class="cd-price">
<span class="cd-currency">$</span>
<span class="cd-value">30</span>
<span class="cd-duration">mo</span>
</div>
</header> <!-- .cd-pricing-header -->

<div class="cd-pricing-body">
<ul class="cd-pricing-features">
<li><em>256MB</em> Memory</li>
<!-- other features here -->
</ul>
</div> <!-- .cd-pricing-body -->

<footer class="cd-pricing-footer">
<a class="cd-select" href="https://s-sd.ru">Select</a>
</footer> <!-- .cd-pricing-footer -->
</li>

<li data-type="yearly" class="is-hidden">
<!-- pricing table content here -->
</li>
</ul> <!-- .cd-pricing-wrapper -->
</li>

<li class="cd-popular">
<ul class="cd-pricing-wrapper">
<li data-type="monthly" class="is-visible">
<!-- pricing table content here -->
</li>

<li data-type="yearly" class="is-hidden">
<!-- pricing table content here -->
</li>
</ul>
</li> <!-- .cd-pricing-wrapper -->

<li>
<ul class="cd-pricing-wrapper">
<li data-type="monthly" class="is-visible">
<!-- pricing table content here -->
</li>

<li data-type="yearly" class="is-hidden">
<!-- pricing table content here -->
</li>
</ul> <!-- .cd-pricing-wrapper -->
</li>
</ul> <!-- .cd-pricing-list -->
</div> <!-- .cd-pricing-container -->

 

Добавление стиля

На небольших устройствах .cd-pricing-footer находится в позиции: абсолютная и помещается над заголовочным файлом .cd-price, чтобы покрыть его (мы присвоили одинаковый размер обоим элементам). Кнопка действия имеет display: block и height: 100%, так что он имеет такое же измерение нижнего колонтитула таблицы (события pointer-events: none назначенный заголовку .cd-pricing-header, обеспечивает возможность нажатия кнопки). В .cd-pricing-body есть overflow-x: auto, чтобы скрыть часть элемента ul.cd-pricing-features - ширина которого может быть выше.

.cd-pricing-header {
  height: 80px;
  pointer-events: none;
}
 
.cd-pricing-body {
  overflow-x: auto;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch;
}
 
.cd-pricing-footer {
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
}
 
.cd-select {
  display: block;
  height: 100%;
  /* hide button text on mobile */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
}

На настольных устройствах (ширина окна просмотра более 1170 пикселей) css довольно прост (вы можете найти дополнительные комментарии в scss / css файле для сложных деталей).

Одно важное замечание: мы создали 3 класса для настройки таблиц цен (все классы должны быть применены к элементу .cd-pricing-container):

  1. Cd-full-width - установить ширину: 100% к контейнеру .cd-pricing, с max-width: none (по умолчанию мы устанавливаем ширину: 90% и max-width: 1170px);
  2. Cd-tables-have-margin - добавить правое поле для таблиц цен;
  3. Cd-secondary-theme - сочетание различных цветовых тем;

В нашей демонстрации мы создали 3 разных стиля таблиц: первый - по умолчанию, второй - добавление к контейнеру .cd-pricing как классов .cd-full-width, так и .cd-second-theme, а последнее добавление Класс .cd-tables-have-margin.

Одно важное замечание: стили, связанные с этими 3-мя классами, отличаются только на настольных устройствах.

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

 

Обработка событий

Мы использовали jQuery для удаления тонкого градиента с правой стороны тела таблицы калькуляции (только для мобильной версии), который мы добавили, чтобы указать, что в конце прокрутки есть больше контента.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

Адаптивные таблицы цен на jQuery

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


Адаптивные таблицы цен на jQuery

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


Адаптивные таблицы цен на jQuery

Что такое параллакс уже наверное известно всем и нет смысла повторяться в каждой публикации! Ковыряясь в инете нашел этот вариант (там был только HTML, а все остальное: картинки, стили и скрипты были на сайте разработчика). Объединив всё вместе, я сделал архив для скачивания и хочу представить очередной, в моем блоге, вариант этого плагина ImageScroll на jQuery.


Адаптивные таблицы цен на jQuery

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


87 Публикаций

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

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


Перейти в Блог

О КОМПАНИИ

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

Close

Целовальников Сергей


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

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

Close