Share
Dans cet article, nous allons créer un site de recherche de documents avec jQuery. Ce site sera utilisé pour rechercher des documents en spécifiant une extension (type de fichier). Les données sont ensuite filtrées et envoyées à Google. Nous allons apprendre de nombreux conseils et compétences jQuery tout au long du processus. Un plugin gris appelé "ColorBox", et un plugin toolTip appelé "SimpleTip" seront également présentés dans cet article. Commençons.
De nos jours, les outils les plus utiles pour surfer sur le Web sont les moteurs de recherche tels que Google, Yahoo et MSN Live. Malheureusement, tout le monde ne sait pas comment utiliser ces outils efficacement et efficacement..
Dans cet article, nous allons utiliser un petit truc de recherche Google pour créer un site Web de style Web 2.0. Sur ce site, l'utilisateur peut rechercher des documents en saisissant un mot-clé et en sélectionnant un type de fichier spécifique. Je ferai plus attention à l'utilisation de jQuery dans ce processus de construction du site. Une fois terminé, notre projet terminé devrait ressembler à ce qui suit.
Bien sûr, si vous le souhaitez, vous pouvez créer vos propres logos ou icônes avec Photoshop. Mais si vous êtes un paresseux, comme moi, vous pouvez les télécharger en ligne. Cependant, faites attention à la licence, car certaines de ces ressources ne sont pas autorisées pour un usage commercial..
creatr est un site formidable proposant un service permettant de créer un logo de style Web 2.0 en ligne. Plus important encore, c'est gratuit et facile à utiliser! Vous pouvez choisir plusieurs styles pour créer votre logo. J'ai choisi quelque chose comme ceci.
Les icônes utilisées dans cet article proviennent toutes du système d'exploitation Windows. Si vous préférez utiliser d'autres icônes, consultez iconza et weloveicons pour trouver de belles icônes. En outre, vous pouvez utiliser un moteur de recherche d'icônes pour rechercher des icônes sur Internet. Allez sur iconfinder ou iconlook pour essayer.
Notre page d'accueil sera similaire à Google.com. Une brève esquisse initiale ressemble à ceci:
Le code HTML pour cette page est comme suit.
Rechercher des documents avec Google! 
DOC PDF XLS PPT RTF SMS CHAUVE SOURIS
Rechercher des documentsÀ propos | Contact | Merci |Les résultats de recherche proviennent de Google, ce site n'a pas d'association avec Google Inc.
Copyright © 2009 Ceci est juste un site de démonstration. (BETA).
Ensuite, nous devrions ajouter quelques styles à la page, pour la rendre plus lisible et plus belle. Nous créons un nouveau fichier appelé style.css pour enregistrer les styles utilisés dans cet exemple..
body font: 12px / 1.5 Tahoma, Helvetica, Arial, sans empattement; text-align: center; marge: 0px; couleur de fond: # f9f9f9; a: lien, a: visité text-decoration: none; couleur: # 6599CB; #header text-align: center; remplissage: 70px 0px 40px 0px; #header a img border-style: none; marge: 0px; #types padding: 15px; #types span marge-gauche: 25px; #word text-align: center; police: 15pt / 17pt gras "Helvetica" normal; remplissage: 5px 10px 5px 10px; largeur: 40%; bordure: 3px vert solide; #google color: #fff; fond: vert; taille de police: 15px; texte-décoration: aucun; poids de police: gras; marge: 10px 5px 10px 5px; remplissage: 5px 10px 5px 10px; hauteur de ligne: 15px; #wrapper text-align: center; #footer text-align: center; marge: 50px 0px 0px 0px; border-top: 1px solide # E4E4E4; couleur: # 808080; float: gauche; largeur: 600px; position: relative; à gauche: 50%; marge gauche: -300px; #footer div margin-top: 5px; #footer #about, #footer #contact, #footer #thanks display: none; text-align: left; marge: 10px; rembourrage: 10px; couleur de fond: # FFFF99;
N'oublions pas de faire référence à notre fichier CSS externe.
Maintenant, votre page devrait ressembler à ceci:
Faites attention à ce style qui force le contenu de la page à rester centré.
#footer float: left; largeur: 600px; position: relative; à gauche: 50%; marge gauche: -300px;
La fonction principale de ce site est de rechercher des documents avec des types de fichiers spécifiés, tels que "PDF" et "DOC". Si vous connaissez bien les moteurs de recherche, vous savez peut-être déjà comment y parvenir. Si nous voulons rechercher des documents PDF sur "jQuery", nous pouvons saisir le texte suivant dans la zone de recherche:
jQuery filetype: PDF
jQuery est un excellent framework Javascript qui fournit un outil JavaScript simple à utiliser. Si vous lisez cet article, je pense que vous devriez déjà avoir des compétences de base en jQuery. Mais sinon, c'est bien aussi. Nous commencerons notre travail depuis le début.
Nous créons un nouveau fichier pour enregistrer les codes Javascript / jQuery utilisés dans cet exemple. Le nom de ce fichier est main.js, qui sera placé dans le répertoire js. Le code de référence utilisé dans le fichier HTML est…
Les deux premières lignes servent à importer le fichier de bibliothèque jQuery à partir du CDN de Google. Si vous préférez, vous pouvez utiliser votre fichier de bibliothèque jQuery local..
Dans main.js, ajoutez le script suivant, qui sera exécuté une fois que le DOM est prêt..
$ (document) .ready (function () // placez vos codes ici);
Nous voulons ajouter les icônes de type de fichier avant les textes de type de fichier au-dessus du champ de recherche.
Accentsconagua
$ (document) .ready (function () $ ("# tape un"). each (function () $ (this) .css ("background": "url transparent ('icons /" + $ (this ) .attr ("valeur") + ".gif ') non répété centre 4px", "hauteur": "100%"););); Les icônes sont placées dans notre répertoire "icons" et le nom des icônes est défini comme (filetype) .gif. Ainsi, dans le code ci-dessus, nous pouvons utiliser le sélecteur $ (this) .attr ("value") pour obtenir le nom du type de fichier, tel que "pdf", "doc", etc. Ensuite, nous pouvons récupérer le nom de fichier de l'icône, qui peut être utilisé pour définir l’image d’arrière-plan de l’élément. Dans le code ci-dessus, la fonction css () est utilisée pour définir le style CSS de l'élément $ ("# types a").
Maintenant, le type de fichier au-dessus du champ de recherche devrait ressembler à ceci:
Mais, comme vous pouvez le constater, lorsque la page est rechargée, nous ne pouvons pas distinguer le type de fichier sélectionné..
Nous allons changer les styles chaque fois qu'un utilisateur clique sur une icône. L'événement onClick sera déclenché après que l'utilisateur a cliqué sur un lien..
$ ("# types a"). click (function () $ ("# types a"). each (function () $ (this) .css ("background-color": "", "padding" : "", "color": "# 6599CB", fontWeight: "normal");); $ (this) .css ("background-color": "# 6599CB", "remplissage": "5 pixels" , "color": "white", fontWeight: "bolder"); return false;); Ici, nous utilisons une couleur de fond différente pour que le type de fichier sélectionné apparaisse différemment. Maintenant, le lien de type de fichier sélectionné ressemble à ceci:
Mais le problème est que, une fois la page rechargée, tout type de fichier sera sélectionné. Nous devons donner un type de fichier sélectionné par défaut après l'actualisation de la page.
$ (document) .ready (function () / * initialise les données "filetype" * / $ ("# tape a: first"). click ();); Chaque fois que la page est rechargée, le premier lien de la section des types de fichiers effectuera une opération de "clic"..
Ensuite, nous allons implémenter la fonction de recherche. Lorsqu'un utilisateur clique sur le bouton "Rechercher des documents", il sera redirigé vers la page de résultats fournie par Google. Une fonction appelée updateLink () est utilisée pour mettre à jour le lien sur ce bouton de recherche lorsque l'utilisateur entre ses mots-clés.
function updateLink () $ ("# google"). attr ("href", "http://www.google.com/search?q=" + encodeURI ($ ("# mot"). val ()) + "+ filetype% 3A" + encodeURI ($ ("# types"). data ("filetype"))); Dans le code ci-dessus, nous utilisons la fonction attrtr () pour mettre à jour l'attribut href du bouton de recherche (lien). $ ("# mot"). val () est utilisé pour récupérer les mots-clés dans le champ de recherche. $ ("# types"). data ("filetype") est utilisé pour obtenir le type de fichier, qui sera défini dans la fonction $ ("# types a"). click (). Et également dans cette fonction, la fonction updateLink sera appelée, ce qui signifie que l'attribut href du bouton de recherche sera mis à jour chaque fois que le type de fichier est modifié..
$ ("# types a"). click (function () $ ("# types a"). each (function () $ (this) .css ("background-color": "", "padding" : "", "color": "# 6599CB", fontWeight: "normal");); $ (this) .css ("background-color": "# 6599CB", "remplissage": "5 pixels" , "color": "white", fontWeight: "bolder"); $ ("# types"). data ("filetype", $ (this) .attr ("value")); updateLink (); $ ( "#word"). focus (); return false;); Nous avons presque fini. Mais attendez, maintenant, si un utilisateur modifie le mot clé de recherche après avoir sélectionné le type de fichier, que se passera-t-il? L'attribut href du champ de recherche ne sera pas mis à jour. Ce n'est pas ce que nous voulons. Nous devons donc également compenser cette possibilité.
/ * met à jour le lien lorsque "#word" change * / $ ("# mot"). keydown (fonction (e) updateLink ();). keyup (fonction (e) / * envoie la recherche avec "entrée" clé * / if (e.keyCode == '13') $ ("# google"). click ();); Dans le code ci-dessus, chaque fois que le $ ("# mot") est modifié, par exemple si l'utilisateur a modifié les mots clés dans la zone de recherche, la fonction updateLink sera appelée pour mettre à jour le lien du bouton de recherche. Ajoutons aussi une commodité supplémentaire. Lorsqu'un utilisateur appuie sur "Entrée", nous supposons qu'il veut imiter la fonctionnalité du bouton "Rechercher". Nous savons que le code d'activation est 13, ce qui signifie que la touche "Entrée" est enfoncée. Nous allons déclencher l'événement onClick du bouton de recherche..
Maintenant, lorsque nous tapons quelque chose dans la boîte de recherche, le résultat sera affiché comme l'image suivante. Il sera redirigé vers la page de résultats de recherche de Google.
ColorBox est un excellent plugin jQuery qui peut être utilisé pour créer un effet de boîte à lumière. Pour une utilisation détaillée de ce plugin, vous pouvez vous référer à son site web.
Tout d’abord, nous devrions télécharger le plugin ColorBox depuis le site officiel. La dernière version est la 1.2.4, au moment de la rédaction de cet article. Avant de pouvoir l'utiliser, nous devons créer un lien vers le fichier Javascript..
Le plugin ColorBox peut être instancié comme ceci:
/ * Configuration du plugin colorbox * / $ .fn.colorbox.settings.transition = "fade"; $ .fn.colorbox.settings.bgOpacity = "0.8"; $ .fn.colorbox.settings.contentCurrent = "(current / total)";
L'identifiant du bouton de recherche est "google", nous pouvons donc utiliser le sélecteur "$ (" # google ")" pour obtenir cet élément. Le plugin ColorBox peut être utilisé comme suit:
$ ("# google"). colorbox (contentWidth: "800px", contentHeight: "500px", contentIframe: true); Nous avons défini la largeur du contenu à 800px et la hauteur à 500px.
SimpleTip est un plug-in simple tooltips jQuery. Il est léger et facile à utiliser. On peut le télécharger depuis son site officiel.
Encore une fois, référençons le script.
Nous devrions également définir l'apparence de l'info-bulle avec CSS.
.tooltip position: absolute; rembourrage: 10px 13px; marge: 0px 0px 0px 10px z-index: 2; couleur: # 303030; couleur de fond: # f5f5b5; bordure: solide 2px # DECA7E; taille de police: 12px; hauteur de ligne: 15px; text-align: center;
Nous pouvons ajouter cette définition de style dans notre fichier style.css.
Maintenant, nous voulons ajouter l'info-bulle à ces liens de type de fichier. L'info-bulle apparaîtra lorsque l'utilisateur survolera chaque lien de type de fichier. Les infobulles afficheront des informations plus détaillées sur le type de fichier..
$ ("# types a"). each (function () $ (this) .css ("background": "url transparent ('icons /" + / (this) .attr ("value") + ". gif ') no-repeat 4px center "," height ":" 100% "); $ (this) .simpletip (showEffect:' slide ', hideEffect:' slide ', position:' top ', offset: [ 0, -10], content: $ (this) .attr ("title"));); Simpletips a beaucoup de paramètres pour créer l'effet. Dans le code ci-dessus, les effets d'affichage et de masquage sont définis en tant que "diapositives" et le contenu des info-bulles est également défini de la même manière que l'attribut "titre" de chaque lien de type de fichier..
Pour partager avec vos amis via certains sites de réseaux sociaux, tels que del.icio.us, digg, myspace, facebook, twitter, etc., Addthis fournit un excellent service gratuit..
Nous pouvons utiliser le code du site officiel, et normalement, il ressemble à ceci:
Vous pouvez également définir certains styles pour ce que ces boutons affichent. Ici, nous mettons le code dans le pied de page de notre exemple de page. Le résultat devrait ressembler à:
La dernière étape de cet exemple consiste à créer l'animation lorsqu'un utilisateur clique sur les liens de bas de page, tels que "À propos", "Contact" et "Merci"..
Sur
Rechercher des documents sur google, cela ne peut être plus simple.
Ce site est conçu pour que les débutants de Google puissent rechercher rapidement des documents de formats multiples.
Profitez-en!!!
Contact
N'hésitez pas à me contacter à tout moment et à propos de n'importe quoi, de ce site ou d'autres sujets.
Merci
Je tiens à remercier de nombreuses personnes qui ont fait un très bon travail en développement Web, ce qui m'a permis de réaliser cette page plus facilement..
1. jQuery: un framework javascript facile à utiliser mais puissant.
2. ColorBox: un plugin lightbox léger et personnalisable pour jQuery.
3. Simpletip: Un simple plugin tooltips de jQuery.
Ce code sera placé dans la balise div qui a un identifiant de "pied de page". Ensuite, nous pouvons ajouter un peu de jQuery pour contrôler l'affichage.
/ * Les liens de pied de page affichent * / $ ("# footLinks a"). toggle (function () $ ("# footLinks a"). each (fonction () $ ("#" + $ (this) .attr ("title")). hide ('fast');); $ ("#" + $ (this) .attr ("title")). slideDown ('slow'); return false;, function ( ) $ ("#" + $ (this) .attr ("title")). slideUp ('slow'); return false;); slideDown et slideUp permettent de créer l’effet d’animation. Le pied de page de cette page sera affiché comme l'image suivante.
Nous avons maintenant créé un portail complet de recherche de documents de site Web 2.0. Quelles sont vos pensées? Merci beaucoup d'avoir lu.
