Share
I denne artikkelen vil vi opprette et dokumentesøkingsnettsted med jQuery. Dette nettstedet vil bli brukt til å søke etter dokumenter ved å spesifisere en utvidelse (filtype). Dataene blir deretter filtrert og sendt til Google. Vi lærer mange jQuery-tips og ferdigheter gjennom prosessen. En grå boks plugin kalt "ColorBox", og et verktøyTip plugin kalt "SimpleTip" vil også bli introdusert i denne artikkelen. La oss komme i gang.
I dag er de mest nyttige verktøyene for å surfe på nettet søkemotorer som Google, Yahoo og MSN live. Dessverre vet ikke alle hvordan man bruker disse verktøyene effektivt og riktig.
I denne artikkelen vil vi bruke et lite Google-søkemomot for å lage et Web 2.0-stilwebområde. Fra dette nettstedet kan brukeren søke i dokumentene ved å skrive inn et søkeord og velge en bestemt filtype. Jeg vil være mer oppmerksom på jQuery-bruken i denne byggeprosessen. Når det er ferdig, bør vårt gjennomførte prosjekt se ut som følgende.
Selvfølgelig, hvis du vil, kan du lage dine egne logoer eller ikoner med Photoshop. Men hvis du er en lat mann, som meg, kan du laste dem ned online. Vær imidlertid oppmerksom på lisensen, fordi noen av disse ressursene ikke er tillatt for kommersiell bruk.
creatr er et flott nettsted som gir en tjeneste for å lage web 2.0 stillogo på nettet. Viktigst, det er gratis og enkelt å bruke! Det er mange stilarter du kan velge å lage din logo. Jeg valgte noe som følgende.
Ikonene som brukes i denne artikkelen er alt fra Windows-operativsystemet. Hvis du hellere vil bruke andre ikoner, kan du lese ikon og velg for å finne vakre ikoner. Du kan også bruke et ikon søkemotor for å finne ikoner på internett. Gå til iconfinder eller iconlook for å prøve.
Forsiden vår vil lignes på Google.com. En kort første skisse ser ut som følgende:
HTML-koden for denne siden er som følger.
Søk dokumenter med Google! 
DOC PDF XLS PPT RTF tekst FLAGGERMUS
Søk på dokumenterom | Kontakt | Takket |Søkeresultatene kommer fra Google, dette nettstedet har ingen tilknytning til Google Inc.
Copyright © 2009 Dette er bare et demo nettsted. (BETA).
Deretter skal vi legge til noen stiler på siden, for å gjøre den mer lesbar og vakker. Vi lager en ny fil kalt style.css for å lagre stilene som brukes i dette eksemplet.
kropp font: 12px / 1.5 Tahoma, Helvetica, Arial, sans-serif; text-align: center; margin: 0px; background-color: # f9f9f9; a: link, a: besøkt tekst-dekorasjon: ingen; color: # 6599CB; #header text-align: center; polstring: 70px 0px 40px 0px; #header a img border-style: none; margin: 0px; #types padding: 15px; #types span margin-left: 25px; #ord text-align: center; font: 15pt / 17pt fet "Helvetica" normal; polstring: 5px 10px 5px 10px; bredde: 40%; grense: 3px solid grønn; #google color: #fff; bakgrunn: green; font-size: 15px; tekst-dekorasjon: ingen; font-vekt: bold; margin: 10px 5px 10px 5px; polstring: 5px 10px 5px 10px; linjehøyde: 15px; #wrapper text-align: center; #footer text-align: center; margin: 50px 0px 0px 0px; border-top: 1px solid # E4E4E4; color: # 808080; float: venstre; bredde: 600 piksler; stilling: relativ; venstre: 50%; margin-venstre: -300px; #footer div margin-top: 5px; #footer #about, #footer #contact, #footer #thanks display: none; tekst-Justering: venstre; margin: 10px; polstring: 10px; bakgrunnsfarge: # FFFF99;
La oss ikke glemme å referere til vår eksterne CSS-fil.
Nå skal siden din se ut som følgende:
Vær oppmerksom på dette stykke styling, noe som tvinger innholdet på siden til å bli sentrert.
#footer float: left; bredde: 600 piksler; stilling: relativ; venstre: 50%; margin-venstre: -300px;
Hovedfunksjonen til dette nettstedet er å søke dokumenter med spesifiserte filtyper, for eksempel "PDF" og "DOC". Hvis du er velbevandret i søkemotorer, kan du kanskje allerede vite hvordan du oppnår dette. Hvis vi ønsker å søke etter PDF-dokumenter om "jQuery", kan vi skrive inn følgende tekst i søke tekstboksen:
jQuery filetype: PDF
jQuery er et flott Javascript-rammeverk som gir en brukervennlig JavaScript-freamework. Hvis du leser denne artikkelen, tror jeg at du bør ha grunnleggende jQuery-ferdigheter nå. Men hvis ikke, det er også bra. Vi starter arbeidet fra begynnelsen.
Vi lager en ny fil for å lagre Javascript / jQuery-kodene som brukes i dette eksemplet. Navnet på denne filen er main.js, som vil bli lagt inn i katalog js. Referansen koden som brukes i HTML-filen er ...
De to første linjene brukes til å importere jQuery-biblioteksfilen fra Googles CDN. Hvis du vil, kan du i stedet bruke din lokale jQuery-biblioteksfil.
I hovedmenyen, legg til følgende skript, som vil bli kjørt etter at DOM er klar.
$ (dokument) .ready (funksjon () // plasser kodene dine her);
Vi vil legge til ikonene for filtype før filtypene over søkefeltet.
Accentsconagua
$ (dokument) .ready (funksjon () $ ("# typer a"). hver (funksjon () $ (dette) .css ("bakgrunn": "gjennomsiktig url ('ikoner /" + $ ) .attr ("verdi") + ".gif") ikke gjenta 4px senter "," høyde ":" 100% "););); Ikonene er plassert i vår "ikoner" katalog, og navnet på ikonene er satt som (filetype) .gif. Så i ovennevnte kode kan vi bruke velgeren $ (this) .attr ("value") for å få filtype-navnet, for eksempel "pdf", "doc" etc. Deretter kan vi ta tak i ikonfilnavnet, som kan brukes til å sette bakgrunnsbilde av elementet. I koden ovenfor er funksjonen css () brukt til å sette CSS-stilen til elementet $ ("# typer a").
Nå skal filtypen over søkefeltet ligne:
Men som du kan se, når siden oppdateres, kan vi ikke skille hvilken filtype vi har valgt.
Vi endrer stilene hver gang en bruker klikker på et ikon. OnClick-hendelsen utløses etter at brukeren klikker på en lenke.
$ ("# typer a"). klikk (funksjon () $ ("# typer a"). hver (funksjon () $ (dette) .css ("bakgrunnsfarge": "", "polstring" : "# 6599CB", fontWeight: "normal");); $ (dette) .css ("bakgrunnsfarge": "# 6599CB", "padding": "5px" , "farge": "hvit", fontWeight: "bolder"); return false;); Her bruker vi forskjellig bakgrunnsfarge for å gjøre den valgte filtypen forskjellig. Nå ser den valgte filtypelinken ut:
Men problemet er, etter at siden er lastet opp, vil enhver filtype velges. Vi må gi en standard valgt filtype etter at siden har blitt oppdatert.
$ (dokument) .ready (funksjon () / * initialiser dataene "filetype" * / $ ("# typer a: first"). klikk ();); Hver gang siden lastes på nytt, vil den første lenken i filtyperavsnitt utføre en "klikk" -operasjon.
Deretter skal vi implementere søkefunksjonen. Når en bruker klikker på "Seach Docs" -knappen, blir han omdirigert til resultatsiden, som tilbys av Google. En funksjon som heter updateLink () brukes til å oppdatere lenken på denne søkeknappen når brukeren skriver inn søkeordene sine.
function updateLink () $ ("# google"). attr ("href", "http://www.google.com/search?q=" + encodeURI ($ ("# ord") .val + "+ filetype% 3A" + encodeURI ($ ("# types"). data ("filetype"))); I ovennevnte kode bruker vi attr () -funksjonen til å oppdatere href-attributtet til søkeknappen (lenke). $ ("# word"). val () brukes til å hente nøkkelordene i søkeboksen. $ ("# typer"). data ("filetype") brukes til å få filtypen, som settes inn i $ ("# types a"). click () -funksjonen. Og også i denne funksjonen vil updateLink-funksjonen bli kalt, hvilket betyr at href-attributtet til søkeknappen vil bli oppdatert hver gang filtypen endres.
$ ("# typer a"). klikk (funksjon () $ ("# typer a"). hver (funksjon () $ (dette) .css ("bakgrunnsfarge": "", "polstring" : "# 6599CB", fontWeight: "normal");); $ (dette) .css ("bakgrunnsfarge": "# 6599CB", "padding": "5px" , "farge": "hvit", fontWeight: "bolder"); $ ("# typer") data ("filetype", $ (dette) .attr ("verdi")); updateLink (); $ "#word"). fokus (); return false;); Vi er nesten ferdig. Men vent, nå, hvis en bruker endrer søkeordet etter å ha valgt filtype, hva skjer? Href-attributtet til søkeboksen vil ikke bli oppdatert. Det er ikke det vi vil ha. Så vi må også kompensere for denne muligheten.
/ * Oppdater koblingen når "#word" endrer * / $ ("# word"). keydown (funksjon (e) updateLink ();). nøkkel * / hvis (e.keyCode == '13') $ ("# google"). klikk ();); I den ovennevnte koden, hver gang $ ("# ord") endres, for eksempel endret brukeren nøkkelordene i søkeboksen, vil funksjonen updateLink bli kalt for å oppdatere lenken til søkeknappen. La oss også legge til en ekstra bekvemmelighet. Når en bruker trykker "Enter", antar vi at brukeren betyr å etterligne funksjonaliteten til "Søk" -knappen. Vi vet at nøkkelkoden er 13, noe som betyr at "Enter" -tasten er trykket - vi vil utløse onClick-hendelsen på søkeknappen.
Nå, når vi skriver inn noe i søkeboksen, blir resultatet vist som følgende bilde. Den vil omdirigere til Googles søkeresultatside.
ColorBox er et flott jQuery-plugin som kan brukes til å lage en lysboksseffekt. For detaljert bruk av dette pluginet, kan du se på nettsiden sin.
Først av alt, bør vi laste ned ColorBox-pluginet fra det offisielle nettstedet. Den nyeste versjonen er 1.2.4, på tidspunktet for denne skrivingen. Før vi kan bruke den, må vi koble til Javascript-filen.
Fargebox-pluginet kan bli instantiated slik:
/ * installer colorbox plugin * / $ .fn.colorbox.settings.transition = "fade"; $ .fn.colorbox.settings.bgOpacity = "0.8"; $ .fn.colorbox.settings.contentCurrent = "(current / total)";
Søkeknappens ID er "google", så vi kan bruke selgeren "$ (" # google ")" for å få dette elementet. Fargebox-plugin kan brukes som følger:
$ ("# google"). colorbox (contentWidth: "800px", contentHeight: "500px", contentIframe: true); Vi har satt innholdsbredden til 800px og høyden til 500px.
SimpleTip er en enkel jQuery tooltips plugin. Den er lett og enkel å bruke. Vi kan laste den ned fra sitt offisielle nettsted.
Igjen, la oss referere til skriptet.
Vi bør også definere verktøytipsets forekomst med CSS.
.verktøytips posisjon: absolutt; polstring: 10px 13px; margin: 0px 0px 0px 10px z-indeks: 2; farge: # 303030; bakgrunnsfarge: # f5f5b5; border: 2px solid # DECA7E; skriftstørrelse: 12px; linjehøyde: 15px; tekst-align: center;
Vi kan legge til denne stildefinisjonen i vår style.css-fil.
Nå vil vi legge til verktøytipset til disse filtypene. Verktøylippen vises når brukeren svinger over hver filtype-lenke. Verktøytipsene vil vise mer detaljert filtypeinformasjon.
$ ("# typer a"). hver (funksjon () $ (dette) .css ("bakgrunn": "gjennomsiktig url ('ikoner /" + $ (dette) .attr ("verdi") + ". gif ") ikke gjenta 4px sentrum", "høyde": "100%"); $ (dette). Simpletip (showEffect: 'slide', hideEffect: 'slide', posisjon: 'top' 0, -10], innhold: $ (dette) .attr ("title"));); Simpletips har mange parametere for å skape effekten. I den ovennevnte koden er visningen og skjult effekten angitt som "lysbilde", og også innholdet i verktøytipsene er angitt som det samme med "tittel" -attributtet for hver filtype-lenke.
For å dele med vennen din via noen sosiale nettsider, for eksempel del.icio.us, digg, myspace, facebook, twitter og så videre, gir Addthis en flott og gratis tjeneste.
Vi kan bruke koden fra det offisielle nettstedet, og det ser vanligvis ut som følgende:
Du kan også stille inn noen stiler for hva disse knappene viser. Her setter vi koden i bunnteksten på vår eksempelside. Resultatet skal se ut som:
Det siste trinnet i dette eksemplet er å lage animasjonen når en bruker klikker på sidene, som "Om", "Kontakt" og "Takk".
Handle om
Søk på dokumenter på google, det kan ikke være enklere.
Dette nettstedet er utviklet for Google-nybegynnere å søke dokumenter av ulike formater raskt.
Nyt det!!!
Ta kontakt med
Ta gjerne kontakt med meg når som helst og om noe, dette nettstedet eller andre emner.
Takk
Det er mange jeg vil takke, hvem hadde gjort en veldig god jobb på webutvikling, noe som gjorde meg klar til å innse denne siden lettere.
1. jQuery: En enkel å bruke, men flott og sterkt javascript rammeverk.
2. ColorBox: En lett, tilpassbar lightbox-plugin for jQuery.
3. Simpletip: En enkel tooltips plugin fro jQuery.
Denne koden vil bli plassert i div-taggen som har et id med "footer". Da kan vi legge til litt jQuery for å styre skjermen.
/ * håndtere footer link-visning * / $ ("# footLinks a"). veksle (funksjon () $ ("# footLinks a"). hver (funksjon () $ ("#" + $ ("tittel")). Skjul ('fast');); $ ("#" + $ (dette) .attr ("tittel")). slideDown ('slow'); return false;, funksjon ) $ ("#" + $ (dette) .attr ("title")). slideUp ('slow'); return false;); slideDown og slideUp-funksjonen brukes til å lage animasjonseffekten. Foten av denne siden vil bli vist som følgende bilde.
Vi har nå opprettet en komplett Web 2.0 site dokument søk portal. Hva er dine tanker? Takk så mye for å lese.
