ایجاد نوتیفیکیشن گذرا در سایت

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

alertify  یک پلاگین جاواسکریپت و مستقل از Jquery است که  هم میتوان دیالوگ و آلرت با آن نشان داد و هم نوتیفیکیشن . کافیست بصورت زیر آن را در سورس HTML خود قرار دهید .

alert

<script src="alertify.min.js"></script>
<!-- include the core styles -->
<link rel="stylesheet" href="alertify.core.css" />
<!-- include a theme, can be included into the core instead of 2 separate files -->
<link rel="stylesheet" href="alertify.default.css" id="toggleCSS" />

در عبارت بالا فایل JS و CSS را در صفحه قرار دادیم .

Selector دلخواهی ابتدا بصورت زیر تعریف میکنیم که از آن در حین کد نویسی جاواسکریپت استفاده کنیم و راحتتر باشد .

"use strict";
var $ = function (id) {
return document.getElementById(id);
},
reset = function () {
$("toggleCSS").href = "alertify.default.css";
alertify.set({
labels : {
ok : "ok",
cancel : "Cancel"
},
delay : 5000,
buttonReverse : false,
buttonFocus : "ok"
});
};

حال بجای اینکه از Alert یا prompt یا confirm که توسط خود مرورگر اجرا می شوند و  دستورات جاواسکریپتی هستند استفاده کنید ، کافیه یک .alertify قبلش بگذاریم بصورت زیر :

$("alert").onclick = function () {
reset();
alertify.alert("This is an alert dialog");
return false;
};

$("confirm").onclick = function () {
reset();
alertify.confirm("This is a confirm dialog", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
};

$("prompt").onclick = function () {
reset();
alertify.prompt("This is a prompt dialog", function (e, str) {
if (e) {
alertify.success("You've clicked OK and typed: " + str);
} else {
alertify.error("You've clicked Cancel");
}
}, "Default Value");
return false;
};

و برای ایجاد نوتیفیکیشن :

// standard notification
// setting the wait property to 0 will
// keep the log message until it's clicked
alertify.log("Notification", type, wait);

// success notification
// shorthand for alertify.log("Notification", "success");
alertify.success("Success notification");

// error notification
// shorthand for alertify.log("Notification", "error");
alertify.error("Error notification");

که هر کدوم یک رنگ خاصی دارند .

به این صورت میتوانید براحتی بجای alert های مزاحم مرورگر که کل صفحه را قفل میکند و دشمن کاربر پسند بودن سایت است از این نوتیفیکیشن های زیبا و کاربرپسند تر استفاده کنید . بدلیل اینکه سایت سازنده فقط پلاگین جاوااسکریپت را برای دانلود گذاشته و فایل HTML که مثال ها در آن قرار دارند را در سایتش قرار نداده ، من سورس HTML رو درست کردم که هم بصورت دمو و هم دانلود بتوانید از آن استفاده کنید .

دمو    دانلود 

 


11 پاسخ به “ایجاد نوتیفیکیشن گذرا در سایت”

  1. Kamran گفت:

    Salam, Code Jalebiye Ama Touye Morourgare IE Windows 8 Kar Nemikone Gouya

  2. Kamran گفت:

    Sry Tou Site Khodesh KaR Mikone Gouya Demo Shoma Moshkel Dare

  3. araz گفت:

    باسلام به دوستان
    سایت آزاد دانلود که به تازگی افتتاح شده است، منابع آموزشی فراوانی، ازجمله فیلم های آموزشی طراحی سایت، برنامه نویسی ، میکرو کنترلر ، PLC و بسیاری کتاب های آموزشی دیگر را به صورت رایگان جهت دانلود برای کاربران قرار داده است که فکر می کنم به کار بیشتر دوستان بیاید.
    http://www.azad-dl.com
    با تشکر

  4. وهاب گفت:

    دمو کار نوکنه

  5. امیر گفت:

    واقعا عالی بود، دستت درد نکنه!

  6. امیر گفت:

    سلام
    من نمیتونم فونت نوتیفیکشن تغییر بدم!
    لطفا راهنمایی کنید

  7. شفیعی گفت:

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

  8. شفیعی گفت:

    ضمنا صفحه دمو و دانلود باز نمیشه

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *