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

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



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

responsive-tables : پلاگین jQuery برای ساخت جدولهای Responsive

0 1160 ۲۱ فروردین ۹۴

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

 

responsive-tables

با استفاده از این پلاگین میتونین براحتی هر چه تمامتر جدولهای سایتتون رو واکنشگرا ( Responsive ) کنید و رابط کاربری سایتتون رو ارتقاء بدین.

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

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

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

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

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

در ابتدا باید جدول و سلولهای مورد نظرتون رو اضافه کنید. بصورت زیر :

بعد از اون کدهای CSS زیر رو مینویسیم تا ظاهر بهتری بخودش بگیره :

حالا باید به جدول خودتون کلاس responsive رو نسبت بدین :

حالا باید در تگ اسکریپت نهایی کدهای زیر رو قرار بدین :

میبینید که جدول مورد نظر با کلاس responsive رو انتخاب کردیم و متد responsoveTables رو برای اون فراخوانی کردیم.

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

  • data-max : با استفاده از این ویژگی میتونین بیشترین اندازه فونت رو مشخص کنید
  • data-min : با استفاده از این ویژگی میتونین کمترین اندازه فونت رو مشخص کنید

خود این پلاگین بصورت اتوماتیک فونت رو بین بازه ای که برای اون مشخص کردید ، تنظیم میکنه.

با استفاده از ویژگی data-height نیز میتونین این جدول رو تمام صفحه ( Full Screen ) کنید. بصورت زیر :

با استفاده از خاصیت data-width هم میتونین بر روی عرض این پلاگین مدیریت داشته باشین.

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram