• Aucun résultat trouvé

[PDF] Cours maps jQuery : methodes et fonctions | Cours jquery

N/A
N/A
Protected

Academic year: 2021

Partager "[PDF] Cours maps jQuery : methodes et fonctions | Cours jquery"

Copied!
30
0
0

Texte intégral

(1)

MAPS - JQUERY

Modal Web

javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0

(2)

Contenu

Jquery

(3)

Application Web

Ecole Polytechnique

http://www.polytechnique.fr/index.php

C:\xam

pp\htd

ocs\index .php

PHP

Javascript

Ajax

(4)

Javascript / Jquery

Javascript est exécuté par le client (navigateur web)

!

Pas d’interaction avec le serveur

! Sauf pour AJAX (Asynchronous Javascript And Xml)

!

Permet de modifier la page affichée

! Montrer / cacher des éléments

! Formulaires à nombre de champs variables ! Vérification à priori de champs saisis

! Affichage de cartes, Geolocalisation …

javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0

(5)

Principe

I/ Identifier des objets

Exemple :

- Un div précis

- Tous les éléments de la classe ‘parNormal’

- Tous les liens

II/ Changer leur style

Exemple :

- couleur de fond

- Dimensions

(6)

I/Sélectionner des objets

Il faut pouvoir trouver les objets:

On va utiliser les sélecteurs comme pour CSS:

Exemple :

Sélectionnez les liens

Sélectionnez les paragraphes dans un élément div de classe bo Sélectionner 1 unique élément -> affectation d’un id

$("a")

$("div.bo p")

$("#divModal")

<div id= "divModal">...</div>

(7)

Modifiez les styles

Style:

Visibilité

Ajouter du texte

$("a").css("color", "red")

$("div.bo").hide()

$("div.bo").show()

$("div.bo").toggle()

$("div.bo").append("Fin du div")

$("div.bo").prepend("debut du div")

Change la couleur

des textes des liens

Cache / montre /

cache ou montre

(8)

Modifier les attributs

Source de l’image:

Récupérer la valeur d’un attribut

Jouons avec les class

$("img #cailloux").attr("src", "images/project.png")

$("img #monImg").attr("src")

(9)

Comment utiliser jquery

<head>

<script type="text/javascript"

src="js/jquery.min.js">

</script>

<script type= "text/javascript">

$(document).ready(function(){

$("a").css("color", "red");

}

</script>

</head>

On attend que la page soit

lue par le navigateur

On peut ensuite

modifier le document

On charge jquery. À récupérer sur le

site jquery.com

(10)

Un exemple simple

<html>

...

<body>

<div id= "c1" class= "mc">Voir la

solution 1

<div id= "tc1" class="tc" >

Voila la solution 1

</div></div>

<div id= "c2" class= "mc">Voir la

solution 2

<div id= "tc2" class="tc" >

Voila la solution 2

</div></div>

<div id= "c3" class= "mc">Voir la

solution 3

<div id= "tc3" class="tc" >

Voila la solution 3

</div></div>

<script language="javascript"

type="text/javascript">

$(document).ready(function(){

$("#tc1").toggle();

$("#c1").click(function() {

$("#tc1").slideToggle("slow");

}); });

</script>

Demo

(11)

Exemple simple (2)

<html>

...

<body>

<div id= "c1" class= "mc">Voir la

solution 1

<div id= "tc1" class="tc" >

Voila la solution 1

</div></div>

<div id= "c2" class= "mc">Voir la

solution 2

<div id= "tc2" class="tc" >

Voila la solution 2

</div></div>

<div id= "c3" class= "mc">Voir la

solution 3

<div id= "tc3" class="tc" >

Voila la solution 3

</div></div>

<script language="javascript"

type="text/javascript">

$(document).ready(function(){

$(".tc").toggle();

$(".mc").click(function() {

$("#t"+$(this).attr

("id")).slideToggle("slow");

}); });

</script>

Demo

(12)
(13)

Mise en page

<div style="float:left"> <ul>

<li >Dominique Rossin</ li>

<li >Olivier Serre</li> </ul>

</div>

<div style="float:right;" id="image">

<img src="images/rossin.jpg" alt="photo" id="photo" height="150px"/> </div> <script type="text/javascript"> $(document).ready(function() { $(".aPhoto").mouseover(function() { show($(this).attr("id")); }); });

function show(name) { $("#photo").attr('src','images/'+name); } </script>

class=

"

aPhoto

"

id=

"

rossin

"

class=

"

aPhoto

"

id=

"

serre

"

On récupère le id

de l element li

(14)

Problèmes

Javascript désactivé ?

On peut prévoir une photo de groupe par défaut !

Les transitions sont brutales ...

function show(name) {

$("#photo").stop(true,true).fadeOut("fast",

function () {

$("#photo").attr('src','images/'+name);

}).fadeIn("slow");

}

Stop les transitions

en cours

Efface la photo

PUIS change la

photo

PUIS affiche la

Chainage == callback

(15)

Formulaire à champs variables

Parcourir

Mot cle

Photo et Tag

OK

Ajout mot clé

Mot cle

<form action="chargePhoto.php" method="post"> <div id="formulaire"><div>

<input type="file" name="photo" /> Fichier </div>

<div> <input type="text" name="tags[]" /> Tag </div>

<div id="validation">

<input type="submit" value="OK" /> </div>

</div> </form>

(16)

<form action="chargePhoto.php" method="post"> <div id="formulaire"><div>

<input type="file" name="photo" /> Fichier </div>

<div> <input type="text" name="tags[]" /> Tag </div>

<div id="validation">

<input type="submit" value="OK" /> </div>

</div> </form>

<script language="javascript" type="text/javascript"> $(document).ready(function () {

$("#validation").prepend('<input type="button" id="ajoutTag" value="Ajout Tag" />'); $("#ajoutTag").click(function() {

$("#validation").before('<div> <input type="text" name="tags[]" /> Tag</div>'); }); } ); </script>

On ajoute le

bouton

En cas de clic on rajoute

un champ de tag

Tous les champs ont

même nom

(17)

Récupérer les Tags

<?php

foreach ($_POST['tags'] as $tag)

echo $tag.'<br />';

?>

!

Tags

est un tableau contenant chaque valeur des champs de nom

(18)

Ou suis-je ?

<script type="text/javascript"> function showMap(position) {

alert(position.coords.latitude+""+position.coords.longitude); }

// One-shot position request.

navigator.geolocation.getCurrentPosition(showMap); </script>

Attention, ne marche pas toujours, en test depuis Février

2010

(19)

Google Maps

Où ?

(20)

OpenLayers

On a un bloc (div)

On le transforme en carte

On ajoute des calques

e.g. : Un calque OpenStreetMap

<div id="divMap"></div>

map = new OpenLayers.Map("divMap");

map.addLayer(new OpenLayers.Layer.OSM());

<script src="utils/OpenLayers.js"

type="text/javascript"></script>

(21)

OpenLayers

<head>

<script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript">

var map, layer; function init() {

map = new OpenLayers.Map("map");

map.addLayer(new OpenLayers.Layer.OSM());

var lonLat = new OpenLayers.LonLat( 2.3164035,48.8165713) .transform(

new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 map.getProjectionObject() // to Spherical Mercator Projection

);

var zoom=12;

map.setCenter (lonLat, zoom); }

</script> </head>

<body onload="init()">

<div id="map" class="smallmap"></div> </body> </html>

Position centre

Equivalent

$(document).ready()...

id du div

(22)

Ajout de marqueurs

On crée un calque de marqueurs

On ajoute le calque sur la carte

On crée un marqueur

On ajoute des marqueurs sur le calque

var markers = new OpenLayers.Layer.Markers( "Markers" );

map.addLayer(markers);

var marker = new OpenLayers.Marker(lonLat);

(23)

Ajout des marqueurs

map = new OpenLayers.Map("map");

var osm = new OpenLayers.Layer.OSM(); map.addLayer(osm);

var lonLat = new OpenLayers.LonLat( 2.3164035,48.8165713) .transform(

new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 map.getProjectionObject() // to Spherical Mercator Projection

);

var zoom=12;

var markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers);

marker = new OpenLayers.Marker(lonLat); markers.addMarker(marker);

map.setCenter (lonLat, zoom);

Nouveau calque

(24)

Ajout d’une bulle de marqueur

On crée une bulle popup

On cache la popup

On déclenche une fonction lors de l’appui sur le marqueur

La fonction montre la popup

popup = new OpenLayers.Popup(null, lonLat,

new OpenLayers.Size(150,150), "<h1>World</h1>",

true);

popup.toggle();

marker.events.register("mousedown", marker, cliqueDessus);

function cliqueDessus(evt) { popup.toggle();

(25)

Ajout d’une bulle

.... CREATION CARTE ...

marker.events.register("mousedown", marker, cliqueDessus); //Gestion des evenements

map.setCenter (lonLat, zoom);

popup = new OpenLayers.Popup(null, lonLat, new OpenLayers.Size(150,150), "<h1>World</h1>", true); map.addPopup(popup); popup.toggle(); } function cliqueDessus(evt) { popup.toggle(); }

(26)

Récupération de coordonnées

Trigger lorsque clic sur carte

Récupération du point cliqué

Transformation dans les bonnes coordonnées

map.events.register('click', map, handleMapClick);

function handleMapClick(evt) {

var longlat = map.getLonLatFromViewPortPx(evt.xy);

var longlat2 = longlat.transform(

new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));

(27)

function init5() {

map = new OpenLayers.Map("map");

map.addLayer(new OpenLayers.Layer.OSM());

var lonLat = new OpenLayers.LonLat( 2.3164035,48.8165713) .transform(

new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 map.getProjectionObject() // to Spherical Mercator Projection

);

var zoom=12;

map.setCenter (lonLat, zoom);

map.events.register('click', map, handleMapClick); }

function handleMapClick(evt) {

var longlat = map.getLonLatFromViewPortPx(evt.xy);

var longlat2 = longlat.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));

alert("You clicked near " + longlat2.lat + " N, " + longlat2.lon + " E");

(28)

Enregister les coordonnées

Créez un formulaire

Créez un champ latitude et longitude

Remplir à l’aide de jquery

<form>

<input type="text" name="latitude" id="latitude" />

<input type="text" name="longitude" id="longitude" /> </form>

function handleMapClick2(evt) {

var longlat = map.getLonLatFromViewPortPx(evt.xy);

var longlat2 = longlat.transform(new OpenLayers.Projection("EPSG: 900913"),new OpenLayers.Projection("EPSG:4326"));

$("#latitude").val(longlat2.lat); $("#longitude").val(longlat2.lon);

(29)

Localisation adresse : Google

Appel au geocoder

On prend la première réponse

On récupère la latitude et la longitude.

var requete = $("#search").val();

geocoder = new google.maps.Geocoder();

geocoder.geocode({'address':requete}, traiteResult);

function traiteResult(response, status) {

if (status == google.maps.GeocoderStatus.OK) { var firstReponse = response[0];

var latitude = firstReponse.geometry.location.lat(); var longitude = firstReponse.geometry.location.lng();

(30)

Exemple

function traiteResult(response, status) {

if (status == google.maps.GeocoderStatus.OK && response[0]) { var firstReponse = response[0];

var latitude = firstReponse.geometry.location.lat(); var longitude = firstReponse.geometry.location.lng();

var lonLat = new OpenLayers.LonLat( longitude,latitude) .transform(

new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 map.getProjectionObject() // to Spherical Mercator Projection

);

var zoom=10;

map.setCenter (lonLat, zoom); }

Références

Documents relatifs

The modelling scale at the bundle pattern level and the decoupling between the fibers and the matrix makes it possible to represent the damage mechanisms and the local phenomena in

Par analyse de ségrégation, un locus a été trouvé en 19q13.3 dans une région où se trouve le gène codant pour les chaînes légères (L) de la ferritine.. La ferri- tine, qui a

Outre cette utilisation dans une optique sociale fonctionnelle, l’utilisation des stéréotypes peut aussi, plus simplement, répondre à la fonction cognitive, en

Cette étude est intéressante, car les deux groupes étant équivalents au départ, les effets observés peuvent être plus directement imputables aux effets de la pratique musicale,

Une autre particularité de Vaggione, source également de difficultés pour tout exposé systématique de sa pensée musico-théorique, réside dans sa capacité à

Le troisième acte s’ouvre, comme dans le premier, au son de la voix du vieux poète, mais cette fois, on ne le voit plus sur le grand écran, il nous laisse juste

La représentation de La Princesse d’Élide au cœur des Plaisirs de l’île enchantée s’inscrit dans le cadre des rivalités multiples qui opposent la comédie-ballet au

Les directeurs de l'Académie royale de musique prennent donc cette demande en considération et vont même plus loin, en programmant régulièrement des spectacles couplés,