• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 252 ۱۴ مهر ۹۵

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

بسط دادن این ویژگی برای دستگاه های لمسی یا 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

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

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram