ايجاد نوتيفيکيشن گذرا در سايت
مارس 11, 2013 at 7:55 ب.ظ احد نعمتيHTML-CSS, Jquery, برنامه نويسي, طراحي سايت
2 نظر
بعضي مواقع براي اطلاع دادن کاربر از چيزي که هم اکنون طراحی وب سایت در سايتي که ميبيند اتفاق افتاده از نوتيفيکيشن هاي شناور استفاده مي شود ، مثلا وقتي در فيسبوک هستيد و ناگهان يک نفر پست شما را لايک ميزند يک مستطيل خاکستري پايين صفحه نمايش داده ميشود که فلان کس پست شما را لايک کرد ، و بعد از چند لحظه از بين ميرود ، در اين پست قصد دارم يک پلاگين جاواسکريپت معرفي کنم که اين کار را براحتي براي شما انجام مي دهد .
alertify يک پلاگين جاواسکريپت و مستقل از Jquery است که هم ميتوان ديالوگ و آلرت با آن نشان داد و هم نوتيفيکيشن . کافيست بصورت زير آن را در سورس HTML خود قرار دهيد .
<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 دلخواهي ابتدا بصورت زير تعريف ميکنيم که از آن در حين کد طراحی سایت نويسي جاواسکريپت استفاده کنيم و راحتتر باشد .
16
"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 قبلش بگذاريم بصورت زير :
?
29
$("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;
};
و براي ايجاد نوتيفيکيشن :
?
1
// standard notification
// setting the wait property to 0 will
// keep the log message until it's clicked
alertify.log("Notification", type, wait);
طراحی وب سایت