Envoi de variables à une fonction

**caleiste** · 12/01/2013, 17h40

Bonjour à tous,

Je suis débutant avec JQUERY et j'ai un petit souci pour envoyer des variables à une fonction.

Voici le code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" class="alertElement">Bouton suppression</a>

Voici ma fonction JQUERY :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
(function($) {
 
	$.confirm = function(params) {
 
		if ($('#confirmOverlay').length) {
			// A confirm is already shown on the page:
			return false;
		}
 
		var buttonHTML = '';
		$.each(params.buttons,function(name,obj) {
 
			// Generating the markup for the buttons:
 
			buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'</a>';
 
			if (!obj.action) {
				obj.action = function() {};
			}
		});
 
		var markup = [
			'<div id="confirmOverlay">',
			'<div id="confirmBox">',
			'<h1>',params.title,'</h1>',
			'<p>',params.message,'</p>',
			'<div id="confirmButtons">',
			buttonHTML,
			'</div></div></div>'
		].join('');
 
		$(markup).hide().appendTo('body').fadeIn();
 
		var buttons = $('#confirmBox .button'),
			i = 0;
 
		$.each(params.buttons,function(name,obj) {
			buttons.eq(i++).click(function() {
 
				// Calling the action attribute when a
				// click occurs, and hiding the confirm.
 
				obj.action();
				$.confirm.hide();
				return false;
			});
		});
	}
 
	$.confirm.hide = function() {
		$('#confirmOverlay').fadeOut(function() {
			$(this).remove();
		});
	}
 
})(jQuery);

Que je personnalise avec une seconde fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
$(document).ready(function() {
 
	$('.alert').click(function(e) {
 
		e.preventDefault();
		var theHREF = $(this).attr("href");
		var elem = $(this).closest();
 
		$.confirm({
			'title'		: 'Suppression',
			'message'	: 'Etes-vous sûr de vouloir supprimer cet élément et son contenu ?',
			'buttons'	: {
				'Je confirme'	: {
					'class'	: 'blue',
					 'action': function() {
						window.location.href = theHREF;
					}
				},
				'Annuler'	: {
					'class'	: 'gray',
					'action': function() {}	// Nothing to do in this case. You can as well omit the action property.
				}
			}
		});
 
	});
 
});

Est-il possible de définir le "title" et "message" dans le fichier HTML directement, afin d'avoir des messages plus personnalisés que "élément".

Jusqu'ici je duplique bêtement la seconde fonction en donnant une autre class et donc en mettant un autre texte... et je sais que c'est moche

Je sais que je devrais utiliser des variables mais comment les passer à la fonction.
Merci d'avance

**danielhagnoul** · 12/01/2013, 19h41

Bonsoir

EDIT

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="fr" dir="ltr" manifest="http://danielhagnoul.developpez.com/pageTest.mf">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { min-width: 40rem; vertical-align: top; }
 
		/* TEST */
		#confirmOverlay { display: block; min-width: 30rem; min-height: 15rem; background-color: yellow;  }
		#confirmBox { text-align: center; border: 1rem solid gray; }
		.confirme { margin: 1.2rem; padding: 0.6rem; color: blue; }
		.annule { margin: 1.2rem; padding: 0.6rem; color: grey; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>Titre 2</h2>
		</hgroup>
	</header>
	<section class="conteneur">
		<section class="table1">
			<section class="ligne">
				<article>
 
 
				</article>
				<article>
 
				</article>
			</section>
		</section>
	</section>	
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-13T00:47:19.620+01:00" pubdate>2013-01-13T00:47:19.620+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.9.0rc1.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.0.0rc1.js"></script>
	<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>
		"use strict";
 
		( function( $ ){
			$.confirmDialog = function( options ){
				var jObjBtn = $( "<button/>", {
					"class" : "",
					"href" : "",
					"text" : ""
				});
 
				$( '<div id="confirmOverlay"><div id="confirmBox"><h1>' + 
					options.titre + '</h1><p>' + options.message +
					'</p><div id="confirmButtons"></div></div></div>' ).appendTo( options.cible );
 
				var jObjConfirm = $( "#confirmOverlay" ),
					jObjConfBtn = $( "#confirmButtons" );
 
				$.each( options.buttons, function( key, obj ){
					jObjConfBtn.append( 
						jObjBtn
							.clone( true, true )
							.attr( "class", obj[ "class" ] )
							.text( key )
							.on( "click", function( event ){
 
								/*
								 * Exécute l'action dans le
								 * contexte de jObjBtn
								 */
								if ( obj[ "action" ] ){
 
									obj[ "action" ].call( this, event );
								}
 
								/*
								 * Détruit le dialogue
								 */
								jObjConfirm.remove();
 
							}) // pas de ; final ici
					);
				});
			};
		})( jQuery );
 
		$(function(){
 
			$.confirmDialog({
				"cible" : "article:first",
				"titre" : "Suppression",
				"message" : "Etes-vous sûr de vouloir supprimer cet élément et son contenu ?",
				"buttons" : {
					"Je confirme" : {
						"class" : "confirme",
						 "action" : function( event ){
						 	console.log( this, event );
						 }
					},
					"Annuler" : {
						"class" : "annule"
					}
				}
			});
 
	 	});
 
		$( window ).load( function(){
 
		});
	</script>
</body>
</html>

**caleiste** · 13/01/2013, 14h26

Bonjour,
Merci pour votre réponse. Votre code semble plus propre, je vais donc revoir ma copie.
Mais cela ne répond pas à la question de la mise en variables des quelques éléments "titre" "message" ... que je souhaiterais gérer dans le HTML (ou au pire dans le JS mais de manière plus réduite).

J'imaginais un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="javascript:void(0);" onClick="confirmOverlay('Titre','Message','Button');">Mon bouton</a>

Ainsi j'éviterais la duplication de code dans la feuille javascript tout en gardant une souplesse maximale.

Envoi de variables à une fonction

jQuery

Vue hybride

Discussions similaires

Partager

Partager