01 - un menu avec l'utilisation des parenthèses dans les fonctions

Nous avons vu jusqu'à présent qu’il fallait ouvrir les parenthèses après la création d’une fonction

function mafunction () {} ;

mais nous n’avons jamais utilisé ces parenthèses. Elles permettent de transmettre des variables à la fonction. Lorsque j’appelle ma fonction je peux lui envoyer des données :

mafunction ( une_donnée_importante ) ;

Dans mon code j’envoie alors « une_donnée_importante » à mafunction. mafunction attend donc quelque chose lorsqu’on l’appelle donc on lui dit dans sa déclaration :

function mafunction (j_attends_quelque_chose) {

//dans la fonction on peut utiliser comme on veut cette variable,ici
console.log(j_attends_quelque_chose );

}

ici dans notre exemple nous envoyons à la fonction menu1fct un nombre correspondant au positionnement de la div1

	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Document sans nom</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<style>
	#div1 {
		position: absolute;
		height: 10px;
		width: 70px;
		top: 35px;
		left: 200px;
		background-color: #000;
		z-index: 0;
	}
	li.menu {
		float: left;
		position: relative;
		z-index: 10;
		padding-left: 60px;
		list-style: none;
	}
	</style>
	<script>


		function menu1fct (posX){
			console.log(posX);
			$( "#div1" ).animate({left: posX,}, 300, function() {});
		}

	</script>
	</head>

	<body>
	<div id="conteneur">
	  <div id="menucont">
	    <ul>
	      <li class=" menu" onMouseOver="menu1fct(100)">entrée</li>
	      <li class=" menu " onMouseOver="menu1fct(200)">sortie</li>
	      <li class=" menu " onMouseOver="menu1fct(300)">autoroute</li>
	      <li class=" menu " onMouseOver="menu1fct(420)">nationale</li>
	      <li class=" menu" onMouseOver="menu1fct(530)">péage</li>
	      <li class=" menu" onMouseOver="menu1fct(630)">douane</li>
	    </ul>
	  </div>
	  <div id="div1"></div>
	</div>
	</body>
	</html>

02 - faire un drag and drop facilement avec Jquery ui

example : 12- jquery-ui-drag.html

Il faut télécharger Jquery ui, ou bien utiliser le lien ci-dessous. Une fois fait, la div devient draggble trés facilement.

Il suffit de dire :

$( "#div1" ).draggable();

	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Document sans nom</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
					<style>
	#div1 {
		position: absolute;
		height: 100px;
		width: 100px;
		top: 20px;
		left: 200px;
		background-color: #8C3B3D;
		z-index: 0;
	}

	</style>
	<script>
		function anim(){
			//alert("ok");
			$("#div1").css("height","300px");

		}



		</script>
	</head>
	<body>
	<div id="conteneur">
	  <div id="div1" onMouseDown="anim()" ></div>
	</div>

	<script>
	$( "#div1" ).draggable();
	</script>

	</body>
	</html>

03 - Drag and drop dans une zone

example : 13- jquery-ui-drop.html

De la même manière que nous avons déclarez le drag nous pouvons déclarez un drop avec une fonction qui se déclenche quand l'événement c'est produit.

	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Document sans nom</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<style>

	 #draggable {
	 width: 100px;
	 height: 100px;
	 background: #ccc;
	}

	#draggable2{
		position: absolute;
		left: 250px;
		top: 400px;
		width: 100px;
	 height: 100px;
	 background: #ccc;
		}

	#droppable {
		position: absolute;
		left: 250px;
		top: 0;
		width: 125px;
		height: 125px;
		background: #999;
		color: #fff;
		padding: 10px;
	}
	</style>
	</head>
	<body>
	<div id="droppable">déposez ici</div>
	<div id="draggable">jouez</div>
	<div id="draggable2">déplacez moi</div>

	<script>
	$( "#draggable2" ).draggable();
	$( "#droppable" ).droppable({
	  drop: function() {
	    $( "#draggable" ).text("gagné");
	  }
	});
	</script>
	</body>
	</html>