Bonjour,
J'utilise un fichier JS ayant pour fonction d'afficher des notifications sur mon site mais je n'arrive pas à le parametrer correctement pour que les notifications s'affichent là où a lieu l'action (du type onclick, etc...).
Voici à quoi ressemble le fichier (je me suis basé sur un projet OpenSource) :
Merci d'avance pour votre aide !
Modifié par cocochepeau (17 Jun 2012 - 22:20)
J'utilise un fichier JS ayant pour fonction d'afficher des notifications sur mon site mais je n'arrive pas à le parametrer correctement pour que les notifications s'affichent là où a lieu l'action (du type onclick, etc...).
Voici à quoi ressemble le fichier (je me suis basé sur un projet OpenSource) :
(function($) {
var config = window.NotifierjsConfig = {
defaultTimeOut: 3500,
position: ["top", "right"],
notificationStyles: {
padding: "15px",
margin: "0",
backgroundColor: "#FBFCFD",
opacity: 0.9,
color: "#444444",
font: "bold 12px 'HelveticaNeue', sans-serif",
borderRadius: "8px",
boxShadow: "inset 0 0 3px 1px #CCCCCC",
display: "inline-block",
position: "relative",
border: "1px solid #C3C3C3"
},
notificationStylesHover: {
opacity: 1
},
container: $("<div></div>")
};
$(document).ready(function() {
config.container.css("position", "absolute");
config.container.css("z-index", 9999);
config.container.css(config.position[0], "12px");
config.container.css(config.position[1], "12px");
$("body").append(config.container);
});
function getNotificationElement() {
return $("<div>").css(config.notificationStyles).hover(function() {
$(this).css(config.notificationStylesHover);
},
function() {
$(this).css(config.notificationStyles);
});
}
var Notifier = window.Notifier = {};
Notifier.notify = function(message, title, iconUrl, timeOut) {
var notificationElement = getNotificationElement();
timeOut = timeOut || config.defaultTimeOut;
if (iconUrl) {
var iconElement = $("<img/>", {
src: iconUrl,
css: {
width: 36,
height: 36,
display: "inline-block",
verticalAlign: "middle"
}
});
notificationElement.append(iconElement);
}
var textElement = $("<div/>").css({
display: 'inline-block',
verticalAlign: 'middle',
padding: '0 12px'
});
if (title) {
var titleElement = $("<div/>");
titleElement.append(document.createTextNode(title));
titleElement.css("font-weight", "bold");
textElement.append(titleElement);
}
if (message) {
var messageElement = $("<div/>");
messageElement.append(document.createTextNode(message));
textElement.append(messageElement);
}
notificationElement.delay(timeOut).fadeOut(function(){
notificationElement.remove();
});
notificationElement.bind("click", function() {
notificationElement.hide();
});
notificationElement.append(textElement);
config.container.prepend(notificationElement);
};
Notifier.info = function(message, title) {
Notifier.notify(message, title, "images/bullet_info.png");
};
Notifier.warning = function(message, title) {
Notifier.notify(message, title, "images/bullet_error.png");
};
Notifier.error = function(message, title) {
Notifier.notify(message, title, "images/bullet_deny.png");
};
Notifier.success = function(message, title) {
Notifier.notify(message, title, "js/images/bullet_accept.png");
};
}(jQuery));
Merci d'avance pour votre aide !
Modifié par cocochepeau (17 Jun 2012 - 22:20)