Article en plusieurs parties : 1 2 3 4 5
Utiliser jQuery sous dotclear 1.2.5 ?
Depuis que j’ai commencé à améliorer l’ergonomie de mon blog, je cherche à régler une bonne fois pour toute le sort de cette blogroll d’un km de haut qui ne demande qu’à s’agrandir. J’ai déjà toggléClassé le calendrier et les archives, et pour cette blogroll je suis allé chercher mon pote jQuery.
Une blogroll avec jQuery
Pour commencer, je vous propose de parcourir rapidement la structure HTML de cette liste sortie du four :
<div id="links">
<h2>blogroll</h2>
<h3>Titre 1</h3>
<ul>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
</ul>
<h3>Titre 2</h3>
<ul>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
</ul>
</div>
Dans un premier temps, je veux masquer tous les éléments ul et garder les balises h2 et h3. L’objectif est que la liste ul s’affiche et disparaisse d’un clic sur la balise h3 qui la précède sans modifier le code HTML.
Dans les CMS, de nombreuses balises HTML sont générées par des fonctions situées souvent en amont du dossier templates. Heureusement, la plupart du temps, les appels de fonctions sont personnalisables comme le calendrier dans Dotclear 1.2.5 :
<?php
dcCalendar('<table id="calendrier" summary="Calendrier">%s</table>');
?>
Le tableau possède déjà un indentifiant et il est très facile d’ajouter la classe just-hide-it { display: none; } pour le masquer au chargement de la page. Mais tous les appels de fonction n’offrent pas cette commodité (ou alors je n’ai pas bien cherché les options disponibles). Je pense notamment à la blogroll (<?php dcBlogroll::linkList(); ?>) qui ne dispose pas de paramètres.
Pour masquer les ul de cette liste avec CSS, il suffit d’écrire #links ul {display: none } et le tour est joué. Là où CSS ne peut rien pour moi, c’est pour ajouter l’événement onclick sur la balise h3. Pour donner l’apparence d’un lien, il existe la pseudo-classe :hover. Or, Internet Explorer n’applique :hover que sur les liens a…
Définir un événement onclick
Résumons. L’idéal serait d’avoir une fonction pour atteindre les balises ul et h3, masquer la liste et définir un événement onclick sur le titre. C’est dans les cordes de l’ami jQuery. Avantage supplémentaire, le code ne nécessite pas d’explications de folie, tant la syntaxe est abordable. Mais jugez plutôt :
$(document).ready(function() {
$('#links ul').hide();
$('#links h3').css('cursor','pointer').click(function() {
$(this).next('ul').slideToggle('slow')
});
});
Cette méthode slideToggle() fait partie du package de base. Pour d’autres effets à la script.aculo.us, allez voir du côté d’Interface.
A côté de next(), il existe une palanquée d’autres méthodes pour manipuler le DOM. A ce sujet je vous conseille la lecture de jquery.info pour avoir une idée des sélecteurs et des événements.
Thanh de son côté nous offre une aide à la saisie d’information dans un formulaire sur un plateau avec une utilisation judicieuse de la méthode parent() en action.
Ca ne coûte pas plus cher de tout jQueryser !
Pour info, voici les fonctions que j’ai utilisées pour apporter un peu d’interactivité à ma sidebar. Je pense que j’aurais pu mettre l’ensemble dans une seule fonction. Mais pour un début, j’ai jugé plus prudent de séparer chaque partie. Si vous avez des idées pour optimiser l’ensemble, partagez, il en restera toujours quelque chose ;)
$(document).ready(function() {
$('#links h3').hover(function() {
$(this).css('color','#cf3500');
},function() {
$(this).css('color','#ff7200');
});
$('#links>h3:first').css('font-size','1.5em');
$('#links>h3:first a').css('font-size','1.5em');
});
Cette fonction utilise la méthode hover() pour simuler la pseudo-classe CSS :hover sur les éléments passés en argument à la fonction, en l’occurence $(‘#links h3′). Ensuite, j’ai voulu que le premier titre h3 contenu dans #links s’affiche dans un corps plus important grâce au sélecteur :first (:last existe aussi). On retrouve la méthode css() qui applique directement les valeurs spécifiées. Il existe également une fonction addclass() qui permet d’attribuer… une classe.
Le calendrier et les archives
Je veux aussi que le calendrier et les archives subissent le même sort :
$(document).ready(function() {
$('#links ul, #calendar table, #archives ul').hide();
$('#links h3, #calendar h2, #archives h2, #categories h2').css('cursor','pointer').click(function() {
$(this).next().slideToggle('slow');
});
});
Cela implique que les titres h2 sont également de la partie ! Voyez comme il est facile de tout grouper. Ensuite, à la place du next(‘ul’) que j’ai évoqué plus haut, j’ai utilise next() tout seul : en l’absence de précision, l’effet slideToggle() s’applique ainsi directement à l’élément suivant.
Ajouter un effet hover aux titres principaux
Reste à styler les balises h2 :
$(document).ready(function() {
$('#calendar h2, #archives h2, #categories h2').hover(function() {
$(this).css('border-bottom','1px dotted #065f00').css('color','#065f00');
},function() {
$(this).css('color','#9E0050');
});
});
Ajouter les gestionnaires dans le code HTML…
Non, trop pas ! Avec un framework comme jQuery il est inutile de polluer le code HTML, puisque $(document).ready(function() mettra sa puissance de feu à votre service dès le chargement du DOM, sans attendre que le document soit totalement chargé. « Au revoir » donc, les body onload= »javascript:alert(‘Bonjour !’) ». Dites désormais « bonjour » à $(document).ready(function() { alert(‘Au revoir !’) });
Mise en place de plugins trouvés sur jquery.info »
Article en plusieurs parties : Page précédentePage suivante
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Mazette, ça c’est une revue complète !
Le seul défaut de jQuery, c’est quand tu combines pas mal d’instructions, on s’y perd un peu dans les ) et }….
Pas le temps de lire maintenant, mais je sens que c’est l’article qu’il me fallait pour me lancer dans JavaScript avec jQuery !!
bookmarké !
Juste pour dire que tes post sont toujours aussi impressioants.
Bravo mon br1o !
indica > Bah… en ce moment j’ai un peu de temps libre. Et puis je n’allais pas garder tout ça pour moi ;)
giz 404 > J’espère que tu ne sera pas déçu… Tiens-moi au courant !
Fetard > C’est clair qu’il faut rester vigilant, mais comme tu l’aura remarqué, je n’ai pas encore de problème de lisibilité. J’espère que ça viendra vite :)
Excellent article. Je bookmarke. C’est du bon.
Pareil, félicitations. J’utilise prototype et script.aculo.us après Moofx (oui, j’ai voyagé…) et JQuery me tente assez maintenant. A suivre.
( tiens, "je reviendrai" y’a pas de "s"… ;) )
Tiens, ça fait plaisir de te lire, Gilles ;)
Et hop, blogrollmarké !
Bon, ça fait deux fois que je me fais doubler sur un sujet d’article aujourd’hui. Du coup j’abandonne mon article su jQuery et je renvoie les gens chez toi. ;)
kynerion > Oups ! c’est corrigé ;)
Aymeric > Whoa! j’espère qu’il me reste assez de bande passante pour accueillir tout le monde ;)
Ohh tu sais, ce n’est pas forcément mon blog qui va te bouffer le plus de bande passante. ;)
jQuery c’est bon.
Codez en.
Jquery c’est (très) bien. Le javascript non intrusif, c’est encore mieux.
A ce sujet, le coup des coins arrondis en javascript je trouve ça un poil batard; pour moi c’est le boulot des feuilles de style. Dommage que les CSS3 soit encore si peu implémenté…
Fred Bird > css 3 ? Je te trouve bien optimiste ou bien patient : si on suit le tempo actuel, il nous faudra certainement attendre les css 4 pour espérer voir la version 3 implémentée sur les principaux navigateurs de 2015 ;)
Xuxu > t’as pas des devoirs à faire, toi ? :p
Au niveau des mes devoirs, je vais faire comme au collège, c’est à dire les rendre en retard ^^ (ca se trouve "si on suit le tempo actuel", je te répondrais en live au prochain apéro blog :p)
lol, ok xuxu, y a pas de problème : j’apporterai un crayon et du papier au prochain apéro :)
Pour ma part, j’avais déjà découvert JQuery mais c’est un très long, très bon et assez complet article que tu nous as fait là (encore une fois! ;-) ), intéressant et parfait pour une première immersion. :-)
Vivement DC2 ! ;-)
Je vois que pour chaque comportement ajouté à la page tu ajoutes un bloc $(document).ready(function(){…}), pourquoi ne pas tout regrouper dans un unique bloc ?
Une version courte de $(document).ready(function(){}) existe, à savoir $(function(){…}) :-)
Comme tu es demandeur de suggestions d’optimisations, en voici quelques-unes :
1. la ligne $(‘#links>h3:first a’).css(‘font-size’,’1.5em’); ne sert à rien puisqu’il n’y a aucune balise de lien enfant du premier h3 du bloc #links (un oubli certainement).
2. suggestion de code pour « links on blogroll h3 » :
$(‘#links h3′)
.hover(function() { $(this).css(‘color’,'#cf3500′); },function() { $(this).css(‘color’,'#ff7200′); })
.eq(0).css(‘font-size’,’1.5em’); // équivalent à $("#links h3:first")
3. suggestion de code pour « show hide twitter et presentation » et « links h2 twitter et presentation », le tout étant réunit :
$(‘#presentation h2, #twitter h2′)
// masque #presentation p puis reviens à l’objet initial
.eq(0).next(‘p’).hide().end().end()
// modification du curseur
.css(‘cursor’,'pointer’)
// bind click
.click(function() { $(this).next().slideToggle(‘slow’); })
// bind hover
.hover(function() { $(this).css(‘color’,'#065f00′); }, function() { $(this).css(‘color’,'#9E0050′); });
4. il en subsiste certainement d’autres, mais il faudrait dans ce cas oublier la séparation en blocs logiques du code ^_^’
piouPiouM > Merci pour toutes ces suggestions :)
Au début j’avais tout mis en un seul $(document).ready(function() puis quand j’ai commencé à rédiger l’article, j’ai trouvé plus didactique de bien séparer, et puis… après, je me suis dit que si c’était plus lisible pour les lecteurs, ça le serait pour moi aussi !
Pour le point n° 1, il s’agit d’une erreur de logique : je voulais atteindre le premier lien enfant de la première balise h3 :(
N°2, j’ai modifié déjà pas mal de choses entre hier soir et ce matin, et là, j’ai utilisé $(‘#links ul:lt(3)’).show(); pour qu’une partie de la blogroll reste visible après avoir masque l’ensemble.
(à ce propos je ne comprend pas bien la différence entre les méthodes eq() et lt(), sachant que les valeurs sont censées commencer par zéro, mais qu’en mettant ’3′ ça prend les 3 premiers ul et non pas les 4 premiers…).
N°3 : je vais me pencher dessus un peu plus pour bien comprendre, notamment cette histoire de double .end() ;)
Merci encore, et à très bientôt j’espère :p
Je comprends mieux pourquoi tu t’es couché aussi tard l’autre soir ;-)
Brillant!
br1o > de rien :p
> Pour le point n° 1, il s’agit d’une erreur de logique : je voulais atteindre le premier lien enfant de la première balise h3
Oki, dans ce cas le code précédemment donné en 2. devient :
///
$(‘#links h3′)
.hover(function() { $(this).css(‘color’,'#cf3500′); },function() { $(this).css(‘color’,'#ff7200′); })
// équivalent à $("#links h3:first")
.eq(0).css(‘font-size’,’1.5em’)
// recherche du premier élément lien enfant de l’élément qui suit
// l’élément h3 (à savoir <ul />)
.next().find(‘a:first’).css(‘font-size’,’1.5em’);
///
> je ne comprend pas bien la différence entre les méthodes eq() et lt(), sachant que les valeurs sont censées commencer par zéro, mais qu’en mettant ’3′ ça prend les 3 premiers ul et non pas les 4 premiers…
La méthode eq() réduit le nombre d’éléments à celui dont l’index est passé en paramètre. L’index allant de 0 à n-1, eq(0) retourne logiquement le premier élément, eq(1) le deuxième, eq(2) le troisième, etc…
La méthode lt(), d’aspect similaire, réduit le nombre d’éléments à ceux qui précèdent l’élément dont l’index est passé en paramètre (l’index allant également de 0 à n-1)). Ainsi, lt(1) retourne les éléments précédants le deuxième élément, soit le premier. lt(2) retourne les deuxième et premier éléments. Et, pour finir, lt(0) ne retourne rien, puisqu’il n’existe aucun élément ayant un index inférieur à 0 ^^
Dans ton cas, $(‘#links ul:lt(3)’) réduit donc le nombre d’éléments à ceux qui ont un index inférieur à 3, autrement dit du 4ème élément et par conséquent les 3 premiers ul ;-)
> je vais me pencher dessus un peu plus pour bien comprendre, notamment cette histoire de double .end()
La méthode end() permet de retourner à l’état précédant la dernière manipulation DOM.
Par exemple $(‘#links’).next().end() cherche dans un premier temps l’élément div#links puis passe au nœud frère qui suit, soit div#TLA. Finalement la méthode end() fait repasser la pile de jQuery à div#links.
HS: j’espère que la syntaxe dotclear sera prise en compte =]
Très bien vu, j’hésitais encore avec quelle librairie JS travailler, mais bon je crois que mon choix est fait !
pioupiouM > Merci pour toutes ces précisions très utiles. Je perçois mieux maintenant la différence entre eq(0) et lt(0) !
(j’ai l’impression que la syntaxe dotclear n’a pas été prise en compte : ça devait donner quoi, au juste ?)
Simay > Je pense que tu ne seras pas déçu. Bon, en même temps, j’dis ça, j’dis rien, vu que je connais pas très bien les autres bibliothèques ;)
La syntaxe dotclear n’est pas passée effectivement :-(
D’un aute côté, je me suis planté dans la syntaxe de l’ajout de code en ligne : il y a un couple de @ en trop à chaque fois =]
Une version en ligne est disponible ci-après : mehdi.gimp4you.eu.org/mis…
C’est pas grave, je me suis permis de remplacer les @@ par samp et hop! (j’ai essayé en enlevant un @ de part et d’autre, mais rien à faire…)
J’avais déjà jeté un coup d’oeil sur http://www.jquery.info/ et sur interface.eyecon.ro/demos (pas mal de démos), j’ai hâte de voir l’intégration qu’en fera le Framework Symfony (que j’utilise), le plugin actuel étant pour l’instant seulement en version alpha.
alex > WordPress, Dotclear, Synfony… il semble que jquery soit vraiment la bibliothèque qui grimpe :)
A propos de Synfony, si tu as quelques liens vers des tuto orientés windows sans devoir modifier 50 fichiers exotiques, je suis intéressé ;)
Merci, pour cet articla convainquant, je vais me lancer cet été dans c framework!
Bravo pour ces explications (trop bien !). Dommage qu’elle ne marche pas pour la version 2 de Dotclear. J’essaie en vain de trouver un tuto facile pour organiser en trois parties mes widgets dans la sidebar et l’effet de masquage/affichage semble être l’idéal.
Simplement pour ajouter qu’une documentation non officielle sur jQuery est dispo ici: jquery.developpeur-web2.c… pour ceux que ca intéresse :-)
heu … ?,"ou alors je n’ai pas bien cherche les options disponibles" ;)