CREER UN SLIDER AVEC PROTOTYPE.JS ET SCRIPTACULOUS

PRESENTATION

Dans cet exemple, nous allons créer deux ascenseurs personnalisés.

L'un vertical à droite de la carte, et l'autre horizontal sous la carte.

Il vous faut télécharger et installer prototype.js et scriptaculous

Prototype.js et Scriptaculous sont des bibliothèques JavaScript.

Elles disposent de plusieurs fonctionnalités permettant d'ajouter des effets spéciaux et des techniques de gisser-déposer.

Résultat


Slider Horizontal :	Slider Vertical :

CODE

   [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   [2] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   [3] <head>
   [4] <title>Google Maps - Prototype.js - Scriptaculous - Créer un slider</title>
   [5] <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   [6] <script src="http://maps.google.com/maps?file=api&v=2.x&key= Mettez Votre Clef API Ici " type="text/javascript"></script>
   [7] 
   [8] 	Prototypes.js à installer sur votre serveur. N'oubiez pas de modifier le chemin en conséquence. 
   [9] <script type='text/javascript' src='http://www.touraineverte.com/Google-Maps/javascript/prototype.js'></script>
  [10] 
  [11] 	Bibliothèque scriptaculous à installer sur votre serveur. N'oubiez pas de modifier le chemin en conséquence. 
  [12] <script type='text/javascript' src='http://www.touraineverte.com/Google-Maps/javascript/scriptaculous/scriptaculous.js'></script>
  [13] 
  [14] <script language='JavaScript' type='text/JavaScript'>
  [15] 	// <![CDATA[
  [16] 	function load (){
  [17] 		Slider horizontal 
  [18] 		new Control.Slider('PointeurHorizontal','LigneHorizontale',{values:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17],range:$R(0,17),onSlide:function(v){$('NiveauZoomHorizontal').innerHTML='Niveau de zoom : '+v},onChange:function(v){MaCarte.setZoom(v);}});
  [19] 
  [20] 		Slider vertical 
  [21] 		new Control.Slider('PointeurVertical','LigneVerticale',{axis:'vertical',values:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17],range:$R(0,17),onSlide:function(v){$('NiveauZoomVertical').innerHTML='Niveau de zoom : '+v},onChange:function(v){MaCarte.setZoom(v);}});
  [22] 
  [23] 		Paramètre de la carte 
  [24] 		var MaCarte = new GMap2(document.getElementById('EmplacementDeMaCarte'));
  [25] 		MaCarte.setCenter(new GLatLng(47.168076,0.235895), 10);
  [26] 	}
  [27] 	// ]]>
  [28] </script>
  [29] </head>
  [30] 
  [31] <body onload="load()" onunload="GUnload()"><center>
  [32] <div style="width: 740px; text-align: left;">
  [33] <table width="100%" border="0" cellspacing="0" cellpadding="0">
  [34]   <tr> 
  [35]     <td>
  [36] 	 	Emplacement de la carte 
  [37] 		<div align="center">
  [38] 			<div id="EmplacementDeMaCarte" style="width:740px; height:400px;"></div>
  [39] 		</div>
  [40] 	</td>
  [41]     <td>
  [42] 	 		Emplacement de l'ascenceur vertical 
  [43] 			<div id="LigneVerticale" style="height:400px; background-color:#555; width:1px;">
  [44] 				<div class="selected" id="PointeurVertical" style="width:15px; height:15px; position:relative;"><img src="http://www.touraineverte.com/Google-Maps/GMap2/ascenseur-slider/curseur2.gif"></div>
  [45] 			</div>
  [46] 	</td>
  [47]   </tr>
  [48]   <tr> 
  [49]     <td colspan="2">
  [50] 	 		Emplacement de l'ascenceur horizontal 
  [51] 			<div id="LigneHorizontale" style="width:740px; background-color:#555; height:1px;">
  [52] 				<div id="PointeurHorizontal" style="width:15px; height:15px;"><img src="http://www.touraineverte.com/Google-Maps/GMap2/ascenseur-slider/curseur.gif"></div>
  [53] 			</div>
  [54] 	</td>
  [55]   </tr>
  [56] </table>
  [57] <table width="100%" border="0" cellspacing="0" cellpadding="0">
  [58]   <tr> 
  [59]     <td colspan="2"> </td>
  [60]   </tr>
  [61]   <tr> 
  [62]  Niveau de Zoom de l'ascenceur vertical 
  [63]     <td width="50%" align="left">Slider Horizontal : <span id="NiveauZoomHorizontal"></span></td>
  [64]  Niveau de Zoom de l'ascenceur horizontal 
  [65]     <td width="50%" align="left">Slider Vertical : <span id="NiveauZoomVertical"></span></td>
  [66]   </tr>
  [67] </table>
  [68] 
  [69] </center>
  [70] </body>
  [71] </html>

Pour télécharger / copier le code cliquez ici, et n'oubliez pas de remplacer la clef API par la vôtre.