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

‏ 6 دقیقه

۱۴ مهر ۱۳۹۵

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

بسط دادن این ویژگی برای دستگاه‌های لمسی یا 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 اولی اومدیم و یک شرط ساده قرار دادیم که مثلا بگیم زمانی که عرض صفحه کمتر از 500 پیکسل بود، این کارها رو انجام بده و با اون مثل یک دستگاه لمسی برخورد کن. بعد از اون هم با استفاده از مابقی کدها کاری کردیم که وقتی روی 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 و ... استفاده شده است. کل فایل بصورت زیر میشه:

<!DOCTYPE html>
<html>
<head>
	<title>table</title>
	<style type="text/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;
		}
	</style>
</head>
<body>
	<table>
	    <thead>
	        <tr>
	            <th></th>
	            <th class="col">50kg</th>
	            <th class="col">55kg</th>
	            <th class="col">60kg</th>
	            <th class="col">65kg</th>
	            <th class="col">70kg</th>
	        </tr>
	    </thead>
	    <tbody>
	        <tr>
	            <th>160cm</th>
	            <td>20</td>
	            <td>21</td>
	            <td>23</td>
	            <td>25</td>
	            <td>27</td>
	        </tr>
	        <tr>
	            <th>165cm</th>
	            <td>18</td>
	            <td>20</td>
	            <td>22</td>
	            <td>24</td>
	            <td>26</td>
	        </tr>
	        <tr>
	            <th>170cm</th>
	            <td>17</td>
	            <td>19</td>
	            <td>21</td>
	            <td>23</td>
	            <td>25</td>
	        </tr>
	        <tr>
	            <th>175cm</th>
	            <td>16</td>
	            <td>18</td>
	            <td>20</td>
	            <td>22</td>
	            <td>24</td>
	        </tr>
	    </tbody>
	</table>
</body>
</html>

خروجی اون هم در مرورگر بصورت زیر خواهد بود:

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

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

موفق باشید

یا علی

Source

نویسنده

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

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

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

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

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

جلسات دوره

نیاز به لاگین

نظرات کاربران