پیاده سازی Tab رسپانسیو با CSS و جاوااسکریپت

در این آموزش قصد داریم شیوه ساختن یک کامپوننت از نوع تب را با استفاده از سی‌اس‌اس و مقدار بسیار کمی از جاوااسکریپت ایجاد کنیم، البته باید گفت که به صورت کامل نیز می‌توان این مورد را با استفاده از سی‌اس‌اس پیاده‌سازی کنیم، اما هدف اصلی ما در این آموزش این است که از جاوااسکریپت در عمل نیز استفاده کنیم.

ابتدای کار بیایید نگاهی کامل به پروژه‌ای که قصد ایجاد آن را داریم بیاندازیم.

نکته: این آموزش روی موضوع دسترسی‌پذیری برای تب ها تمرکز ندارد، پس مطمئنا این موضوع نیز به قسمت دیگری از آموزش مرتبط می‌شود که در آینده در رابطه با آن صحبت خواهیم کرد. 

۱. HTML

برای شروع کار بیاید موارد لازم و پایه‌ای را برای HTML با همدیگر بررسی کنیم. ما یک کانتینر داریم که تب‌ها و لیست‌های موجود در آن‌ها قرار می‌گیرید. همچنین محتوای مربوط به هرکدام از تب‌ها نیز در آن واقع شده است. در این مثال برای اینکه هرکدام از تب‌ها مقدار منحصر به فردی را دریافت کنند نیاز است که به صورت سفارشی از data-index استفاده کنیم. به این دلیل که مقادیر مربوط به این خاصیت از صفر شروع می‌شود پس مقدار data-index = 0 را به تب اول خواهیم داد. یک تب با مقدار data-index = 1 برابر دومین تب ما در این مجموعه خواهد بود و به همین ترتیب.

در اینجا می‌توانید کدهای ‌HTML را مشاهده کنید:

<div class="tabs-container">
  <ul class="tabs">
    <li class="active">
      <a href="">Part 1</a>
    </li>
    <li>
      <a href="">Part 2</a>
    </li>
    <li>
      <a href="">Part 3</a>
    </li>
  </ul>
  <div class="tabs-content">
    <div class="tabs-panel active" data-index="0">
      <!-- content here -->
    </div>
    <div class="tabs-panel" data-index="1">
      <!-- content here -->
    </div>
    <div class="tabs-panel" data-index="2">
      <!-- content here -->
    </div>
  </div>
</div>

۲. CSS

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

استایل‌های ما به صورت زیر هستند:

.tabs-container {
  max-width: 1000px;
  margin: 50px auto;
  padding: 25px;
}
 
.tabs {
  display: flex;
}
 
.tabs li:not(:last-child) {
  margin-right: 7px;
}
 
.tabs li a {
  display: block;
  position: relative;
  top: 4px;
  padding: 10px 25px;
  border-radius: 2px 2px 0 0;
  background: white;
  opacity: 0.7;
  transition: all 0.1s ease-in-out;
}
 
.tabs li.active a,
.tabs li a:hover {
  opacity: 1;
  top: 0;
}
 
.tabs-content {
  position: relative;
  z-index: 2;
  padding: 25px;
  border-radius: 0 4px 4px 4px;
  background: white;
}
 
.tabs-panel {
  display: none;
}
 
.tabs-panel.active {
  display: block;
}

۳. جاوااسکریپت

بعد از HTML و CSS حال نیاز است که کدهای مربوط و مورد نیاز جاوااسکریپت را وارد کنیم. هربار که ما روی تب‌ها کلیک می‌کنیم کارهای زیر انجام می‌شود:

• حذف کلاس active از اولین تب.
• والد li کلیک شده را پیدا کرده و کلاس active را به آن می‌دهیم و ایندکس آن را برگشت می‌دهیم.
• حال المان را براساس ایندکس برگشتی انتخاب کرده و کلاس active را به آن می‌دهیم.

اینجا نتیجه کدهای جاوااسکریپت را مشاهده می‌کنید:

const tabLinks = document.querySelectorAll(".tabs a");
const tabPanels = document.querySelectorAll(".tabs-panel");
 
for(let el of tabLinks) {
  el.addEventListener("click", e => {
    e.preventDefault();
     
    document.querySelector('.tabs li.active').classList.remove("active");
    document.querySelector('.tabs-panel.active').classList.remove("active");
 
    const parentListItem = el.parentElement;
    parentList.classList.add("active");
    const index = [...parentListItem.parentElement.children].indexOf(parentListItem);
     
    const panel = [...tabPanels].filter(el => el.getAttribute("data-index") == index);
    panel[0].classList.add("active");
  });
}

۴. واکنشگرا نمودن

این کامپوننت ما تقریبا آماده کار است. آخرین کاری که نیاز است با کامپوننت انجام دهیم این است که آن را واکنشگرا کنیم. بنابراین برای مثال اگر حداکثر میزان Viewport ما برابر با ۶۰۰پیکسل است، این مورد باید جمع شود و حالتی مانند زیر به آن داده شود:

همانطور که ما از طراحی مبتنی بر دسکتاپ استفاده می‌کنیم، اینها قواعد سی‌اس‌اس‌ی هستند که باید دوباره به فایل Style داده شوند:

@media screen and (max-width: 600px) {
  .tabs {
    flex-direction: column;
  }
     
  .tabs li {
    width: 100%;
  }
     
  .tabs li:not(:last-child) {
    margin-right: 0;
  }
     
  .tabs li a {
    border-radius: 0;
    opacity: 1;
    top: 0;
  }
     
  .tabs li.active a::before {
    content: '•';
    padding-right: 5px;
  }
     
  .tabs-content {
    border-radius: 0;
  }
}

۵. پشتیبانی مرورگر

فایل پیشنمایش ما به خوبی در مرورگرها و دستگاه‌های مختلف نمایش داده می‌شود. در این آموزش از Babel برای کامپایل کردن کدهای ES6 به ES5 استفاده شده است.

در پایان

در این آموزش کوتاه، ما یک تب واکنشگرا را با استفاده از HTML، CSS و جاوااسکریپت ایجاد کردیم. یک بار دیگر باید بگویم که این مورد به خوبی و کاملی طراحی نشده پس طبیعی‌ست که مشکلات مربوط به دسترسی‌پذیری در آن وجود داشته باشد. اما اگر قصد دارید چنین ویژگی را نیز اضافه کنید، به نظر می‌رسد که راه‌ حل های بسیار خوبی وجود داشته باشد.

منبع