{"id":1679,"date":"2011-12-09T09:05:06","date_gmt":"2011-12-09T08:05:06","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1679"},"modified":"2015-01-18T16:20:03","modified_gmt":"2015-01-18T15:20:03","slug":"travailler-vos-liens-ancres-avec-jquery-css","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/travailler-vos-liens-ancres-avec-jquery-css","title":{"rendered":"Travailler vos liens et ancres avec jQuery et\/ou CSS"},"content":{"rendered":"

J’ai recherch\u00e9 des possibilit\u00e9s en PHP pour retravailler les liens fournis par WordPress il n’y a pas longtemps ; ce qui m’a amen\u00e9 \u00e0 cette id\u00e9e d’article.
\nBeaucoup de possibilit\u00e9s de styles sont disponibles gr\u00e2ce \u00e0 CSS, mais il est parfois n\u00e9cessaire de transformer le comportement d’un lien avec JavaScript.<\/p>\n

Regardons ensemble ce qu’il est possible de faire du c\u00f4t\u00e9 de jQuery dans un premier temps, puis nous verrons les possibilit\u00e9s offertes par CSS.<\/p>\n

Je tiens \u00e0 rappeler que JavaScript doit autant que possible \u00eatre une surcouche \u00e0 un contenu HTML<\/strong> consultable et fonctionnel avec JS d\u00e9sactiv\u00e9.
\nDe m\u00eame, les fonctions lanc\u00e9es par l’interception d’un \u00e9v\u00e8nement sur un lien ne doivent par surprendre vos visiteurs<\/strong>, n’oubliez donc pas de les pr\u00e9venir de choses qui vont se produire.<\/p>\n

Semblant de bonne pratique mise \u00e0 part, rentrons dans le vif du sujet.<\/p>\n

\u00c9tendre jQuery pour la gestion de vos liens<\/h2>\n

\"\"Imaginons par exemple que nous ayons besoin dans un projet de manipuler les liens en fonction de leurs caract\u00e9ristiques.
\nLes principales fonctions des liens se retrouvent directement dans la valeur de leur attribut href<\/code>, c’est donc l\u00e0-dedans que nous allons piocher.<\/p>\n

En cr\u00e9ant des extensions de s\u00e9lecteur jQuery, nous allons pouvoir simplifier la pr\u00e9sentation et donc la lisibilit\u00e9 de nos d\u00e9veloppements.<\/p>\n

Pour cr\u00e9er une extensions de s\u00e9lecteur jQuery, il nous faut une mani\u00e8re de discriminer un objet, et le retourner \u00e0 jQuery.
\nPour cela rien de plus ais\u00e9, la biblioth\u00e8que le pr\u00e9voit assez simplement gr\u00e2ce \u00e0 l’expression jQuery.expr[':']<\/code>.<\/p>\n

Les codes qui suivent doivent \u00eatre utilis\u00e9s apr\u00e8s le chargement de la biblioth\u00e8que jQuery.<\/p>\n

Exemple de cr\u00e9ation d’un s\u00e9lecteur :external<\/code> :<\/strong><\/p>\n

\/\/ Cr\u00e9ation du s\u00e9lecteur :external\r\n$.expr[':'].external = function(obj){\r\n\tif(!obj.href) {return false;}\r\n\treturn obj.hostname != location.hostname;\r\n};\r\n$('a:external').addClass('external');<\/code><\/pre>\n
Exemple de cr\u00e9ation d’un s\u00e9lecteur :tel<\/code> :<\/strong><\/p>\n
\/\/ Cr\u00e9ation du s\u00e9lecteur :tel\r\n$.expr[':'].tel = function(obj){\r\n\treturn $(obj).is('[href^=\"tel:\"]');\r\n};\r\n$('a:tel').addClass('tel_num');<\/code><\/pre>\n
Bien, mais si nous avons 4 ou 5 s\u00e9lecteurs \u00e0 ajouter comme cela, \u00e7a va faire long.
\nNous pouvons tr\u00e8s bien utiliser la syntaxe suivante pour r\u00e9unir les fonctions qui nous permettent de cr\u00e9er nos s\u00e9lecteurs sous la m\u00eame forme :<\/p>\n
\/\/ Cr\u00e9ation des plusieurs s\u00e9lecteurs\r\n$.extend($.expr[':'], {\r\n\tsecure: function(a) { \r\n\t\treturn $(a).is('[href^=\"https:\"]');\r\n\t},\r\n\tnotsecure: function(a) { \r\n\t\treturn $(a).is('[href^=\"http:\"]');\r\n\t},\r\n\tselfanchor: function(a) { \r\n\t\treturn $(a).is('[href^=\"#\"]');\r\n\t}\r\n});\r\n\r\n\/\/ exemples d'utilisation\r\n$('a:secure').addClass('https_link');\r\n$('a:notsecure').addClass('http_link');\r\n$('a:selfanchor').addClass('self_link');<\/code><\/pre>\n
Dans ces exemples de code, j’utilise de simples addClass pour pr\u00e9senter les nouveaux s\u00e9lecteurs. C’est \u00e0 vous de voir, au sein de votre d\u00e9veloppement, \u00e0 quoi vont pouvoir vous servir ces s\u00e9lecteurs.<\/p>\n
Je ne dis pas que ces exemples sont probants ou pertinents, mais ils sont l\u00e0 pour illustrer les possibilit\u00e9s d’extension de jQuery, notamment pour les liens.
\nPeut-\u00eatre aurez-vous d’autres id\u00e9es pour optimiser la gestion de vos liens, ou des besoins pr\u00e9cis pour lancer une fonction sur un type de lien.<\/p>\n
Ok mais… seulement en JS ?<\/h2>\n
Non, justement, CSS peut \u00eatre suffisant si vous n’avez besoin que de modifier l’apparence de vos liens.
\nEn effet, il est tout \u00e0 fait possible de cibler un \u00e9l\u00e9ment en fonction du contenu de son attribut, cela vaut pour l’attribut href<\/code>.<\/p>\n
\/* cible les liens dont l'attribut href commence par *\/\r\na[href^=\"mailto:\"] { }\r\na[href^=\"tel:\"] {}\r\n\r\n\/* cible les liens dont l'attribut href fini par *\/\r\na[href$=\".pdf\"] { }\r\na[href$=\".doc\"] { }\r\n\r\n\/* cible les liens dont l'attribut href contient *\/\r\na[href~=\"twitter.com\/!#\"] { }\r\na[href~=\"?redirect\"] { }<\/code><\/pre>\n
Cette technique est compatible avec Internet Explorer 7 et technologies sup\u00e9rieures… autant vous dire que vous pouvez d\u00e9j\u00e0 vous amuser !<\/p>\n
Voil\u00e0, vous \u00eates par\u00e9s pour styler et retravailler vos liens comme des pros !
\nLes commentaires sont \u00e0 votre disposition pour nous faire part de vos id\u00e9es d’am\u00e9lioration, d’utilisation ou pour toute question.<\/p>\n
J’essayerai de vous proposer de petites extensions de s\u00e9lecteur dans ce genre pour d’autres cas pratiques plus tard \ud83d\ude09<\/p>\n
\n
Liens utiles<\/h2>\n