Programmation
RIA : drag'n drop avec jQuery
27
www.lpmagazine.org
encore convaincu par ce choix, lisez la suiteet vous verrez qu'il est en plus très faciled'utilisation!
JQuery : les bases
Maintenant que les présentations sont faitesnous allons pouvoir entrer dans le vif dusujet. Au menu : fonctionnement global,les sélecteurs jQuery et quelques effets de base pour s'amuser. An de partir sur des bases communes, vous allez créer un dossier (
tuto.jquery.bases
par exemple) dans lequelvous allez télécharger jQuery et créer 3 -chiers. Un pour le XHTML (
index.html
/ Lis-ting 1), un pour le CSS (
style.css
/ Listing 2)et un pour le JavaScript (
script.js
). Je ne lescommente pas car il n'y a rien de particulier dans ces deux chiers.
Pré-requis
Deux notions essentielles vont être utili-sées tout au long de cet article : le DOM etl'AJAX. Nous allons faire un peu de lumièresur ces acronymes qui, même si ils peuvent paraître triviaux pour certains d'entre vous,ont leur importance dans le développementweb et plus particulièrement avec jQuery(pour le DOM tout du moins).DOM signie
Document Object Model
ou en français
Model Objet du Document
.C'est en fait une représentation sous formed'arbre de votre document XHTML. On parlesouvent d'arbre DOM. Chaque élément devotre page va correspondre à un nœud devotre arbre. Un nœud peut avoir un parent (siil n'en a pas ce nœud s'appelle la racine), unou plusieurs frère(s) ainsi que un ou plusieursls. JQuery permet de naviguer très facile-ment à l'intérieur de cette arborescence.Vient le tour de l'AJAX. Tout déve-loppeur web a déjà entendu ce mot, qu'ilutilise cette technologie ou non. AJAX veutdire
Asynchronous JavaScript And XML
(
XML et JavaScript asynchrones
). La renom-mée de cette technologie vient de l'explosiondu web 2.0. Elle permet de faire une requêteau serveur sans forcément recharger toutela page, d'où le
Asynchronous
. Cela a pour effet immédiat de limiter les échanges dedonnées entre le client et le serveur et doncd'améliorer considérablement la vitesse dechargement d'un nouveau contenu. Et, vousl'aurez compris, l'expérience utilisateur s'entrouve grandement améliorée. Maintenantque vous savez cela, la suite devrait vous paraître limpide.
Le fonctionnement global de jQuery
JQuery est un framework codé en objet. Nous allons donc utiliser ses méthodes.
Sesméthodes? Mais sur qui? Sur quoi?
Et biensur un objet jQuery! Nous devons donc eninstancier un.Un objet jQuery est en fait un tableaud'éléments du DOM (
Document Object Mo-del
) de votre document. Il est toujours sousla forme
$("monSelecteur ")
, où
monSe-lecteur
va être votre critère de recherchedans le DOM.Autrement dit, instancier un objet jQuerysimplie grandement l'écriture des
getEle-mentById
,
getElementsByTagName
et
getE-lementsByName
. Un exemple pour clarier le tout :
document.getElementById("monId").maMethode();// méthode classique$("#monId").maMethode();// avec jQuery
Comme vous avez pu le remarquer, j'ai uti-lisé le dièse devant l'identiant en jQuery.Cela vient du fait qu'un objet jQuery prenden paramètre un sélecteur CSS ou XPath.De manière concrète, il peut être utile desélectionner tout le document, notamment pour être sûr de ne pas accéder à un élémentavant qu'il ne soit chargé. Nous allons donc préparer notre chier
script.js
en créantun objet jQuery qui contiendra tout l'arbre
Listing 1.
Base de travail en XHTML
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Un gros hello world</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body>
<a href="http://www.jquery.com" title="jquery">jQuery</a>
<a href="#" id="helloWorld" title="hello world">Hello world</a>
<a href="#" id="show" title="show">Show</a>
<a href="#" id="hide" title="hide">Hide</a>
<a href="#" id="hover" title="hover">Hover</a>
<p>Vous pouvez mettre ici le texte que vous voulez. Un bon vieux
Lorem Ipsum par exemple.</p>
</body>
</html>
Listing 2.
Base de travail en CSS
.bordure{border:1px solid black}
.red{background-color:red}
.green{background-color:green}
Listing 3.
Appliquer la classe .bordure à notre paragraphe
$(document).ready(function(){$("p").addClass("bordure");
});
Listing 4.
Appliquer la classe .red aux liens externes
$(document).ready(function(){$("p").addClass("bordure");
$("a[@href*=http://]").addClass("red");
});
Si vous avez fait un peu de JavaScript, dePHP et de SQL vous ne devriez pas êtredépaysés!
Ce qu'il faut savoir...
Add a Comment