Share
In dit artikel zullen we een zoeksite voor documenten maken met jQuery. Deze site zal worden gebruikt om documenten te doorzoeken door een extensie (bestandstype) op te geven. De gegevens worden vervolgens gefilterd en naar Google verzonden. Tijdens het proces leren we veel jQuery-tips en -vaardigheden. Een grijze vakplug-plug met de naam "ColorBox" en een toolTip-plug-in met de naam "SimpleTip" worden ook in dit artikel geïntroduceerd. Laten we beginnen.
Tegenwoordig zijn de meest bruikbare tools voor surfen op het web zoekmachines zoals Google, Yahoo en MSN live. Helaas weet niet iedereen hoe deze hulpmiddelen efficiënt en op de juiste manier moeten worden gebruikt.
In dit artikel gebruiken we een kleine zoekterm van Google om een website met Web 2.0-stijl te maken. Vanaf deze site kan de gebruiker de documenten doorzoeken door een trefwoord in te voeren en een specifiek bestandstype te selecteren. Ik zal meer aandacht besteden aan het gebruik van jQuery in dit proces voor het maken van sites. Eenmaal voltooid, moet ons voltooide project er als volgt uitzien.
Natuurlijk kunt u, als u dat wilt, uw eigen logo's of pictogrammen maken met Photoshop. Maar als je een luie man bent, zoals ik, kun je ze online downloaden. Let echter op de licentie, want sommige van deze bronnen zijn niet toegestaan voor commercieel gebruik.
creatr is een geweldige site die een service biedt om online een Web 2.0-stijllogo te maken. Het belangrijkste is dat het gratis en gemakkelijk te gebruiken is! Er zijn veel stijlen die u kunt kiezen om uw logo te maken. Ik koos iets als het volgende.
De pictogrammen die in dit artikel worden gebruikt, zijn allemaal afkomstig van het Windows-besturingssysteem. Als u liever andere pictogrammen gebruikt, bekijkt u iconza en weloveicons om prachtige pictogrammen te vinden. U kunt ook een pictogramzoekmachine gebruiken om pictogrammen op internet te vinden. Ga naar iconfinder of iconlook om het te proberen.
Onze voorpagina zal vergelijkbaar zijn met Google.com. Een korte beginschets ziet er als volgt uit:
De HTML-code voor deze pagina is als volgt.
Zoek documenten met Google! 
DOC PDF XLS PPT RTF tekst KNUPPEL
Documenten zoekenover | Contact | Thanks |Zoekresultaten zijn afkomstig van Google, deze site heeft geen links met Google Inc.
Copyright © 2009 Dit is slechts een demosite. (BETA).
Vervolgens moeten we een aantal stijlen aan de pagina toevoegen om het leesbaarder en mooier te maken. We maken een nieuw bestand met de naam style.css om de stijlen op te slaan die in dit voorbeeld worden gebruikt.
lichaam font: 12px / 1.5 Tahoma, Helvetica, Arial, sans-serif; text-align: center; marge: 0px; background-color: # f9f9f9; a: link, a: visited text-decoration: none; color: # 6599CB; #header text-align: center; opvulling: 70px 0px 40px 0px; #header een img border-style: none; marge: 0px; #types padding: 15px; #types span margin-left: 25px; #word text-align: center; font: 15pt / 17pt bold "Helvetica" normaal; opvulling: 5px 10px 5px 10px; breedte: 40%; rand: 3px effen groen; #google color: #fff; achtergrond: groen; font-size: 15px; tekstdecoratie: geen; font-weight: bold; marge: 10px 5px 10px 5px; opvulling: 5px 10px 5px 10px; regelhoogte: 15px; #wrapper text-align: center; #footer text-align: center; marge: 50px 0px 0px 0px; border-top: 1px solid # E4E4E4; color: # 808080; float: left; width: 600px; positie: relatief; Links: 50%; marge links: -300 px; #footer div margin-top: 5px; #footer #about, #footer #contact, #footer #thanks display: none; text-align: left; marge: 10px; opvulling: 10px; achtergrondkleur: # FFFF99;
Laten we niet vergeten te verwijzen naar ons externe CSS-bestand.
Nu zou uw pagina er als volgt uit moeten zien:
Besteed aandacht aan dit stuk styling, waardoor de inhoud op de pagina gecentreerd blijft.
#footer float: left; width: 600px; positie: relatief; Links: 50%; marge links: -300 px;
De belangrijkste functie van deze site is om documenten met gespecificeerde bestandstypen te doorzoeken, zoals "PDF" en "DOC". Als je goed thuis bent in zoekmachines, weet je waarschijnlijk al hoe je dit kunt bereiken. Als we willen zoeken naar PDF-documenten over "jQuery", kunnen we de volgende tekst invoeren in het zoekvak:
jQuery-bestandstype: PDF
jQuery is een geweldig Javascript-framework dat een eenvoudig te gebruiken JavaScript-versie biedt. Als je dit artikel aan het lezen bent, denk ik dat je nu basisjQueryvaardigheden moet hebben. Maar zo niet, dat is ook goed. We beginnen ons werk vanaf het begin.
We maken een nieuw bestand om de Javascript / jQuery-codes op te slaan die in dit voorbeeld worden gebruikt. De naam van dit bestand is main.js, die in directory js wordt geplaatst. De referentiecode die wordt gebruikt in het HTML-bestand is ...
De eerste twee regels worden gebruikt om het jQuery-bibliotheekbestand te importeren uit het CDN van Google. Als u liever, kunt u in plaats daarvan uw lokale jQuery-bibliotheekbestand gebruiken.
Voeg in main.js het volgende script toe, dat wordt uitgevoerd nadat de DOM gereed is.
$ (document) .ready (function () // plaats hier uw codes);
We willen de bestandstypepictogrammen vóór de bestandstypeteksten boven het zoekvak toevoegen.
Accentsconagua
$ (document) .ready (function () $ ("# types a"). each (function () $ (this) .css ("background": "transparent url ('icons /" + $ (this ) .attr ("waarde") + ".gif ') niet-herhalen 4px midden", "hoogte": "100%"););); De pictogrammen worden in onze "pictogrammen" -directory geplaatst en de naam van de pictogrammen worden ingesteld als (bestandstype) .gif. Dus in de bovenstaande code kunnen we de selector $ (this) .attr ("value") gebruiken om de naam van het bestandstype te krijgen, zoals "pdf", "doc", enz. Dan kunnen we de bestandsnaam van het pictogram pakken, die kan worden gebruikt om de achtergrondafbeelding van het element in te stellen. In de bovenstaande code wordt de functie css () gebruikt om de CSS-stijl van het element $ ("# types a") in te stellen.
Nu moet het bestandstype boven het zoekvak er als volgt uitzien:
Maar zoals u kunt zien, kunnen we bij het opnieuw laden van de pagina niet onderscheiden welk bestandstype we hebben geselecteerd.
We zullen de stijlen veranderen telkens wanneer een gebruiker op een pictogram klikt. De onClick-gebeurtenis wordt geactiveerd nadat de gebruiker op één koppeling heeft geklikt.
$ ("# types a"). klik (functie () $ ("# types a"). each (function () $ (this) .css ("background-color": "", "padding" : "", "color": "# 6599CB", fontWeight: "normal");); $ (this). css ("background-color": "# 6599CB", "padding": "5px" , "color": "white", fontWeight: "bolder"); return false;); Hier gebruiken we verschillende achtergrondkleuren om het geselecteerde bestandstype er anders uit te laten zien. Nu ziet de koppeling van het geselecteerde bestandstype er als volgt uit:
Maar het probleem is dat, na het opnieuw laden van de pagina, elk bestandstype wordt geselecteerd. We moeten een standaard geselecteerd bestandstype opgeven nadat de pagina is vernieuwd.
$ (document) .ready (function () / * initialiseer de data "filetype" * / $ ("# types a: first"). click ();); Telkens wanneer de pagina opnieuw wordt geladen, voert de eerste koppeling binnen de bestandstypes een "klik" -bewerking uit.
Vervolgens zullen we de zoekfunctie implementeren. Wanneer een gebruiker op de knop 'Documenten zoeken' klikt, wordt hij omgeleid naar de resultatenpagina die wordt aangeboden door Google. Een functie genaamd updateLink () wordt gebruikt om de link op deze zoekknop bij te werken wanneer de gebruiker zijn sleutelwoorden invoert.
functie updateLink () $ ("# google"). attr ("href", "http://www.google.com/search?q=" + encodeURI ($ ("# word"). val ()) + "+ bestandstype% 3A" + encodeURI ($ ("# types"). data ("filetype"))); In de bovenstaande code gebruiken we de functie attr () om het href-kenmerk van de zoekknop (link) bij te werken. $ ("# woord"). val () wordt gebruikt om de sleutelwoorden in het zoekvak te pakken. $ ("# types"). data ("filetype") wordt gebruikt om het bestandstype te verkrijgen, dat zal worden ingesteld in $ ("# types a"). click () functie. En ook in deze functie wordt de updateLink-functie aangeroepen, wat betekent dat het href-kenmerk van de zoekknop telkens wordt bijgewerkt als het bestandstype is gewijzigd.
$ ("# types a"). klik (functie () $ ("# types a"). each (function () $ (this) .css ("background-color": "", "padding" : "", "color": "# 6599CB", fontWeight: "normal");); $ (this). css ("background-color": "# 6599CB", "padding": "5px" , "color": "white", fontWeight: "bolder"); $ ("# types"). data ("filetype", $ (this) .attr ("value")); updateLink (); $ ( "#word"). focus (); return false;); We zijn bijna klaar. Maar wacht even, als een gebruiker het zoekwoord wijzigt nadat het bestandstype is geselecteerd, wat gebeurt er dan? Het href-kenmerk van het zoekvak wordt niet bijgewerkt. Dat is niet wat we willen. Dus we moeten ook compenseren voor deze mogelijkheid.
/ * update de link wanneer "#word" verandert * / $ ("# word"). keydown (functie (e) updateLink ();). keyup (functie (e) / * verzend zoekopdracht met "enter" sleutel * / if (e.keyCode == '13') $ ("# google"). klik ();); In de bovenstaande code wordt telkens wanneer het $ ("# woord") wordt veranderd, bijvoorbeeld de gebruiker de sleutelwoorden in het zoekvak veranderd, de functie updateLink opgeroepen om de link van de zoekknop bij te werken. Laten we ook nog een extra gemak toevoegen. Wanneer een gebruiker op "Enter" drukt, gaan we ervan uit dat de gebruiker bedoelt om de functionaliteit van de knop "Zoeken" na te bootsen. We weten dat de keycode 13 is, wat betekent dat de "Enter" -toets is ingedrukt - we zullen de onClick-gebeurtenis van de zoekknop activeren.
Wanneer we nu iets in het zoekvak typen, wordt het resultaat als de volgende afbeelding weergegeven. Het wordt omgeleid naar de pagina met zoekresultaten van Google.
ColorBox is een geweldige jQuery-plug-in die kan worden gebruikt om een lichtbakeffect te maken. Voor gedetailleerd gebruik van deze plug-in, kunt u de website raadplegen.
Allereerst moeten we de ColorBox-plug-in downloaden van de officiële website. De nieuwste versie is 1.2.4, ten tijde van dit schrijven. Voordat we het kunnen gebruiken, moeten we een koppeling naar het Javascript-bestand maken.
De ColorBox-invoegtoepassing kan op de volgende manier worden geïnstantieerd:
/ * setup colorbox plugin * / $ .fn.colorbox.settings.transition = "fade"; $ .fn.colorbox.settings.bgOpacity = "0.8"; $ .fn.colorbox.settings.contentCurrent = "(current / total)";
De id van de zoekknop is "google", dus we kunnen de selector "$ (" # google ")" gebruiken om dit element te krijgen. De ColorBox-plug-in kan als volgt worden gebruikt:
$ ("# google"). colorbox (contentWidth: "800px", contentHeight: "500px", contentIframe: true); We hebben de inhoudsbreedte ingesteld op 800 px en de hoogte op 500 px.
SimpleTip is een eenvoudige plug-in voor jQuery-tooltips. Het is lichtgewicht en gemakkelijk te gebruiken. We kunnen het downloaden van zijn officiële site.
Laten we opnieuw naar het script verwijzen.
We moeten ook het uiterlijk van de tooltip definiëren met CSS.
.tooltip positie: absoluut; opvulling: 10px 13px; marge: 0px 0px 0px 10px z-index: 2; kleur: # 303030; achtergrondkleur: # f5f5b5; rand: 2px vast # DECA7E; lettergrootte: 12px; regelhoogte: 15px; text-align: center;
We kunnen deze stijldefinitie toevoegen aan ons style.css-bestand.
Nu willen we de tooltip toevoegen aan deze bestandstypekoppelingen. De tooltip verschijnt wanneer de gebruiker boven elke koppeling van het bestandstype zweeft. De tooltips geven meer gedetailleerde informatie over het bestandstype weer.
$ ("# types a"). each (function () $ (this) .css ("background": "transparent url ('icons /" + $ (this) .attr ("value") + ". gif ') no-repeat 4px center "," height ":" 100% "); $ (this) .simpletip (showEffect:' slide ', hideEffect:' slide ', position:' top ', offset: [ 0, -10], inhoud: $ (this) .attr ("title"));); Simpletips heeft veel parameters om het effect te creëren. In de bovenstaande code worden het effect show en hide ingesteld als "slide" en wordt de inhoud van de tooltips ook gelijk gezet met het kenmerk "title" van elk bestandstype.
Om met je vriend te delen via sommige sociale netwerksites, zoals del.icio.us, digg, myspace, facebook, twitter enzovoort, biedt Addthis een geweldige en gratis service.
We kunnen de code van de officiële site gebruiken en normaal ziet het er als volgt uit:
U kunt ook een aantal stijlen instellen voor wat deze knoppen weergeven. Hier plaatsen we de code in het voetgedeelte van onze voorbeeldpagina. Het resultaat zou er als volgt uit moeten zien:
De laatste stap van dit voorbeeld is om de animatie te maken wanneer een gebruiker op de footer-links klikt, zoals 'Over', 'Contact' en 'Bedankt'.
Wat betreft
Zoek documenten op google, het kan niet eenvoudiger.
Deze site is bedoeld voor Google-beginners om snel documenten van meerdere formaten te doorzoeken.
Geniet ervan!!!
Contact
Neem gerust contact met me op op elk moment en over wat dan ook, deze site of andere onderwerpen.
Bedankt
Er zijn veel mensen die ik wil bedanken, die een geweldige prestatie hebben geleverd op het gebied van webontwikkeling, waardoor ik deze pagina gemakkelijker heb gerealiseerd.
1. jQuery: een eenvoudig te gebruiken maar geweldig en sterk JavaScript-framework.
2. ColorBox: een lichtgewicht, aanpasbare lightbox-plug-in voor jQuery.
3. Simpletip: een eenvoudige plug-in voor tooltips voor jQuery.
Deze code wordt geplaatst in de div-tag met de ID van "footer". Dan kunnen we een beetje jQuery toevoegen om het display te besturen.
/ * handle footer links display * / $ ("# footLinks a"). toggle (function () $ ("# footLinks a"). each (function () $ ("#" + $ (this) .attr ("titel")). hide ('snel');); $ ("#" + $ (this) .attr ("title")). slideDown ('slow'); return false;, function ( ) $ ("#" + $ (this) .attr ("title")). slideUp ('langzaam'); return false;); slideDown en slideUp-functie worden gebruikt om het animatie-effect te maken. De voettekst van deze pagina wordt weergegeven als de volgende afbeelding.
We hebben nu een compleet Web 2.0-zoekportaal voor de site gemaakt. hoe denk jij erover? Heel erg bedankt voor het lezen.
