Fonction publique dans un plugin

**Amnesiak** · 12/08/2010, 12h41

Bonjour,

J'ai créé un plugin jQuery que j'applique à tous les <div> de ma page.
J'aimerais ensuite pouvoir appeler depuis l'extérieur une fonction sur mes <div> afin d'effectuer un autre traitement.
Cependant, j'aimerais que cette méthode ne puisse être appelée que sur les éléments concernés par le plugin.
Si je défini une fonction "test" publique comme ci-dessous, je peux l'appeler sur n'importe quel élément, or elle ne devrait exister que pour les <div> sélectionnés !

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
(function($) {
 
    jQuery.fn.monPlugin = function(){
        console.log("plugin ok");
    };
 
    jQuery.fn.test = function(){
        console.log("test ok");
    };
 
 
})(jQuery);
 
$(document).ready(function(){
  $("div").monPlugin();
  $("div").test();      // ok, ça marche...
  $("span").test();     // <--- mais ceci ne devrait pas marcher !!
});

Quelqu'un aurait-il une solution ?
Merci d'avance !

**danielhagnoul** · 13/08/2010, 21h06

Bonsoir

Exemple :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		h2 {
			text-align:center;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		div#affiche {
			clear:both;
			margin:40px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		.testClass p {
			color:blue;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		(function($) {
			$.fn.monPlugin = function(){
				return this.each(function(i, item){
					if (!$(item).hasClass("testClass")){
						$(item).addClass("testClass");
					}
					console.log(item, "plugin ok");
				});
			};
 
			$.fn.test = function(){
				return this.each(function(i, item){
					if ($(item).hasClass("testClass")){
						console.log(item, "test ok");
					}
				});
			};
		})(jQuery);
 
		$(function(){
			// se limiter aux divisions du document sinon on traite la div firebug
			$("div", document.body).monPlugin();
			$("div", document.body).test();      // ok, ça marche...
 
			$("span").test();     // <--- mais ceci ne devrait pas marcher !!
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
		<p>Un mot pour rempli</p>
 
		<span>Hello everybody !</span>
 
		<div id="affiche">
			<p>Bonjour !</p>
		</div>
	</div>
</body>  
</html>

Fonction publique dans un plugin

jQuery

Vue hybride

Discussions similaires

Partager

Partager