В этой серии статей мы покажем вам, как создавать динамические таблицы цен в веб-интерфейсе с помощью HTML, CSS и Javascripts. Мы собираемся показать вам несколько различных способов представления ваших таблиц цен на основе ваших продуктовых планов, макета веб-сайта, устройства целевой аудитории и т. д.
Третья таблица цен предназначена для того, чтобы пользователи могли переключать кнопки плана и подробностей, чтобы получить соответствующие цены.
Среда
:root{ --main-color: #4a4e69; }
HTML — Структура
Таблица цен построена в классе «pricing_container», который содержит класс «subscription_options» и «setting». Класс «subscription_options» содержит три столбца (класс «подписка col1», «подписка col2» и «подписка col3»). Каждый класс «подписка» включает пять строк и один ‹h2› для общей стоимости.
<div class = "pricing_container"> <div class="subscription_options"> <div class="subscription col1"> <div class="row1"> </div> <div class="row2"> </div> <div class="row3"> </div> <div class="row4"> </div> <div class="row5"> </div> <h2>...</h2> </div> <div class="subscription col2"> <div class="row1"> </div> <div class="row2"> </div> <div class="row3"> </div> <div class="row4"> </div> <div class="row5"> </div> <h2>...</h2> </div> <div class="subscription col3"> <div class="row1"> </div> <div class="row2"> </div> <div class="row3"> </div> <div class="row4"> </div> <div class="row5"> </div> <h2>...</h2> </div> </div> <div class="setting"> ... </div> </div>
CSS Styling — ценовой контейнер
.pricing_container{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; height: 120vh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
CSS Styling — варианты подписки
.subscription_options{ width: 100%; max-width: 600px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2px; }
CSS-стилизация — подписка
.subscription{ display: grid; width: 200px; grid-template-rows: repeat(6, 1fr); grid-template-columns: repeat(1, 1fr); border: solid 1px grey; border-radius: 5px; text-align: center; }
CSS-стили — Col1 / Col2 / Col3
Первый столбец — это заголовок, поэтому я хочу, чтобы некоторое пространство отделяло столбец 1 от других столбцов (подробности и описания параметров).
.subscription.col1 { justify-self: center; width: 100px; } .subscription .row1{ padding: 5px; align-self: center; text-align: center; } .subscription .row2 { padding: 5px; text-align: center; align-self: center; background-color: rgb(112, 175, 218); } .subscription .row3 { padding: 5px; text-align: start; } .subscription .row4 { padding: 5px; text-align: start; } .col1 .row4 { text-align: center; } .subscription .row5 { padding: 5px; text-align: start; border-bottom: solid 1px; }
JavaScript — переключение и управление
Давайте возьмем пример первого базового варианта для онлайн-POS, расположенного в col2 и row3. При нажатии на ввод соотношения внутренняя строка HTML заменяется на 990 долларов США для идентификатора «online_price».
<div class="row3" > <input type="radio" checked="checked" onclick="one_one();" name="online" id="one_one"> <h4>Basic</h4> </div> function one_one() { if (document.getElementById('one_one').checked === true) { document.getElementById('online_price').innerHTML = '$990'; } } function one_two() { if (document.getElementById('one_two').checked === true) { document.getElementById('online_price').innerHTML = '$1500'; } } function one_three() { if (document.getElementById('one_three').checked === true) { document.getElementById('online_price').innerHTML = '$2000'; } } function two_one() { if (document.getElementById('two_one').checked === true) { document.getElementById('retail_price').innerHTML = '$1580'; } } function two_two() { if (document.getElementById('two_two').checked === true) { document.getElementById('retail_price').innerHTML = '$2000'; } }
Спасибо! Наслаждайся этим!