N ° 95: JavaScript pour plusieurs moteurs de recherche personnalisés Google - Astuces CSS

Table des matières

Tous nos moteurs de recherche personnalisés Google sont configurés (nous en configurons un différent pour chaque section du site). Notre interface utilisateur pour la recherche est prête à fonctionner. Nous avons des modèles prêts à l'emploi pour chaque sous-page de résultats de recherche. Nous n'avons qu'une dernière étape pour tout assembler: faire fonctionner les petits liens «Rechercher dans:».

Nous avons fait tellement de préparation ici que cela va être assez facile. Tout ce que nous avons à faire est de changer l' actionattribut sur le formulaire qui héberge notre formulaire de recherche lorsque vous cliquez sur différentes zones pour effectuer la recherche.

Pour chacun des liens «Rechercher dans:», nous lui data-urlattribuerons un attribut. Cet attribut contiendra la valeur que nous avons l'intention de déplacer vers l' actionattribut du formulaire lorsque le lien est cliqué. C'est exactement ce que nous faisons en quelques lignes de JS. Nous expliquons brièvement comment la méthode .attr () peut être à la fois un «getter» et un «setter», une chose courante dans jQuery.

Nous passons le reste du temps à écrire un peu plus de CSS et de jQuery pour définir une classe «active» sur les liens, de sorte que lorsqu'un utilisateur clique sur «Forums» (ou l'un des autres), il reçoive des commentaires indiquant que cette limitation de recherche est actuellement actif (devient blanc et souligné, comme par défaut).

Articles intéressants...