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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 225 ۱۳ مهر ۹۵

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

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

در این جلسه میخایم جدولی رو با هم دیگه بسازیم که با استفاده از CSS کاری کنیم که وقتی بر روی اون هاور میشه، ردیف و ستونی که در حال حاضر ماوس بر روی اون قرار داده بصورت پررنگ یا Highlight در بیاد. شاید انجام دادنش یخورده سخت بنظر بیاد و یا اینکه اول فکرا به سمت Javascript منحرف میشه. اما در اینجا و در این ترفند به شما روش انجام این کار با استفاده از CSS خالص گفته میشه و به سادگی و راحتی میتونین از اون استفاده کنید.

همونطور که میدونید و به احتمال زیاد از اون خیلی استفاده کردید، پررنگ کردن ردیف هاور شده جدول خیلی آسونه و به راحتی میتونین از کد CSS زیر استفاده کنید:

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

ترفندی که در اینجا بکار میبریم اینه که اولا از کلاسهای Pseudo یا کاذب استفاده کنیم. این کلاسها رو برای td یا سلولها قرار میدیم و ارتفاع اون رو خیلی خیلی زیاد در نظر میگیریم تا کل ارتفاع جدول رو در بر بگیره. بعد شما با استفاده از hidden قرار دادن ویژگی overflow برای جدول، کاری میکنید که چیزایی که از جدول بیرون میزنه نمایش داده نشه. حالا اگر کد رو ببینید بهتر متوجه خواهید شد. کد HTML زیر رو در نظر بگیرید:

همونطور که دیدید یک جدول قرار داده شده خروجی اون بصورت زیر هست. با استفاده از css میایم و همون Highlight کردن فقط ردیف ها رو اعمال میکنیم:table row and column

حالا ترفند مورد نظر رو اعمال میکنیم. کد CSS اون بصورت زیر هست:

میبینید که در ابتدا برای table ویژگی overflow رو برابر با hidden قرار دادیم تا چیزهایی که از جدول بیرون زده میشه نمایش داده نشن. بعد از اون همون کد ساده رو برای پررنگ کردن فقط ردیف ها قرار دادیم. همه سلولها چه از نوع td و th رو بصورت relative قرار دادیم تا المنتهای درون اون رو بشه بصورت absolute در آورد. حالا نوبت به استفاده از کلاسهای کاذب میرسه و گفتیم که هر زمان بر روی یکی از سلولها هاور شد، یک کلاس کاذب بعد از اون بساز و یک سری ویژگی رو بهش نسبت بده. اول اینکه هیچ محتوا یا content نداره. absolute و رنگ اون هم ffa هست. عرض اون برابر با عرض پدرش یا همون سلولی که روش هاور شده هست و به سمت چپ میچسبه و ارتفاع اون هم  10000 پیکسل قرار داده شده. با استفاده از ویژگی top هم کاری کردیم که نصف این ارتفاع در بالا و نصف دیگر در پایین نقطه هاور شده قرار بگیره. ویژگی z-index رو برابر با 1- قرار دادیم تا به زیر متن بره و اون رو نپوشونه. با همه این تفاسیر خروجی بصورت زیر میشه:table row and column 2

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

تا اینجا کل کدهای HTML و CSS بصورت زیر هست:

 

در جلسه بعد با موارد بیشتری در این زمینه آشنا میشید و میتونین از اونا بهره ببرید.

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

موفق باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram