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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!
4 3764 ۱۶ تیر ۹۳ محمد اسفندیاری

با سلام خدمت همه دوستان سون لرنی عزیز

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

همونطور که خودتون میدونید بعضی جاها باید از یک تصویر استفاده کنیم که نشون دهنده حالت انتظار و loading باشه ، که به کاربر بفهمونه درخواستش در حال انجام شدنه و باید مدت کمی منتظر بمونه تا کارش بطور کامل انجام بشه. خب حالا با استفاده از این امکان که در این سایت قرار داده شده دیگه لازم نیس از هیچ تصویری استفاده کنیم و نیازی هم به jQuery  نداریم. تمام کار با کدنویسی انجام شده و با تنظیماتی که وجود داره میتونیم شکلک loading مورد نظر خودمونو بسازیم و در سایت خودمون از اون استفاده کنیم. مرورگرهای زیر از این امکان پشتیبانی می کنند :

  • Chrome
  • +Safari 3.2
  • +Firefox 3.5
  • IE 6,7,8,9
  • +Opera 10.6
  • (+Mobile Safari (iOS 3.1
  • +Android 2.3

 خب دوستانی که انگلیسیشون نسبتا خوب باشه با رفتن به سایت مربوطه Spin.JS به راحتی میتونن همه جزئیاتشو بفهمن.در ابتدای این سایت یک demo وجود داره که میشه نحوه عملکرد هر خاصیت رو عینا دید. با این وجود من بیشتر توضیح میدم.برای شروع ما می آییم و یک DIV با عرض و طول صفر میسازیم و ID آن را برابر foo قرار میدهیم.

 

حال از سایت معرفی شده فایل مربوطه را دانلود میکنیم و آن را به انتهای کدهایمان و قبل از تگ بسته </body>  اضافه میکنیم.

نکته : من خودم همیشه کدهای Javascript رو در انتهای کدهای دیگر قرار میدم.این کار باعث میشه که ابتدا سایر کدها و المنت ها و ساختار DOM لود شوند و بعد از آن کدهای Javascript انجام شوند ، با این کار از بعضی ارورهای احتمالی جلوگیری میکنیم.(البته راههای دیگری هم برای اینکار وجود دارد ولی راحتترین روش همینی هست که گفتم.)

پیشنهاد میکنم فایل spin.min.js رو دانلود کنید چون حجمش کمتره و سایتمون سریعتر لود میشه.حال به شکل زیر عمل میکنیم :

 

 

بعد از الحاق کردن این فایل به سندمون باید تنظیمات مدنظر خودمونو انجام بدیم که من کمی در مورد اونا براتون توضیح میدهم :

  • Lines : تعداد خطوط مدنظر در شکل
  • Length : کم و زیاد کردن طول خطوط
  • Width : ضخامت هر خط
  • Radius : شعاع دایره درونی
  • Corners : گرد کردن گوشه هر کدام از خطوط که عددی بین 0 و 1 میباشد
  • Rotate : چرخاندن شکلکمان
  • Direction : تعیین کردن جهت چرخش شکلک ، که دو عدد 1 و -1 را قبول میکند. 1 به معنای چرخیدن به صورت ساعتگرد و -1 به معنای پادساعتگرد (خلاف جهت گردش عقربه های ساعت) میباشد.
  • Color : مشخص کردن رنگ برای شکلک
  • Speed : مشخص کننده سرعت چرخش میباشد که بر حسب دور بر ثانیه میباشد. مثلا اگر بنویسیم 2 ، به معنای آن است که در یک ثانیه دو دور خواهد زد.
  • Shadow : اگر آن را برابر false قرار دهیم ، سایه نخواهد داشت و اگر برابر با true باشد سایه دار خواهد شد.
  • Top و left : این دو خاصیت موقعیت شکلک را نسبت به عنصر پدر مشخص میکنند.

در خط 32 اومدیم و اشاره گری از div خودمون رو در متغیر target ذخیره کردیم.

در خط 33 اومدیم و تنظیمات و خصوصیات رو با استفاده از متد spin() به div خودمون نسبت دادیم.

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

امیدوارم خوشتون اومده باشه ، اگه کمی و کاستی بود ببخشید و اگر سوالی یا انتقادی بود در قسمت نظرات مطرح کنید.

موفق باشید.

یا علی

 

اهداف و مزایای استفاده از این ابزار :

  • استفاده آسان و راحت
  • عدم استفاده از تصویر و CSS
  • بدون نیاز به jQuery
  • مستقل از Resolution
  • پشتیبانی از طیف وسیعی از مرورگرها

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

  • ‏‏
    digitalarena(۳۱ تیر ۱۳۹۳)

    از مطالب بسیار خوبتون ممنون امیدوارم موفق باشید. بنده برای راه اندازی سایتم از سون لرن و مطالب آموزنده این سایت استفاده کردم.
    Http://digitalarena.ir

  • ‏‏
    صادق قنبری(۲۹ تیر ۱۳۹۴)

    سلام خسته نباشید
    حالا اگر بخواهیم روی یک دکمه از این استفاده کنیم و بد از لود خودش مخفی بشه چیکار کنیم

    • ‏‏
      محمد اسفندیاری(۳۱ تیر ۱۳۹۴)

      اگر فقط برای دکمه میخواید میتونین از ابزارهای دیگه ای که در نت وجود داره استفاده کنید
      فک کنم این http://h5bp.github.io/Effeckt.css/ بدردتون بخوره
      موفق باشید

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram