نحوه ایجاد یک جدول قیمت گذاری با یک سوئیچ تعویض CSS ماهانه/سالانه

سوئیچ های دکمه جابجایی یک روند UX کلاسیک است که اغلب در بخش های مختلف یک وب سایت یا یک برنامه مشاهده می شود. در یک آموزش قبلی، نحوه ساخت یک جزء سوئیچ فقط CSS برای یک چک لیست ساده را مورد بحث قرار دادیم. امروز، سوئیچ دیگری ایجاد خواهیم کرد: یک سوئیچ ماهانه/سالانه که به بازدیدکنندگان اجازه می‌دهد برنامه‌های قیمت‌گذاری متفاوتی را طی کنند.

جزء سوئیچ ما

در اینجا نسخه ی نمایشی جزء ما است:

نمایشگاهی از سوئیچ‌های تغییر قیمت

قبل از شروع ساخت سوئیچ خود، اجازه دهید ابتدا از چند صفحه قیمت گذاری که از سوئیچ های تغییر استفاده می کنند الهام بگیریم.

1. با نشانه گذاری HTML شروع کنید

ما ظرفی را تعریف می کنیم که شامل دو لفاف تو در تو باشد: لفاف سوئیچ و لفاف میز.

در داخل لفاف سوئیچ، دو دکمه رادیویی و به دنبال آن برچسب‌های مرتبط با آنها و یک دکمه خالی قرار می‌دهیم span عنصر با کلاس از highlighter. به طور پیش فرض، اولین دکمه رادیویی بررسی می شود.

داخل لفاف میز، میز را قرار می دهیم.

در اینجا نشانه گذاری شروع است:

<div class="container">
  <div class="switch-wrapper">
    <input id="monthly" type="radio" name="switch" checked>
    <input id="yearly" type="radio" name="switch">
    <label for="monthly">Monthly</label>
    <label for="yearly">Yearly</label>
    <span class="highlighter"></span>
  </div>
  <div class="table-wrapper">
    <table>...</table>
  </div>
</div>

بیشتر محتویات جدول و استایل از a می آید آموزش قبلی جایی که ما یک جدول قیمت گذاری با یک هدر چسبنده ساختیم. از این آموزش، من تمام سبک های غیر ضروری را پاک کرده ام. من همچنین چند تغییر سبک برای مطابقت با هدف این نمایش انجام داده ام. به هر حال، سبک جدول در درجه دوم اهمیت قرار دارد.

برای این تمرین، ما فقط عناوین جدول را به روز می کنیم، بنابراین .info عنصر بسته به طرح شامل دو مقدار متفاوت خواهد بود. به طور پیش فرض، فقط مبلغ ماهانه قابل مشاهده خواهد بود.

در اینجا نشانه گذاری عنوان یک جدول به نظر می رسد:

...
<th>
  <div class="heading">Starter</div>
  <div class="info">
    <div class="price monthly">
      <div class="amount">$10 <span>month</span></div>
    </div>
    <div class="price yearly hide">
      <div class="amount">$7 <span>month</span></div>
      <div class="billing-msg">billed annually</div>
    </div>
    <button type="button">Get started</button>
  </div>
</th>
...

2. Switch Styles را تعریف کنید

مشابه مولفه سوئیچ قبلی ما، از “تکنیک هک چک باکس CSS” نیز برای تغییر سوئیچ استفاده خواهیم کرد.

در حال حاضر پیاده سازی های زیادی از این روش در سایت وجود دارد کتابخانه Tuts+، بنابراین من به جزئیات بیشتر نمی پردازم. توصیه می کنم تمام این مثال ها را مرور کنید تا با نحوه شبیه سازی جاوا اسکریپت آشنا شوید کلیک هر چند رویداد در عناصر CSS.

در اینجا (به طور خلاصه) مراحلی وجود دارد که دنبال خواهیم کرد:

در اینجا تمام سبک های متصل به مؤلفه ما آمده است:

/*CUSTOM VARIABLES HERE*/

.switch-wrapper {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid lightgrey;
  margin-bottom: 40px;
  border-radius: 30px;
  background: var(--white);
}

.switch-wrapper [type="radio"] {
  position: absolute;
  left: -9999px;
}

.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"],
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"] {
  color: var(--white);
}

.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"]:hover,
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"]:hover {
  background: transparent;
}

.switch-wrapper
  [type="radio"]:checked#monthly
  + label[for="yearly"]
  ~ .highlighter {
  transform: none;
}

.switch-wrapper
  [type="radio"]:checked#yearly
  + label[for="monthly"]
  ~ .highlighter {
  transform: translateX(100%);
}

.switch-wrapper label {
  font-size: 16px;
  z-index: 1;
  min-width: 100px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 30px;
  transition: color 0.25s ease-in-out;
}

.switch-wrapper label:hover {
  background: var(--lightgray);
}

.switch-wrapper .highlighter {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 30px;
  background: var(--darkgreen);
  transition: transform 0.25s ease-in-out;
}

3. اطلاعات جدول را با جاوا اسکریپت تغییر دهید

تا این مرحله، سوئیچ را با موفقیت ایجاد کردیم. اما، یک چیز اضافی وجود دارد که باید انجام دهیم. بسته به انتخاب فعال، قیمت جدول مربوطه را نشان دهید.

برای این کار از کمی جاوا اسکریپت استفاده می کنیم. به طور خاص، هر بار که کاربر سوئیچ را تغییر می دهد، کارهای زیر را انجام خواهیم داد:

• شناسه دکمه رادیویی انتخاب شده را بگیرید.
• مخفی کردن تمام عناصر جدول با کلاس of .price.
• فقط نشان دادن .price عناصری که کلاس آنها با این شناسه مطابقت دارد.

در اینجا کد جاوا اسکریپت مورد نیاز است:

const tableWrapper = document.querySelector(".table-wrapper");
const switchInputs = document.querySelectorAll(".switch-wrapper input");
const prices = tableWrapper.querySelectorAll(".price");
const toggleClass = "hide";

for (const switchInput of switchInputs) {
  switchInput.addEventListener("input", function () {
    for (const price of prices) {
      price.classList.add(toggleClass);
    }
    const activePrices = tableWrapper.querySelectorAll(
      `.price.${switchInput.id}`
    );
    for (const activePrice of activePrices) {
      activePrice.classList.remove(toggleClass);
    }
  });
}

و کلاس CSS مرتبط:

table .hide {
  display: none;
}

نتیجه

با تشکر برای دنبال کردن یک آموزش دیگر، مردمی! امیدوارم این تمرین به شما دانش کافی برای ایجاد یک سوئیچ تعویض فقط CSS برای فیلتر کردن بخش هایی از وب سایت یا برنامه خود داده باشد. در اینجا نحوه استفاده از چنین سوئیچ را به عنوان بخشی از صفحه قیمت گذاری توضیح دادیم – مورد دیگر ممکن است تغییر نمای طرح بندی (نماهای شبکه و لیست) باشد.

البته، اگر نیاز به ایجاد سوئیچ هایی با عملکرد پیچیده دارید، احتمالاً جاوا اسکریپت رویکرد بهتری خواهد بود.

در اینجا یادآور چیزی است که ما ساختیم:

مثل همیشه، خیلی ممنون که خواندید!