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

- visibility ٠ mode_comment

در این مطلب میخوام یک پلاگین 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 رو براش فراخوانی کنید. بصورت زیر :

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

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

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

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

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

نیاز به لاگین

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