Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Utiliser jQuery dans Dreamweaver

jQuery est une bibliothèque de fonctions javascript emballées qui vous permettent de créer une interaction vraiment cool sur votre site web sans connaître tous les pouvoirs du javascript.

Ce guide est une introduction à la bibliothèque jQuery. Connaissance de base de JavaScript et le modèle objet de document (DOM) est nécessaire. Il commence à partir du sol et tente d'expliquer les détails si nécessaire. Il couvre un simple bonjour tout le monde par exemple, le sélecteur et les bases de l'événement, AJAX, FX et de l'utilisation et la création de plugins.

Ce guide ne contient pas de "Click Me" exemples. L'intention de ne fournir que "me copier" le code est de vous inviter à l'essayer pour vous-même. Copier un exemple, voir ce qu'il fait, et de le modifier.

Contenus
1 Installation
2 jQuery Bonjour
3 Trouvez-moi: à l'aide des sélecteurs et des événements
4 Evaluez-moi: L'utilisation d'Ajax
5 Animez-moi: Utilisation des effets

installation

Pour commencer, nous avons besoin d'une copie de la bibliothèque jQuery, qui nous pouvons obtenir de la page de téléchargement principale. Le Starterkit jQuery fournit quelques balises et CSS pour travailler avec. Après le téléchargement et l'extraction de son contenu nous avons mis jquery.js dans le même répertoire et starterkit.html ouvert et custom.js avec votre éditeur favori et starterkit.html avec un navigateur.

Maintenant nous avons tout à commencer par le fameux "Bonjour tout le monde" par exemple.

Bonjour jQuery

Nous commençons avec une page HTML vide:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// nous allons ajouter notre code Javascript ici
</script>
</head>
<body>
<!-- nous allons ajouter notre contenu HTML ici-->
</body>
</html>

Cette page se charge seulement de la bibliothèque jquery.js (assurez-vous que l'URL pointe à l'endroit où vous avez enregistré votre copie de jQuery! Cet exemple suppose que vous les rangez dans le même répertoire que ce fichier par exemple). Deux commentaires indiquer où nous allons étendre ce modèle avec le code.

Comme presque tout ce que nous lors de l'utilisation de jQuery lit ou manipule le modèle objet de document (DOM), nous devons veiller à ce que nous commencer à ajouter des événements, etc dès que le DOM est prêt.

Pour ce faire, nous enregistrons un événement prêt pour le document.

$(document).ready(function() {
// faire des choses quand DOM est prêt
});

Mettre une alerte sur cette fonction n'a pas beaucoup de sens, comme une alerte n'exige pas le DOM pour être chargé. Permet donc d'essayer quelque chose un peu plus sophistiqué: Afficher une alerte lorsque vous cliquez sur un lien.

Ajoutez le code suivant à l'<body>:

<a href="">Lien</a>

Maintenant mettre à jour le gestionnaire de $ (document) prêt.:

$(document).ready(function() {
$("a").click(function() {
alert("Bonjour le Monde!");
});
});

Cela devrait afficher l'alerte dès que vous cliquez sur le lien. Vous êtes maintenant prêt à copier et coller ce script dans votre fichier custom.js. Ensuite, ouvrez starterkit.html dans le navigateur et cliquez sur aucun lien. Vous devriez voir une fenêtre pop-up avec "Bonjour tout le monde!" un message quel que soit le lien a été cliqué.

Jetons un coup d'oeil à ce que nous faisons: $ ("a") est un sélecteur jQuery, dans ce cas, il sélectionne tous les éléments a. $ Lui-même est un alias pour le jQuery "classe", donc $ () construit un objet jQuery nouvelle. La fonction click () que nous appelons la prochaine est une méthode de l'objet jQuery. Il se lie à un événement de clic à tous les éléments sélectionnés (dans ce cas, un élément d'ancrage unique) et exécute la fonction fournie lors de l'événement se produit.

Ceci est similaire au code suivant:

<a href="" onclick="alert('Bonjour le Monde!')">Lien</a>

La différence est assez évidente: Nous n'avons pas besoin d'écrire un onclick pour chaque élément. Nous avons une séparation claire de la structure (HTML) et le comportement (JS), tout comme nous structure distincte et la présentation en utilisant CSS.

C'est dans cet esprit, nous explorons les sélecteurs et des événements un peu plus loin.

Trouvez-moi: à l'aide des sélecteurs et des événements

jQuery propose deux approches pour sélectionner des éléments. La première utilise une combinaison de sélecteurs CSS et XPath passés comme une chaîne au constructeur jQuery (par exemple $ ("div> ul a")). La seconde utilise plusieurs méthodes de l'objet jQuery. Les deux approches peuvent être combinées.

Pour essayer certains de ces sélecteurs, nous sélectionnons et modifier la première liste ordonnée dans notre starterkit.

Pour commencer, nous voulons pour sélectionner la liste elle-même. La liste a un ID "orderedlist". En JavaScript classique, vous pouvez le sélectionner en utilisant document.getElementById ("orderedlist"). Avec jQuery, nous le faisons comme ceci:

$(document).ready(function() {
$("#orderedlist").addClass("red");
});

Le starterkit fournit une feuille de style avec une classe "rouge" qui ajoute simplement un fond rouge. Par conséquent, lorsque vous rechargez la page dans votre navigateur, vous devriez voir que la première liste ordonnée a un fond rouge. La deuxième liste n'est pas modifié.

Maintenant passons à ajouter des classes un peu plus à des éléments enfants de cette liste.

$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});

Ceci permet de sélectionner tous les lis enfants de l'élément avec le orderedlist id et ajoute la classe «bleu».

Maintenant quelque chose d'un peu plus sophistiqué: Nous voulons ajouter et supprimer la classe quand l'utilisateur survole l'élément li, mais seulement sur ??le dernier élément dans la liste.

$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});

Avec ces sélecteurs et des événements, vous pouvez déjà faire beaucoup de choses, mais il ya plus.

$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});
});

find () vous permet de continuer à rechercher les descendants des éléments déjà sélectionnés, donc $ ("# orderedlist"). find ("li") est essentiellement le même que $ ("# orderedlist li").

each () itère sur chaque élément et permet un traitement ultérieur. La plupart des méthodes, comme addClass (), utilisez each () eux-mêmes.

Dans cet exemple, append () est utilisée pour ajouter du texte à lui et le définir comme texte à la fin de chaque élément.

Une autre tâche que vous souvent faire face est d'appeler des méthodes sur des éléments DOM qui ne sont pas couverts par jQuery. Pensez à une forme que vous souhaitez réinitialiser après l'avoir soumis avec succès via AJAX.

$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});
});

Ce code sélectionne l'élément première forme et la réinitialisation des appels () sur lui. Dans le cas où vous avez eu plus d'un formulaire, vous pouvez aussi le faire:

$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});

Ce serait de sélectionner toutes les formes au sein de votre document, itérer sur eux et faire appel à reset () pour chaque. Notez que dans une fonction. Each (), il s'agit de l'élément réel. A noter également que, depuis le reset () la fonction appartient à l'élément de formulaire et de ne pas l'objet jQuery, nous ne pouvons pas tout simplement appeler $ (la «forme»). Reset () pour réinitialiser toutes les formes sur la page.

Un défi supplémentaire est de sélectionner seulement certains éléments d'un groupe de semblables ou identiques. jQuery fournit filter () et non () pour cela. Tandis que le filtre () permet de réduire la sélection des éléments qui correspondent à l'expression de filtre, pas () fait le contraire et supprime tous les éléments qui correspondent à l'expression. Pensez à une liste non ordonnée où vous voulez sélectionner tous les éléments li qui n'ont pas d'enfants ul.

$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});

Ce sélectionne tous les éléments li qui ont un élément ul comme un enfant et supprime tous les éléments de la sélection. Par conséquent tous les éléments li obtenir une frontière, sauf celui qui a un enfant ul.

La syntaxe [expression] est tirée de XPath et peut être utilisé pour filtrer par attributs. Peut-être que vous voulez sélectionner tous les points d'ancrage qui ont un attribut name:

$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});

Cela ajoute une couleur de fond à tous les éléments d'ancrage avec un attribut name.

Plus souvent que la sélection des ancres par nom, vous pourriez avoir besoin pour sélectionner ancres par leur attribut "href". Cela peut être un problème que les navigateurs se comportent tout à fait incompatible lors du retour ce qu'ils pensent de la "href" la valeur est (Remarque: Ce problème a été résolu récemment, en jQuery, disponible dans toutes les versions après 1.1.1). Pour faire correspondre une partie seulement de la valeur, nous pouvons utiliser le contient sélectionner "* =" au lieu d'un signe égal ("="):

$(document).ready(function() {
$("a[href*='/content/gallery']").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});

Jusqu'à présent, tous les sélecteurs ont été utilisés pour sélectionner les enfants ou filtrer la sélection actuelle. Il ya des situations où vous devez sélectionner les éléments précédents ou suivants, appelés frères et sœurs. Pensez à une page de FAQ, où toutes les réponses sont cachées d'abord, et montré, lorsque la question est cliqué. Le code jQuery pour cela:

$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle();
});
});

Ici, nous utilisons un certain enchaînement de réduire la taille du code et d'obtenir de meilleures performances, comme '# faq n'est sélectionné qu'une seule fois. En utilisant end (), le premier find () est annulée, afin que nous puissions commencer la recherche avec le prochain find () dans notre élément # faq, au lieu des enfants dd.

Dans le gestionnaire de clic, la fonction passée à la méthode click (), nous utilisons $ (this). Next () pour trouver le frère suivant à partir de la dt en cours. Cela nous permet de sélectionner rapidement la réponse à la suite de la question cliqué.

En plus de frères et sœurs, vous pouvez également sélectionner des éléments parents (aussi connu comme les ancêtres de ceux qui sont plus familiers avec XPath). Peut-être que vous voulez mettre en évidence le point qui est le parent de l'utilisateur survole le lien. Essayez ceci:

$(document).ready(function(){
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});
});

Pour tous les éléments d'ancrage plané, le paragraphe parent est recherché et une classe "highlight" ajoutés et supprimés.

Permet de faire un pas en arrière avant de continuer: jQuery est beaucoup de choses sur de rendre le code plus court et donc plus facile à lire et à maintenir. Ce qui suit est un raccourci pour le $ (document) prêt (rappel) la notation.:

$(function() {
// code à exécuter quand DOM soit prêt
});

Appliqué à "Bonjour le Monde!" par exemple, nous nous retrouvons avec ceci:

$(function() {
$("a").click(function() {
alert("Bonjour le Monde!");
});
});

Maintenant, avec les bases à la main, nous voulons explorer d'autres aspects, à commencer par AJAX.

 

Notez-moi: En utilisant Ajax

Dans cette partie, nous écrire une petite application Ajax, qui permet à l'utilisateur de taux de quelque chose, tout comme cela se fait sur ??youtube.com.

Nous avons besoin d'un peu de code serveur pour cela. Mon exemple utilise un fichier php qui lit le "rating" paramètre et retourne le nombre de votes et l'estimation moyenne.

Nous ne voulons pas que cet exemple fonctionne sans Ajax, même si il peut être possible, nous avons donc générer le balisage nécessaire avec jQuery et l'ajouter à un conteneur div avec un ID de «notation».

$(document).ready(function() {
// generate markup
$("#rating").append("Please rate: ");

for ( var i = 1; i <= 5; i++ ) {
$("#rating").append("<a href='#'>" + i + "</a> ");
}

// add markup to container and apply click handlers to anchors
$("#rating a").click(function(e) {
// stop normal link click
e.preventDefault();

// send request
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format and output result
$("#rating").html(
"Thanks for rating, current average: " +
$("average", xml).text() +
", number of votes: " +
$("count", xml).text()
);
});
});
});

Cet extrait génère cinq éléments d'ancrage et ajoute à l'élément conteneur avec l'id "Note". Ensuite, pour chaque ancrage à l'intérieur du récipient, un gestionnaire de clic est ajouté. Lorsque l'ancre est activé, après une demande est envoyée à rate.php avec le contenu de l'ancre en tant que paramètre. Le résultat retourné comme XML est ensuite ajouté au récipient, en remplacement des ancres.

Un problème très commun rencontré lors du chargement de contenu par l'Ajax est le suivant: Lors de l'ajout de gestionnaires d'événements à votre document qui devrait également s'appliquer au contenu chargé, vous devez appliquer ces gestionnaires après le contenu est chargé. Pour éviter la duplication de code, vous pouvez déléguer à une fonction. Exemple:

function addClickHandlers() {
$("a.remote", this).click(function() {
$("#target").load(this.href, addClickHandlers);
});
}
$(document).ready(addClickHandlers);

Maintenant addClickHandlers est appelé une fois lorsque le DOM est prêt, puis à chaque fois quand un utilisateur a cliqué sur un lien avec la télécommande de classe et le contenu a fini de charger.

Notez la requête $ ("a.remote", this), cela est passé comme un contexte: Pour l'événement document prêt, cela se réfère à ce document, et il cherche donc l'ensemble du document pour des chevilles avec classe distante. Lorsque addClickHandlers est utilisé comme un rappel pour load (), cela se réfère à un élément différent: Dans l'exemple, l'élément avec ID cible. Cela empêche que l'événement de clic est appliquée encore et encore pour les mêmes liens, provoquant un plantage par la suite.

Un autre problème courant avec les rappels sont des paramètres. Vous avez spécifié votre rappel, mais besoin de passer un paramètre supplémentaire. La meilleure façon d'y parvenir est d'envelopper le rappel dans une autre fonction:

// get some data
var foobar = ...;

// specify handler, it needs data as a paramter
function handler(data) {
//...
}

// add click handler and pass foobar!
$('a').click(function() {
handler(foobar);
});

// if you need the context of the original handler, use apply:
$('a').click(function() {
handler.apply(this, [foobar]);
});

Avec Ajax ce simple, nous pouvons couvrir beaucoup de «Web 2.0». Maintenant que nous avons examiné certains base Ajax, nous allons ajouter quelques effets simples et des animations à la page.

Animez-moi: Utilisation des effets

Animations simples avec jQuery peut être réalisé avec show () et hide ().

$(document).ready(function(){
$("a").toggle(function(){
$(".stuff").hide('slow');
},function(){
$(".stuff").show('fast');
});
});

Vous pouvez créer n'importe quelle combinaison d'animations avec animate(), par exemple. une diapositive avec un fondu:

$(document).ready(function(){
$("a").toggle(function(){
$(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
},function(){
$(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
});
});

   

 

   

 

 

Chaîne YouTube

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site

-