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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

loda-button : پلاگین jQuery برای قرار دادن آیکون بصورت چرخشی

4 1407 ۲۴ اردیبهشت ۹۴

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

loda-button

با استفاده از این پلاگین ساده میتونین کاری کنید که وقتی روی دکمه ای کلیک یا ... میکنید ، آیکون اون به حرکت در بیاد و یک افکت انیمیشنی براش اتفاق بیوفته و مثلا بعد از 2 ثانیه هم به حالت اولش برگرده. میتونین بعنوان حالتی loading مانند از اون استفاده کنید.

میبینید که 4 تا لینک وجود داره که با کلیک بر روی هر کدوم از اونا رنگش تغییر میکنه و اون آیکون نیز شروع به چرخش میکنه و بعد از 2 ثانیه متوقف میشه.

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

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

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

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

اولین کاری که باید بکنید اینه که لینک مورد نظرتون رو قرار بدین و کلاس loda-btn رو بهش نسبت بدین. بصورت زیر :

حالا باید درون این لینک ، یک span بزاریم برای آیکون مورد نظر و همچنین یک متن بزاریم :

ما در این مطلب از icomoon برای آیکونها استفاده کردیم. شما میتونین از هر ابزار دیگه ای مانند fontawesome هم استفاده کنید. شما میتونین فایل icomoon.css رو باز کنید ، در اونجا اسامی تمامی آیکونها وجود داره. در اینجا هم میتونین ببینید.

باید به تمامی span ها کلاس loda-icon رو نسبت بدین :

باید نام کلاس آیکونی که انتخاب کردین نیز اضافه کنید. من آیکون icon-mail-3 مد نظرم هست :

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

میبینید که لینکهارو انتخاب کردیم و بعد از اون متذ lodaButton رو براشون فراخوانی کردیم و بعد از اون از رویداد کلیک استفاده شده. مرحله بعد اینه که کاری کنیم که با کلیک کردن روی لینک به آدرس اون لینک نره. برای اینکار :

حالا بصورت زیر انجام میدیم :

میبینید که ابتدا this رو در متغیر self ذخیره کردیم و با استفاده از lodaButton و ویژگی start اونو راه انداختیم. حالا هر زمانی که روی لینک کلیک بشه آیکون میچرخه ولی متوقف نمیشه. برای اینکه متوقف بشه یک setTimeout قرار دادیم و با استفاده از ویژگی stop اونو بعد از 2 ثانیه متوقف کردیم.

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

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

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

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

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

  • ‏‏
    شاهد(۲ تیر ۱۳۹۴)

    پلاگین خیلی خوبی بود.

    تشکر

  • ‏‏
    قالب وردپرس(۲ آبان ۱۳۹۴)

    تشکر از شما اموش برای پوسته وردپرس هم بگذارید و این خیلی مفیدی بود از این جور اموزش ها بیشتر بگذارید

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram