Besoin de votre avis

**olimann** · 30/09/2013, 17h40

Bonjour à tous,

Je débute et j’essaie de faire au mieux un petit script que voici :

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
 
$(document).ready(function(){
 
	var monBloc = $("#slideBox");
	monBloc.hide();
 
	$("#open").click( function(e) { 
			monBloc.slideDown("slow");
			$(this).addClass("active3");
			e.preventDefault();
			e.stopPropagation();
	});
 
 
	function closefonction() {
		if( monBloc.is(":visible") ) {
				monBloc.slideUp("slow", function() {
				$("#open").removeClass("active3");			   
		})
	}};
 
	$("#close").click( function() {
		closefonction();
	});
 
 
	//// click ecran
	monBloc.click(function(e){
		e.stopPropagation();
	});
 
 
	$(function() {
         $(document).click(closefonction);
 
	});
 
 
});

J'aimerais savoir si ce code vous semble correcte et bien écrit ?
Merci pour votre aide.

**danielhagnoul** · 30/09/2013, 23h41

Bonsoir

Impossible de donner un avis valable sur la justesse et sur la logique du code (j’essaie de faire au mieux) sans les codes CSS et HTML.

**olimann** · 01/10/2013, 14h37

Désolé d’avoir été peu précis

un exemple en condition

**Darkaurora** · 01/10/2013, 18h05

Il est difficile de juger de la qualité d'un code. Il peut y avoir autant de façon de faire que de développeur sur terre...

Sur un tout petit développement comme cette démo, tu respectes les aspects les plus importants à mon sens:
1 Le fonctionnement.
2 La performance ( même si les ressources sont très faible )
3 La sécurité ( a ton insu mais quand même

)

**danielhagnoul** · 01/10/2013, 23h21

Bonsoir

lang="en" ? "en" au lieu de "fr", mais si c'est un choix volontaire c'est bien

Vous utilisez une version obsolète de jQuery, nous en sommes à la version 1.10.2 (compatible avec tous les navigateurs) ou 2.0.3 (compatible IE9 et +).

Une balise de style vide, donc inutile.

Texte en dehors d'un paragraphe, tag "p".

Attention aux "}" et aux ";".

Voir le code et les commentaires.

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<title>Forum jQuery</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">	
	<style>
		body, html { margin: 0; padding: 0; background: #F8F8F8; font-family: 'Open Sans', sans-serif; 
			color: #666; font-weight: 400; }
		nav { background: #EBEBEB; }
		#container { margin: 0 auto; max-width: 80%; margin-top: 50px; }
		#slideBox { background-color:#222; color: #FFF; }
		.boxinner { padding: 20px; display: table; }
		.active3 { background: #222; color: #fff; }
		#close { float: right; text-align: center; margin-top: 30px; }
		#open { width: 250px; }
		.btn { cursor: pointer; display: block; padding: 10px; transition: all 0.5s ease 0s; }
		.btn:hover { background: #222; color: #FFF; }
	</style>
</head>
<body>
<body>
	<section id="container">    
		<nav>
			<a id="open" class="btn">open</a>
		</nav>
		<article id="slideBox" style="display: none;">
			<div class="boxinner">
				<h1> Haec igitur lex in amicitia</h1>
       			<p>
       				Sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime 
       				accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse 
       				fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat 
       				futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.
       			</p>
       			<a id="close" class="btn">close</a>            
			</div>
		</article>
	</section>          
	<script>
		$( function(){
 
			var monBloc = $( "#slideBox" ),
				jObjOpen = $( "#open" ); // utilisé plus d'une fois
 
			monBloc.hide();
 
			function closefonction() {
				if ( monBloc.is( ":visible" ) ){
					monBloc.slideUp( "slow", function(){
						jObjOpen.removeClass( "active3" );			   
					});
				}
			}
 
			jObjOpen.on( "click", function(){ 
				monBloc.slideDown( "slow" );
				jObjOpen.addClass( "active3" );
 
				return false; // idem e.preventDefault(); + e.stopPropagation();
			});
 
			$( "#close" ).on( "click", function(){
				closefonction();
			});
 
			// article slideBox 
			monBloc.on( "click", function( e ){
				e.stopPropagation();
			});
 
			$( document ).on( "click", closefonction );
		});
	</script>
</body>
</html>

**olimann** · 02/10/2013, 15h55

Merci pour toutes ces précisions je regarde tout ça attentivement !

Besoin de votre avis

jQuery

Vue hybride

Discussions similaires

Partager

Partager