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

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



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

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

2 1461 ۳۰ فروردین ۹۴

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

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

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

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

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

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram