Skip to content

Instantly share code, notes, and snippets.

@Giorgiolino

Giorgiolino/noaacompare.html Secret

Created January 3, 2012 23:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Giorgiolino/73fa1f4f55bc17c28edb to your computer and use it in GitHub Desktop.
Save Giorgiolino/73fa1f4f55bc17c28edb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
noaacompare.html
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mesures des stations météo</title>
<script type="text/javascript">
var meteo = {
config : { stationsSelectorId : 'stations-list', // Fait référence à l'élément <select id="stations-list">
updateButtonId : 'update-station', // Fait référence à l'élément <input id="update-station" type="submit" ...
detailFrameId : 'station-detail' // Fait référence à l'élément <iframe id="station-detail" ...
},
raffraichirFrame : function(){
var config = meteo.config;
// récupère l'élément html (select) qui contient la liste des stations
var select = document.getElementById(config.stationsSelectorId);
// récupère la frame qui affichera les infos mises à jour
var frame = document.getElementById(config.detailFrameId);
// mets à jour le contenu de la frame --> il suffit de changer la src...
frame.src = select.value + '/noaa2/rapports-mensuels.php';
// empêche le formulaire d'être soumis
// (ce qui arrive normalement lorsuq'on clique sur un bouton submit)
return false;
},
initialiserBouton : function(){
// Récupère le bouton qui permet de mettre à jour la frame
var button = document.getElementById(meteo.config.updateButtonId);
// définit le raffraichissement comme résultat d'un click du bouton
button.onclick = meteo.raffraichirFrame;
}
};
window.onload = function(){
// Initialise le bouton (lui définit son action onclick)
// on le fait dans un window.onload car alors on est sûr
// que la page est chargée et donc que le bouton existe déjà !
meteo.initialiserBouton();
}
</script>
</head>
<body>
<div align="center">
<h2>--- Station météo Champniers ---</h2>
<div align="center">
<table width="1000" border="1" align="center">
<tr>
<td width="250"><div align="center"><a href="meteo.php">Actuellement </a></div></td>
<td width="250"><div align="center"><a href="24.php">Dernieres 24 heures</a></div></td>
<td width="250"><div align="center"><a href="noaa.php">Noaa</a></div></td>
<td width="250"><div align="center"><a href="noaacompare.php">Comparaisons</a></div></td>
</tr>
</table>
</div>
<br/>
<table width="1000" border="1">
<tr>
<td>
<form method="GET" action="">
<!-- Liste déroulante contenant les url de base. Elle pourra être générée et remplie en php-->
<select id="stations-list">
<option value="http://www.sebastien-humaux.fr" selected="selected">Champniers</option>
<option value="http://www.mouthiers-sur-boeme.meteoamikuze.com" >Mouthiers Sur Boeme</option>
<option value="http://www.gardes-le-pontaroux.meteoamikuze.com" >Le Pontarou</option>
</select>
<input id="update-station" type="submit" value="Afficher cette station" />
</form>
</td>
</tr>
<tr>
<td>
<!-- Frame de détail dont le contenu est mis à jour via clic sur le bouton "Afficher cette station" -->
<iframe id="station-detail" src="http://www.mouthiers-sur-boeme.meteoamikuze.com/noaa2/rapports-mensuels.php" name="NOAA" width="667" height="2810" scrolling="yes" frameborder="0"> </iframe>
</td>
</tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment