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

- visibility ۴ mode_comment

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

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

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

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

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

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

تشکر

محمد اسفندیاری

خواهش میکنم موفق باشید

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

محمد اسفندیاری

اگه بشه حتما

موفق باشید

نیاز به لاگین

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