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

- visibility ٠ mode_comment

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.