Checkbox Toggle jquery

**cahnory** · 03/06/2010, 16h31

Alors voici un petit plugin de ma conception qui transforme des checkbox en slider à la manière de ce qu'on trouve sur l'ui des ipod touch/iphone (avant tout troll je cite l'ipod car c'est le premier exemple qui me vient en tête, pas parcequ'il en est la première représentation... je sais qu'en disant ça je vais y avoir vraiment droit du coup à mon troll

).

La démo est ici :
http://www.cahnory.fr/jquery/checkbox/

Alors ce que j'avais en tête en concevant ce plugin était d'anticiper un peu l'avenir de css, tout ce que jQuery fait mais que css fera est laissé aux bons soins de css. Concrètement je ne laisse pas à jQuery la gestion des animations, pour cela j'utilise la propriété css3 transition. Je pense ce choix justifié, l'animation fait partie de la présentation, jQuery se contente de lancer l'évènement via des modifications sur les class.
Le résultat est un plugin fonctionnel sur ie6+, FF3+,... mais animé sur safari et chrome seulement, pour le moment.

**danielhagnoul** · 05/06/2010, 01h16

Bonsoir.

Très joli !

Une variante pour le code du plug-in :
[EDIT 2010-06-05 09:20] bug sous ie et safari

!

**SpaceFrog** · 05/06/2010, 08h44

Daniel ton code plante sous IE et produit un effet de flicker sur les bouton sous Chrome.

Et a priori l'utf-8 n'est pris en compte par aucun des navigateurs ? je n'ai pas les accents de "Fermé "...

**danielhagnoul** · 05/06/2010, 09h39

Bonjour

Envoyé par SpaceFrog

Daniel ton code plante sous IE et produit un effet de flicker sur les bouton sous Chrome.

Et a priori l'utf-8 n'est pris en compte par aucun des navigateurs ? je n'ai pas les accents de "Fermé "...

Je pensais pouvoir simplifier le code du plug-in, mais mon code ne fonctionnait pas sous IE (pas de fonctionnement en dégradé) et Safari (pas d'animation). Je n'avais pas testé IE et Safari !

Mais sous Chrome et Firefox, il fonctionnait. Je n'ais pas vu de « flicker » sous Chrome et « Fermé » avait son accent (mais j'aurais dû écrire « Fermer »). Après le coup du lissage sous IE et ceci, tu n'as pas un souci avec ton ordinateur ?

[EDIT 2010-06-05 11:45]

Je n'avais pas repris tout le code CSS et j'avais du code CSS perturbateur en trop.

En fait, le code de mon plug-in était bon à l'exception d'un bug incompréhensible sous IE et Safari qui oblige a ajouté la classe jquery-checkbox après la création de l'élément.

Je pense que les autres problèmes ne viennent pas de mon code, mais du CSS.

Si je nomme les boutons « Fermer » et « Ouvrir », c'est bon, mais si j'utilise « Non choisi » et « Choisi » je vois bien, maintenant, le fameux effet « flicker ». Les mots composés ne passent pas bien.

Sous Firefox j'ai : « Avertissement : Propriété “-moz— transition » inconnue. Déclaration abandonnée. Ligne : 41"

Sous Firefox et IE : si on recharge la page, le texte des boutons est faussé.

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
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>sliderCheckBox</title>
	<style>
		html, body { background: #B4B7C0; }
		h3 { color: #818799; text-shadow: 0 -1px 1px #555966, 0 1px 1px #d5d9e5; }
		form { width: 100%; text-align: center; }
		.jquery-checkbox {
			font-family: "Lucida Grande", Verdana, Arial, sans-serif;
			display: -moz-inline-stack;
			display: inline-block;
			position: relative; width: 125px;
			font-size: 12px; height: 2em; line-height: 2em;
			border: 1px solid #FFF;
			border-color: rgba(0,0,0,.2) rgba(127,127,127, .2) rgba(255,255,255,.2);
			border-radius: 3px;
			-o-border-radius: 3px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
		}
		.jquery-checkbox .jquery-checkbox-ruler {
			display: block; width: 100%; height: 100%;
			position: relative;
			background: #00c900;
			background-image: -webkit-gradient(linear,left top,left bottom,from(#00A900), to(#66c900));
			background-image: -moz-linear-gradient(left top,left bottom,from(#00A900),to(#00c900));
			border-radius: 3px;
			-o-border-radius: 3px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
		}
		.jquery-checkbox .jquery-checkbox-ruler .jquery-checkbox-ruler {
			position: absolute; right: 0;
			background: #c90000;
			background-image: -webkit-gradient(linear,left top,left bottom,from(#A90000), to(#c90000));
			background-image: -moz-linear-gradient(left top,left bottom,from(#A90000),to(#c90000));
			transition: width .2s;
			-o-transition: width .2s;
			-moz-transition: width .2s;
			-webkit-transition: width .2s;
		}
		.jquery-checkbox .jquery-checkbox-handle {
			display: -moz-inline-stack; display: inline-block; position: absolute; left: 0; top: -1px; height: 100%;
		}
		.jquery-checkbox .jquery-checkbox-handle span {
			display: -moz-inline-stack; display: inline-block; position: relative;
			cursor: pointer;
			padding: 0 .5em 1px;
			color: #000;
			text-shadow: 0 1px 0 #FFF;
			background: #F5F5F5;
			background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),color-stop(0.5, rgba(234, 234, 234, .9)),color-stop(0.5, rgba(226, 226, 226, .9)),to(rgba(242, 242, 242, .9)));
			background-image: -moz-linear-gradient(left top,left bottom,from(rgba(255, 255, 255, .9)),color-stop(0.5, rgba(234, 234, 234, .9)),color-stop(0.5, rgba(226, 226, 226, .9)),to(rgba(242, 242, 242, .9)));
			border-radius: 3px;
			-o-border-radius: 3px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			transition: left .2s;
			-o-transition: left .2s;
			-moz-transition: left .2s;
			-webkit-transition: left .2s;
			-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.7);
		}
		.jquery-checkbox.checked .jquery-checkbox-ruler .jquery-checkbox-ruler {
			width: 0;
		}
		.jquery-checkbox.checked .jquery-checkbox-handle span {	
			left: -100%;
		}
		/* !Fixes */
		.lt-ie7 .jquery-checkbox .jquery-checkbox-handle .jquery-checkbox-ruler  {
			right: -1px;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		(function($){
			$.sliderCheckBox = function(options){
				var opts = $.extend(true, {}, $.sliderCheckBox.defaults, options);
 
				$("input[type='checkbox']").each(function(i, item){
					if(opts.hide){
						$(item).hide();
					}
 
					$("<span/>",{
						html:'<span class="jquery-checkbox-ruler"><span class="jquery-checkbox-ruler"><span class="jquery-checkbox-handle"><span>' + ($(item).attr('checked') ?	opts.state.checked : opts.state.unchecked) + '</span></span></span></span>',
						click:function(){
							var obj = $(this).data("box").obj;
							var boolChecked = !obj.attr('checked');
 
							obj.attr('checked', boolChecked);
 
							$(".jquery-checkbox-handle > span", this).text(boolChecked ? opts.state.checked : opts.state.unchecked);
							$(this).toggleClass(opts.checked, boolChecked);
						}
					}).data("box", {
                        obj: $(item)
                    }).addClass("jquery-checkbox").insertAfter(item);
				});
			};
 
			$.sliderCheckBox.defaults = {
				hide: true,
				checked: "checked",
				state: {
					checked: 'Ouvrir',
					unchecked: 'Fermer'
				}
			};
		})(jQuery);
 
		$(function(){
			$.sliderCheckBox();
		});
	</script>
</head>
<body> 
	<form>
		<h3>Inline</h3> 
		<p> 
				<input type="checkbox" /> 
				<input type="checkbox" /> 
				<input type="checkbox" /> 
				<input type="checkbox" /> 
			</p> 
		<h3>Block</h3> 
		<p> 
			<input type="checkbox" /> 
		</p> 
		<p> 
			<input type="checkbox" /> 
		</p> 
		<p> 
			<input type="checkbox" /> 
		</p> 
		<p> 
			<input type="checkbox" />
		</p>
	</form>
</body>  
</html>

**danielhagnoul** · 20/06/2010, 21h48

Envoyé par danielhagnoul

En fait, le code de mon plug-in était bon à l'exception d'un bug incompréhensible sous IE et Safari qui oblige a ajouté la classe jquery-checkbox après la création de l'élément.

Bonsoir.

J'ai trouvé le pourquoi du bug sous Safari et IE.

Lors de la création d'un élément du DOM, si l'on doit utiliser un mot réservé du langage JavaScript il faut le donner sous forme texte. Il faut écrire :

Code :

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

1
2
3
4
$("<div/>",{ 
	html: "un mot pour remplir",
	'class': "maClasse"
}).appendTo("#conteneur");

Et pas :

Code :

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

1
2
3
4
$("<div/>",{ 
	html: "un mot pour remplir",
	class: "maClasse"
}).appendTo("#conteneur");

Checkbox Toggle jquery

Contribuez

Discussions similaires

Partager

Partager