Plugin dvjhNotify

"Auteur : Hagnoul Daniel"

Texte : v1.0.0 2010-02-28

Dialogue d'information

Notify : notifier, imformer. Par défaut, l'information apparaît dans le coin inférieur droit, elle reste affichée 30 secondes au maximum et l'utilisateur peut s'en débarrasser à tout moment d'un clic de souris.

Exemple : Voir

Téléchargement ftp : jquery.dvjhNotify-1.0.0.js

Téléchargement https : jquery.dvjhNotify-1.0.0.js

Daniel Hagnoul

Plugin jquery.dvjhNotify-1.0.0.js

Code : v1.0.0 2010-02-20
------------------------------------------------
Usage :

$.dvjhNotify({
	textHTML: "Un mot pour remplir",
});

$.dvjhNotify({
	position: "topLeft",
	textHTML: "Un mot pour remplir",
	imgFloat: "left",
	imgSrc: "../images/imageTest.png",
	imgWidth: "50px",
	imgHeight: "40px"
});

$.dvjhNotify({
	position: "topRight",
	backgroundColor: "#F5F5F5",
	textHTML: "Un mot pour remplir",
	imgFloat: "right",
	imgSrc: "../images/imageTest.png",
	imgWidth: "50px",
	imgHeight: "40px",
	delay: 8000
});

$.dvjhNotify({
	position: "bottomLeft",
	backgroundImage: "url('../images/imageTest.png')",
	width: "270px",
	height: "200px",
	callback: function(){
		var tab = $.makeArray(arguments);
		
		$.dvjhNotify({
			width:"400px",
			textHTML: "<p style='font-weight:bold;'>event.currentTarget.id = " + tab[0].currentTarget.id + "</p>"
		});
	},
	boolBtn: false,
	delay: 6000
});

$.dvjhNotify({
	position: "perso",
	top: "150px",
	left: "400px",
	right: "auto",
	bottom: "auto",
	width: "400px",
	height: "auto",
	backgroundColor: "#FAEBD7",
	fontSize: "1.2em",
	lineHeight: "1.8em",
	textHTML: "<p>Attention, en position perso vous devez redéfinir les paramètres top, left, right, bottom, width et height !</p><p>Si delay est inférieur à 5000, la notification restera affichée jusqu'au moment où l'utilisateur cliquera sur le bouton OK ou à l'intérieur de la notification. Le bouton OK n'est là que pour inciter au click.</p><p>Attention, ne confondez pas une notification avec un dialogue d'alerte.</p>",
	textMargin: "12px",
	border: "2px groove gray"
});
------------------------------------------------
Options disponibles, réglages par défaut :
	position: "bottomRight",	// perso, topLeft, topRight, bottomLeft, bottomRight
	top: "20px",	// uniquement si perso
	left: "20px",	// uniquement si perso
	bottom: "auto",	// uniquement si perso
	right: "auto",	// uniquement si perso
	width: "250px",
	height: "auto",
	color: "black",
	backgroundColor: "#FFFFE0",
	backgroundImage: "none",	// exemple : "url('images/imageTest.png')"
	fontFamily: "sans-serif",
	fontStyle: "italic",
	fontSize: "0.8em",
	fontWeight: "normal",
	lineHeight: "1.3em",
	textHTML: " ",
	textMargin: "6px",
	border: "1px solid #777777",
	mozBoxShadow: "#000000 0px 4px 10px -5px",
	mozBorderRadius: "4px",
	webkitBoxShadow: "0px 2px 4px #999999",
	webkitBorderRadius: "5px",
	callback: "rien",	// fonction de rappel qui sera activée après la fermeture de la notification
	boolBtn: true,	// si true ajoute un bouton OK
	delay: 30000,	// si delay > 4999, temps maximum pendant lequel la notification est visible
	fading: true,	// false = pas de fading
	fadeIn: 1000,	// uniquement si fading = true
	fadeOut: 1000,	// uniquement si fading = true
	imgFloat: "left",
	imgSrc: "rien",	// exemple : "images/imageTest.png"
	imgWidth: "50px",
	imgHeight: "40px",
	imgBorder: "1px solid grey"
	
Les lecteurs des fondations reconnaîtront une fonction globale dans l'espace de nom jQuery.

À bientôt !

 

Veuillez poser vos questions
techniques sur les forums DVP,
s'il vous plait.

Vous n'aurez jamais fini d'apprendre la programmation, aussi apprenez à apprendre en vous amusant.