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

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



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

قرار دادن لودینگ زیبا با استایلهای متفاوت برای دکمه

2 3067 ۲۸ مهر ۹۳

در این مطلب میخوام یک مورد کاربردی رو بهتون آموزش بدم که هم جالبه و هم زیبا و در مورد loading هست.

خب در اول به صفحه Github مربوط به این موضوع برید و فایلاشو دانلود کنید. در اینجا هم میتونین دمو رو ببینید.

خب ما فقط به 3 مورد از فایلهای دانلود شده نیاز داریم. من اونارو دانلود کردم و شما میتونین این فایلهارو از آخر همین آموزش دانلود کنید.

فایلهایی که ازشون استفاده میکنیم :

  • spin.min.js
  • ladda.min.js
  • ladda.min.css

پشتیبانی از مرورگرها :

  • Chrome
  • Firefox
  • Safari 
  • IE9 و بالاتر

 

خب برای شروع یک پوشه درست میکنیم و فایلهای گفته شده رو درونش قرار میدیم. یه فایل جدید دیگه بنام index.html درست میکنیم و کدهای زیر رو درونش قرار میدیم :

خب همونطور که میبینید ، فایل CSS رو در قسمت head و فایلهای Javascript رو قبل از تگ <body/> قرار میدیم و در انتها هم یک تگ باز و بسته script قرار میدیم تا بتونیم از فایلهای Javascript استفاده کنیم و کدهامون رو درونش قرار بدیم.

خب میریم سراغ استایل دکمه ها. در ابتدا باید یک دکمه ایجاد کنیم و درون اون هم یک Span قرار بدیم ، بصورت زیر:

همونطور که میبینید هم Button و هم span یک سری خصوصیت دارند که استایلهارو مدیریت میکنند. در این قسمت در مورد خصوصیتها توضیح میدم.

در ابتدا برای دکمه باید کلاس ladda-button و برای span هم باید کلاس ladda-lable قرار بدین.

حالا برای button خصوصیتهایی وجود داره.

خصوصیت data-style :

این خصوصیت مقادیر زیر رو دریافت میکنه و هر کدام استایل متفاوتی داره. میتونین هر کدوم رو امتحان کنید و نتیجه رو ببینید.

  • expand-left

  • expand-right

  • expand-up

  • expand-down

  • contract

  • contract-overlay

  • zoom-in

  • zoom-out

  • slide-left

  • slide-right

  • slide-up

  • slide-down

خصوصیت data-color :

این خصوصیت باعث میشه که رنگ دکمه رو تغییر بدین و مقادیر زیر رو دریافت میکنه :

  • green : سبز
  • red : قرمز
  • blue : آبی
  • purple : بنفش
  • mint : نعنائی

خصوصیت data-size :

این خصوصیت باعث میشه که اندازه دکمه رو تغییر بدین و مقادیر زیر رو دریافت میکنه :

  • xs : بسیار کوچک
  • s : کوچک
  • l : بزرگ
  • xl : بسیار بزرگ

مقدار پیش فرض این خصوصیت متوسط هست ، یعنی Medium.

خصوصیت data-spinner-size :

با استفاده از این خصوصیت میتونید اندازه Spin رو تغییر بدین. مقدار پیش فرض اندازه Spin بصورت اتوماتیک و متناسب با ارتفاع دکمه تغییر میکنه.

خصوصیت data-spinner-color :

با استفاده از این خصوصیت میتونید ، رنگ spin رو تغییر بدین.

 

میتونین هم زمان از همه خصوصیتها استفاده کنید و هم میتونید از هیچکدوم استفاده نکنید. اگر از هیچ کدوم استفاده نکنید ، مقادیر پیش فرض اعمال میشه.

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

برای اینکار باید بین همون دو تا تگ script کدهاتون رو قرار بدین.

در ابتدا باید به button خودتون یک کلاس یا ID ، اضافه کنید. برای مثال من به دکمه کلاس sample رو میدم ، بصورت زیر :

و با استفاده از Javascript اون رو دریافت میکنیم و در یک متغیر قرار میدیم و به نوعی یک Instance یا نمونه میسازیم :

از این به بعد میتونیم موارد زیر رو بر روی متغیر sample انجام بدیم :

  • sample.start(); : با استفاده از این کد ، spin نمایش داده میشه و شروع به چرخیدن میکنه.
  • sample.stop(); :  با استفاده از این کد ، دکمه به حالت اولیش بر میگرده.
  • sample.progress(0.5); : با استفاده از این کد ، برای حالاتی که به صورت Progress یا خط پیشرفت هستن ، میتونین یک مقدار قرار دهید. مثلا ما در اینجا 0.5 گذاشتیم ، که به معنای اونه که 50 درصد پیشرفت کرده.
  • sample.toggle(); : اگر دکمه در حالت start باشه ، متوقف میشه و اگر متوقف باشه ، start میشه.
  • sample.isLoading(); : این کد باعث میشه که اگر sample در حالت start باشه ، true و اگر متوقف باشه ، false رو برگردونه.
  • sample.stopAll(); : تمام دکمه هایی که در صفحه حالت start دارن رو به حالت اولیه بر میگردونه و اونارو stop میکنه .
  • sample.remove(); : با استفاده از این کد ، نمونه sample رو پاک میکنیم تا دیگه نشه از اون استفاده کرد.

خب اینم بگم که این ابزار با Jquery هم به خوبی سازگاری داره و برای خوندن مطالب بیشتر میتونین به اینجا برین.

حالا فرض کنید میخواید وقتی روی دکمه کلیک شد ، start بشه :

بهمین ترتیب میتونین مشخص کنید که طبق چه رویدادی ، چه اتفاقی برای دکمه بیوفته.

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

به همین راحتی. اگر خودتون بیشتر باهاش کار کنید ، بیشتر دستتون راه میوفته.

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

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

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

  • ‏‏
    علیرضا(۳۰ مهر ۱۳۹۳)

    سلام
    لینک دمو Forbidden 403 !

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram