Адаптивные таблицы цен на 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 для удаления тонкого градиента с правой стороны тела таблицы калькуляции (только для мобильной версии), который мы добавили, чтобы указать, что в конце прокрутки есть больше контента.

 

Вот и всё!

---