tipso : پلاگین jQuery برای قرار دادن تولتیپ زیبا بصورت واکنشگرا

- visibility ٢ mode_comment

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

 

tipso

با استفاده از این پلاگین میتونین برای کلمه ها یا متون خودتون تولتیپ زیبایی قرار بدین و رابط کاربری سایتتون رو ارتقاء بدین. برای ظاهر و مخفی شدن میتونین از انیمیشنهای زیبایی استفاده کنید. این ابزار کم حجم هست و همچنین از پشتیبانی خوبی از مرورگرهای مختلف داره. این ابزار برای اعمال انیمیشنها از animate.css استفاده میکنه.

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

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

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

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

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

اولین کاری که باید بکنیم اینه که متنهای خودمون رو قرار بدیم. من یک p قرار میدم و اون کلمه ای که میخوام تولتیپ براش قرار بدم رو درون یک span میزارم :

میبینید که برای span در بالا id = sample1 قرار دادم. یک استایل ساده برای تگ p مینویسم :

حالا باید متن مورد نظری که میخوایم درون تولتیپ بزاریم رو ، درون خاصیت data-tipso بزاریم :

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

میبینید که در ابتدا span مورد نظر رو انتخاب کردیم و بعد از اون متد tipso رو براش فراخوانی کردیم. همچنین مقدار ویژگی useTitle رو برابر با false گذاشتیم ، با اینکار همون مقداری که در خاصیت data-tipso نوشتیم در تولتیپ نمایش داده میشه.

این پلاگین ویژگی های زیادی داره که من در زیر تعدادی از اونا رو خدمتتون عرض میکنم :

  • speed : مدت زمان ظاهر و مخفی شدن بر حسب میلی ثانیه
  • position : محل قرارگیری تولتیپ را مشخص میکنیم که میتونه top و bottom و left و right باشه
  • width : میتونین عرض رو مشخص کنید
  • animationIn : میتونین نوع افکتی که در هنگام ظاهر شدن تولتیپ اجرا میشه رو مشخص کنید.
  • animationOut : میتونین نوع افکتی که در هنگام مخفی شدن تولتیپ اجرا میشه رو مشخص کنید.

برای مشخص کردن مقادیر animationIn و animationOut باید به سایت Animate.css برید و افکتهای مورد نظرتون رو انتخاب کرده و نامشونو در بالا قرار بدین.

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

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

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

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

عالی بود

موفق باشید

نیاز به لاگین

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