Mon cahier d’exercices sur jQuery & Co
Ce que je crois savoir. Ce que je pense devoir faire. Si je ne me trompe pas !

Plugin dvjhDialogModal

"Auteur : Hagnoul Daniel"

Texte : v1.0.0 2013-01-14

Dialogue modal.

Par défaut, le dialogue affiche un titre, un message et un bouton d'annulation.

Le dialogue peut afficher : une division éditable (contenteditable), un formulaire (form) et des boutons.

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

Téléchargement http : jquery.dvjhDialogModal-1.0.0.js

Ouverture du dialogue modal par défaut lors de l'affichage de la page.

Code :

$( window ).load( function(){
	$.dvjhDialogModal({
		"boutons" : {
			"OK" : function(){
				$.dvjhNotify({
					backgroundColor: "#F5F5F5",
					textHTML: "Vous avez accepté la proposition ! <br/>" +
						new Date( ).toLocaleString(),
					delay: 5000
				});
				
				console.log( arguments );
			}
		}
	});
});

Il y a un gestionnaire d'événement "click" sur chaque bouton.

Avant de détruire le dialogue et le voile noir il appelle la fonction associée au bouton en lui transmettant 4 arguments : obj( event, strEditable, strSerialize, serializeArray );.


Code :

$( "#btn1" ).on( "click", function(){
	$.dvjhDialogModal({
		"titre" : "Cacher un élément du DOM",
		"message" : "Voulez-vous cacher le titre ?",
		"boutons" : {
			"Oui" : function(){
				$( "#titre" ).fadeOut( 3000 );
				
				setTimeout( function(){
					$( "#titre" ).fadeIn( 3000 );
				}, 10000 );
				
				console.log( arguments );
			},
			"Non" : function( event ){
				$.dvjhNotify({
					backgroundColor: "#F5F5F5",
					textHTML: "Vous avez refusé ! <br/>" + new Date( ).toLocaleString(),
					delay: 5000
				});
				
				console.log( arguments );
			}
		}
	});
});

Code :

$( "#btn2" ).on( "click", function(){
	$.dvjhDialogModal({
		"titre" : "Division éditable",
		"message" : "Donnez votre opinion ci-dessous :",
		"editable" : true,
		"boutons" : {
			"OK" : function(){
				$.dvjhNotify({
					backgroundColor: "#F5F5F5",
					textHTML: arguments[1],
					delay: 5000
				});
				
				console.log( arguments );
			}
		}
	});
});

Cet exemple utilise volontairement plusieurs manières de donner du style au formulaire et à ses éléments.

Code :

<style>
	.monFormulaire fieldset { border: 1px dotted grey; }
	.monFormulaire input { display: block; margin: 12px; padding: 6px; }
</style>
<script>
	var jObjForm = $( "<form/>", {
		"class" : "monFormulaire",
		"html" : '<fieldset>' +
				 '<input name="pays" placeHolder="Votre pays ?">' +
				 '<input name="celsius" placeHolder="Température ?">' +
				 '</fieldset>',
		"css" : {
			"margin" : "12px",
			"padding" : "6px"
		}
	});
	
	$( "#btn3" ).on( "click", function(){
		$.dvjhDialogModal({
			"titre" : "Bienvenue !",
			"message" : "Il fait froid ici et chez vous ?",
			"form" : jObjForm,
			"boutons" : {
				"Oui" : function(){
					$.dvjhNotify({
						backgroundColor: "#F5F5F5",
						textHTML: "Brrr, il fait froid (" +
							arguments[3][1].value +
							" °C) en " +
							arguments[3][0].value + " !",
						delay: 5000
					});
					
					console.log( arguments )
				},
				"Non" : function(){
					$.dvjhNotify({
						backgroundColor: "#F5F5F5",
						textHTML: "Il fait bon (" +
							arguments[3][1].value +
							" °C) en " +
							arguments[3][0].value + " !",
						delay: 5000
					});
					
					console.log( arguments );
				}
			}
		});
	});
</script>

Code du plugin :

/*
 * Daniel Hagnoul
 * 
 * Plugin jquery.dvjhDialogModal-1.0.0.js
 *
 * Code v1.0.0 2013-01-13
 *
 * Le plugin affiche un dialogue modal.
 * 
 * Par défaut, le dialogue affiche un titre, un message
 * et un bouton d'annulation.
 *
 * Le dialogue peut afficher : une division
 * éditable (contenteditable), un formulaire (form) et
 * des boutons.
 *
 * Voir les exemples sur :
 * http://danielhagnoul.developpez.com/MonCaEx/plugin-dvjh/dialogModal/dialogModal.php
 */
(function($){
	$.dvjhDialogModal = function( options ){
		var opts = $.extend( true, {}, $.dvjhDialogModal.defaults, options ),
			jObjDialog = $( "<div/>", {
				"id" : $.now(),
				"css" : opts.objCSSDialogModal,
				"html" : '<h1 class="dialogTitre">' + opts.titre + '</h1>' +
						 '<div class="dialogBox">' +
						     '<div class="dialogMessage">' + opts.message + '</div>' +
						     '<div class="dialogForm"></div>' +
						     '<div class="dialogButtons"></div>' +
						 '</div>'
			}).appendTo( "body" ),
			jObjVoileNoir = $( "<div/>", {
				"css" : opts.objCSSVoileNoir
			}).appendTo( "body" ),
			jObjDialogTitre = $( ".dialogTitre", jObjDialog ),
			jObjDialogMessage = $( ".dialogMessage", jObjDialog ),
			jObjDialogBox = $( ".dialogBox", jObjDialog ),
			jObjDialogForm = $( ".dialogForm", jObjDialog ),
			jObjDialogButton = $( ".dialogButtons", jObjDialog ),
			jObjDialogEditable = null,
			jObjForm = null,
			tabIndex = 0;
			
		$.each( opts.boutons, function( key, obj ){
			$( "<button/>", {
				"tabIndex" : ++tabIndex,
				"css" : opts.objCSSDialogButton,
				"text" : key,
				"click" : function( event ){
					var strEditable = "",
						strSerialize = "",
						serializeArray = [];
					
					if ( jObjDialogEditable ){
						strEditable = jObjDialogEditable.text();
					}
					
					if ( jObjForm ){
						strSerialize = jObjForm.serialize();
						serializeArray = jObjForm.serializeArray();
					}
						
					obj( event, strEditable, strSerialize, serializeArray );
					
					jObjDialog.remove();
					jObjVoileNoir.remove();
				}
			}).appendTo( jObjDialogButton )
		});
		
		if ( opts.editable ){
			jObjDialogForm
				.append( '<div class="dialogEditable" contentEditable></div>' );
				
			jObjDialogEditable = $( ".dialogEditable", jObjDialog );
			
			jObjDialogEditable.attr( "tabIndex", ++tabIndex );
		}
		
		/*
		 * L'objet jQuery doit contenir un élément "<form>".
		 */
		if ( opts.form != null && opts.form[0].tagName == "FORM"  ){
			jObjDialogForm
				.attr( "tabIndex", ++tabIndex )
				.append( opts.form );
				
			jObjForm = $( "form", jObjDialog );
		}
		
		jObjDialogTitre.css( opts.objCSSDialogTitre );
		jObjDialogBox.css( opts.objCSSDialogBox );
		jObjDialogMessage.css( opts.objCSSDialogMessage );
		jObjDialogForm.css( opts.objCSSDialogForm );
		
		if ( jObjDialogEditable ){
			jObjDialogEditable.css( opts.objCSSDialogEditable );
		}
		
		/*
		 * Le dialogue modal doit avoir sa taille définitive 
		 * avant le calcul de outerHeight et de outerWidth
		 */
		jObjDialog.css({
			"margin-top" :  -jObjDialog.outerHeight(true)/2,
			"margin-left" : -jObjDialog.outerWidth(true)/2
		}).fadeIn( 800 );
		
		$( "[tabIndex='1']" ).trigger( "focus" );
		
		jObjVoileNoir.fadeIn( 500 );
	};
	
	$.dvjhDialogModal.defaults = {
		"objCSSVoileNoir" : {
			"position" : "fixed",
			"display" : "none",
			"left" : 0,
			"top" : 0,
			"width" : "100%",
			"height" : "100%",
			"opacity" : "0.75",
			"filter" : "alpha(opacity=80)",
			"background" : "gray",
			"zIndex" : 99998
		},
		"objCSSDialogModal" : {
			"position" : "fixed",
			"display" : "none",
			"top" : "50%",
			"left" : "50%",
			"min-width" : "300px",
			"max-width" : "600px",
			"zIndex" : 99999,
			"padding" : "6px",
			"text-align" : "left",
			"fontSize" : "12px",
			"background" : "#fff",
			"border" : "20px solid #ddd",
			"boxShadow": "0px 0px 20px #000",
			"borderRadius" : "10px"
		},
		"objCSSDialogTitre" : {
			"text-align" : "center"
		},
		"objCSSDialogBox" : {
			"text-align" : "left",
			"padding" : "6px"
		},
		"objCSSDialogMessage" : {
			"text-align" : "justify",
			"padding" : "6px",
			"-moz-hyphens" : "auto",
			"-webkit-hyphens" : "auto",
			"-ms-hyphens": "auto",
			"-o-hyphens": "auto",
			"hyphens": "auto"
		},
		"objCSSDialogForm" : {
			"text-align" : "left",
			"padding" : "6px"
		},
		"objCSSDialogEditable" : {
			"padding" : "6px",
			"height" : "60px",
			"overflow" : "auto",
			"border" : "1px solid orange",
			"-moz-hyphens" : "auto",
			"-webkit-hyphens" : "auto",
			"-ms-hyphens": "auto",
			"-o-hyphens": "auto",
			"hyphens": "auto"
		},
		"objCSSDialogButton" : {
			"margin" : "6px",
			"padding" : "6px",
			"float" : "right"
		},
		"titre" : "Titre du message",
		"message" : "<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis\
					praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint\
					occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia\
					animi, id est laborum et dolorum fuga.</p>",
		"editable" : false, // true ou false
		"form" : null, // un objet jQuery contenant un formulaire ou null
		"boutons" : {
			"Annuler" : function(){}
		}
	};
})(jQuery);

À bientôt !

 

Veuillez poser vos questions
techniques sur le forum jQuery
s'il vous plait.

Avertissement solennel

Autodidacte en informatique, l’auteur a tous les défauts de sa qualité. Si vous vous inspirez, copiez ou pire utilisez le contenu de cette page, vous êtes téméraire, inconscient du danger !

Reconnaissant avoir été dûment informé, vous déchargez l’auteur et à fortiori l’hébergeur du site de toute responsabilité dans les graves dégâts que vous causerez sûrement !

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

Creative Commons License Attribution-Share Alike 2.0 Belgium Except where otherwise noted, content on this site is licensed under a Creative Commons License : Attribution-Share Alike 2.0 Belgium

Mention obligatoire : "Auteur : Hagnoul Daniel (http://www.developpez.net/forums/u285162/danielhagnoul/)"