Posts tagged Javascript
Google Maps API en PHP
25/05/09
Voici une classe PHP assez complète qui vous permet de manipuler facilement des Google Maps. Cette classe gère pas mal de choses au niveau du javascript d’une gmap comme la gestion de catégories de marqueurs, les itinéraires, l’insertion de flux XML, la clusterisation (regroupement de marqueurs), l’affichage d’infobulles, la geolocalisation d’une adresse etc…On utilise donc cette classe pour générer le javascript dont on pourra se servir dans notre code HTML.
On peut facilement obtenir des rendus de ce style :
Je suis ouvert à toutes remarques éventuelles pour l’amélioration du script.
Explorateur de fichier en AJAX
11/03/09
Dans le cadre de différents projets, on a souvent besoin d’un explorateur de fichier sur le serveur. Cela permet, sans aucun accès extérieur, de modifier les fichiers d’un serveur.
Nous avions l’habitude d’utiliser essentiellement 2 logiciels différents :
http://quixplorer.sourceforge.net/ (fonctionnel mais pas très riche et pas ajaxé)
http://extplorer.sourceforge.net/ (basé sur extjs donc joli, mais un peu lourd)
Récemment j’ai eu l’occasion d’en découvrir un nouveau, qui est bien plus polyvalent que tous les autres que j’ai pu tester. Il permet de faire plein de jolies choses : prévisualiser des images/flv/…, colorisation syntaxique, etc…Je vous laisse découvrir la démo plus que convaincante.
http://www.ajaxplorer.info/
Autocompletion en jQuery
7/02/09
Voici un plugin jQuery facilitant l’autocompletion : Autocomplete. Il est très simple d’utilisation et il est facilement customisable. Comme d’habitude, rien de mieux qu’un exemple concret d’utilisation pour comprendre. Le fonctionnement de cet exemple est très simple et cumule des notions abordées auparavant. Au chargement de la page, l’ajax interroge un script PHP qui retourne un flux XML contenant plusieurs éléments (pouvant être issus d’une requête SQL). Il ne reste alors plus qu’a appeler la fonction pour déclencher l’autocompletion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.pack.js"></script>
<style type="text/css">
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
/*background: white url('indicator.gif') right center no-repeat;*/
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
</style>
<script type="text/javascript">
// Lorsque la totalité de la page est chargée
$(document).ready(function() {
$.ajax({ // Requete ajax
type: "POST", // envoie en POST
url: "test.php", // url cible du script PHP
async: true, // mode asynchrone
data: "", // données envoyées
success: function(xml){ // Lorsque le PHP à renovyé une réponse
var elementsArray = new Array();
$(xml).find('element').each(function(){ // pour chaque "element"
elementsArray.push($(this).text()); // ajout dans le tableau
});
$("#example").autocomplete(elementsArray); // activation de l'autocompletion
}
});
});
</script>
</head>
<body>
Autocompletion : <input id="example" />
</body>
</html>
header ("content-type: text/xml");
echo "
<root>
<element>element 1</element>
<element>element 2</element>
<element>element 3</element>
<element>element 4</element>
<element>element 5</element>
<element>element 6</element>
<element>element 7</element>
<element>element 8</element>
<element>element 9</element>
<element>element 10</element>
<element>element 11</element>
</root>";
Tout ca pour donner :
