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

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



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

StickyTableHeaders : پلاگین jQuery برای نگه داشتن عنوان جدول در بالای صفحه

0 998 ۲۶ بهمن ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام StickyTableHeaders رو خدمت شما معرفی کنم و اونو آموزش بدم.

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

پیشنهاد میکنم جدولی که در این سایت هست رو مشاهده کنید تا ببینید که زمانی که عنوان نباشه ، چقد گیج کننده هست.

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

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و jquery.stickytableheaders.min.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

در ابتدا یک table قرار دادیم و در درون اون دو تگ thead و tbody قرار دادیم. درون تگ thead عنوان جدول و درون تگ tbody بدنه جدول رو قرار میدیم. درون tbody تعداد زیادی tr و td قرار دادم تا اسکرول ایجاد بشه و بتونین کاربرد این ابزار رو ببینید با استفاده از کد CSS زیر کاری کردم که tr هایی که زوج هستن ، رنگ Background متفاوتی داشته باشن :

الان تنها کاری که لازمه بکنیم ، اینه که به این پلایگن بگیم که روی این table اعمال بشه. برای اینکار باید ابتدا اون رو توسط jQuery انتخاب کنید و بعد از اون متد stickyTableHeaders رو براش فراخوانی کنید. بصورت زیر :

بهمین راحتی عنوان بهینه سازی میشه و میتونین در سایتتون از اون استفاده کنید.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

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

موفق باشید. یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram