ترفندهای حرفه ای و پیشرفته Front End (جلسه ۲) : Highlight کردن ردیف و ستون جدول – قسمت ۲

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

بسط دادن این ویژگی برای دستگاه‌های لمسی یا Touch

در این قسمت مقداری Javascript لازمه. کلاسهای کاذب هاور درون دستگاه‌های لمسی یا Touch بصورت نصفه نیمه کار میکنن. قدم اول اینه که المنتهامون رو focusable یا قابل focus شدن بکنیم. سلولهای جدول بصورت پیش فرض قابل focus شدن نیستن. برای اینکار قطعه کد Javascript زیر رو قرار میدیم:

if (screen.width < 500) {
  
  $("body").addClass("nohover");
  $("td, th")
    .attr("tabindex", "1")
    .on("touchstart", function() {
      $(this).focus();
    });
  
}

با استفاده از if اولی اومدیم و یک شرط ساده قرار دادیم که مثلا بگیم زمانی که عرض صفحه کمتر از ۵۰۰ پیکسل بود، این کارها رو انجام بده و با اون مثل یک دستگاه لمسی برخورد کن. بعد از اون هم با استفاده از مابقی کدها کاری کردیم که وقتی روی td یا th‌ها لمس یا tap انجام شد، بر روی اون focus بشه.

بعد از اون هم درون کدهای CSS، کلاس کاذب focus رو استایل دهی میکنیم و مشخص میکنیم که چه شرایطی برای اون اعمال بشه. مانند گذشته کدها رو قرار میدیم و از همون ترفند استفاده میکنیم:

td:focus::after,
th:focus::after { 
  content: '';  
  background-color: lightblue;
  position: absolute;  
  left: 0;
  height: 10000px;
  top: -5000px;
  width: 100%;
  z-index: -1;
}

td:focus::before {
  background-color: lightblue;
  content: '';  
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;  
  width: 10000px;
  z-index: -1;
}

همونطور که در بالا میبینید مقداری ترفند رو پیشرفته‌تر کردیم. برای ساختن نوار عمودی از کلاس کاذب after و برای ساختن نوار افقی از کلاس کاذب before استفاده کردیم. بهمین راحتی.

این هم برای دستگاه‌های لمسی و ...

حالا میخایم مقداری این حالت رو بهینه کنیم و اون رو بیشتر به واقعیت نزدیک کنیم. سلول بالا و سمت چپ خالی هست و قصد داریم زمانی که بر روی اون هاور شد، هیچ ردیف و ستونی پررنگ نشه. همچنین میخایم زمانی که بر روی th‌ها که درون thead قرار دارند هاور شد، فقط ستون مربوط به اونا پررنگ بشه و ردیف این اتفاق براش نیوفته. در انتها هم زمانی که بر روی سلولهای سمت چپ درون tbody هاور شد، فقط همون ردیف پررنگ بشه و ستون اتفاقی براش نیوفته. برای اینکار باید از شرطهای بیشتری در CSS استفاده کنیم و همه مرورگرها هم از اونا پشتیبانی نمیکنن. برای اینکار از کد CSS زیر استفاده میکنیم:

table {
  overflow: hidden;
}

td, th {
  padding: 10px;
  position: relative;
  outline: 0;
}

body:not(.nohover) tbody tr:hover {
  background-color: #ffa;
}

td:hover::after,
thead th:not(:empty):hover::after,
td:focus::after,
thead th:not(:empty):focus::after { 
  content: '';  
  height: 10000px;
  left: 0;
  position: absolute;  
  top: -5000px;
  width: 100%;
  z-index: -1;
}

td:hover::after,
th:hover::after {
  background-color: #ffa;
}

td:focus::after,
th:focus::after {
  background-color: lightblue;
}

/* Focus stuff for mobile */
td:focus::before,
tbody th:focus::before {
  background-color: lightblue;
  content: '';  
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;  
  width: 10000px;
  z-index: -1;
}

همونطور که میبینید از not و empty و ... استفاده شده است. کل فایل بصورت زیر میشه:




	table
	


	
۵۰kg ۵۵kg ۶۰kg ۶۵kg ۷۰kg
۱۶۰cm ۲۰ ۲۱ ۲۳ ۲۵ ۲۷
۱۶۵cm ۱۸ ۲۰ ۲۲ ۲۴ ۲۶
۱۷۰cm ۱۷ ۱۹ ۲۱ ۲۳ ۲۵
۱۷۵cm ۱۶ ۱۸ ۲۰ ۲۲ ۲۴

خروجی اون هم در مرورگر بصورت زیر خواهد بود:table row and column 3

دیدید که همه مواردی که مد نظر داشتیم رو عملی کردیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0