چه تکنولوژی می‌خواهید یاد بگیرید؟

نظرات و انتقادات خود را با ما در میان بگذارید.

آپدیت روزانه

بیش از 1000 پست آموزشی

نیازهای روز

نمایش پیغام با استفاده از پلاگین Toastr

برای نمایش پیغام در وب، پلاگین‌های زیادی موجود است که شما می‌توانید از آنها استفاده کنید، در ادامه این پست با نحوه استفاده از پلاگین محبوب Toastr آشنا خواهید شد. پلاگین Toastr جهت نمایش پیغام در وب می‌باشد که توسط Hans Fjällemark, John Papa & Tim Ferrell ایجاد شده است. در استفاده از این پلاگین افزدون کتابخانه jQuery الزامی است.

 

Toastr - Error message

نصب:

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

  1. فایل toastr.css و toastr.js را به صفحه ارجاع دهید.
  2. فراخوانی متد toastr.

مثال:

// Display an info toast with no title
toastr.info('Are you the 6 fingered man?')

نسخه قابل دسترس:

نسخه دیباگ:

  1. http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js
  2. http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css

نسخه فشرده:

  1. http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js
  2. http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css

بسته NuGet:

برای دانلود از طریق NuGet به آدرس زیر مراجعه کنید.

http://nuget.org/packages/toastr

یا می‌توان دستور زیر را در خط فرمان Package Manager Console استفاده کرد:

Install-Package toastr

نسخه فعلی:

در حال‌حاضر نسخه 2.1.2 در دسترس می‌باشد.

دیگر تنظیمات:

// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')

// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')

// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

// Immediately remove current toasts without using animation
toastr.remove()

// Remove current toasts using animation
toastr.clear()

// Override global options
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})

وضعیت نمایش دکمه بستن:

toastr.options.closeButton = true;

کد HTML دکمه بستن:

toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';

ایجا تغییرات موقع کلیک بر روی دکمه بستن:

toastr.options.closeMethod = 'fadeOut';
toastr.options.closeDuration = 300;
toastr.options.closeEasing = 'swing';

وضعیت نمایش پیغام جدید:

به صورت پیشفرض، موقعیت مکانی پیغام جدید بالا است.

toastr.options.newestOnTop = false;

نوار پیشرفت:

toastr.options.progressBar = true;

وقفه:

toastr.options.timeOut = 30; // How long the toast will display without user interaction
toastr.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it

انمیشن:

toastr.options.showMethod = 'slideDown';
toastr.options.hideMethod = 'slideUp';
toastr.options.closeMethod = 'slideUp';


...

امید نصری

0 نظر:

تعداد دیدگاه‌های کاربران : 0 دیدگاه
مهمان گرامی! برای ارسال نظر نیاز است وارد سایت شوید.


You must ورود to comment.