Costruisci un sito di ricerca documenti Web 2.0

In questo articolo, creeremo un sito di ricerca documenti con jQuery. Questo sito verrà utilizzato per cercare documenti specificando un'estensione (tipo di file). I dati vengono quindi filtrati e inviati a Google. Impareremo molti consigli e abilità di jQuery attraverso il processo. In questo articolo verrà inoltre introdotto un plug-in di casella grigio denominato "ColorBox" e un plug-in ToolTip chiamato "SimpleTip". Iniziamo.

introduzione

Oggigiorno, gli strumenti più utili per navigare sul web sono motori di ricerca come Google, Yahoo e MSN live. Sfortunatamente, non tutti sanno come utilizzare questi strumenti in modo efficiente e corretto.

In questo articolo, utilizzeremo un piccolo trucco di ricerca Google per creare un sito Web in stile Web 2.0. Da questo sito, l'utente può cercare i documenti inserendo una parola chiave e selezionando un tipo di file specifico. Presterò maggiore attenzione all'utilizzo di jQuery in questo processo di creazione del sito. Una volta completato, il nostro progetto completato dovrebbe assomigliare al seguente.

Passaggio 0: Risorse: loghi e icone

Naturalmente, se lo desideri, puoi creare i tuoi logo o icone con Photoshop. Ma se sei un uomo pigro, come me, puoi scaricarli online. Tuttavia, si prega di prestare attenzione alla licenza, poiché alcune di queste risorse non sono consentite per uso commerciale.

creatr è un ottimo sito che offre un servizio per creare logo in stile Web 2.0 online. Soprattutto, è gratuito e facile da usare! Ci sono molti stili che puoi scegliere per creare il tuo logo. Ho scelto qualcosa come il seguente.

Le icone utilizzate in questo articolo sono tutte provenienti dal sistema operativo Windows. Se preferisci usare altre icone, consulta iconza e weloveicons per trovare icone bellissime. Inoltre, puoi utilizzare un motore di ricerca di icone per trovare le icone su Internet. Vai a iconfinder o iconlook per provare.

Passaggio 1: Layout di pagina

La nostra prima pagina sarà simile a Google.com. Un breve schizzo iniziale ha il seguente aspetto:

Il codice HTML per questa pagina è il seguente.

     Cerca documenti con Google!     
   DOC PDF XLS PPT RTF testo BAT 
  

 Cerca documenti 
 
   A proposito di | Contatto | grazie |   
 I risultati di ricerca provengono da Google, questo sito non ha assunzioni con Google Inc. 
 Copyright © 2009 Questo è solo un sito demo. (BETA).

Successivamente, dovremmo aggiungere alcuni stili alla pagina, per renderla più leggibile e bella. Creiamo un nuovo file chiamato style.css per salvare gli stili usati in questo esempio.

 body font: 12px / 1.5 Tahoma, Helvetica, Arial, sans-serif, allineamento del testo: centro; margine: 0px; background-color: # f9f9f9;  a: link, a: visited text-decoration: none; color: # 6599CB;  #header text-align: center; imbottitura: 70px 0px 40px 0px;  #header a img border-style: none; margine: 0px;  #types padding: 15px; #types span margin-left: 25px;  #word text-align: center; font: 15pt / 17pt grassetto "Helvetica" normale; imbottitura: 5px 10px 5px 10px; larghezza: 40%; bordo: 3 px verde fisso;  #google color: #fff; sfondo: verde; font-size: 15px; decorazione del testo: nessuna; font-weight: bold; margine: 10px 5px 10px 5px; imbottitura: 5px 10px 5px 10px; altezza della linea: 15px;  #wrapper text-align: center;  #footer text-align: center; margine: 50px 0px 0px 0px; border-top: 1px solid # E4E4E4; color: # 808080; float: sinistra; larghezza: 600px; posizione: relativa; a sinistra: 50%; margin-left: -300px;  #footer div margin-top: 5px; #footer #about, #footer #contact, #footer #thanks display: none; text-align: left; margine: 10px; imbottitura: 10px; background-color: # FFFF99;

Non dimentichiamo di fare riferimento al nostro file CSS esterno.

Ora la tua pagina dovrebbe apparire come la seguente:

Presta attenzione a questo pezzo di stile, che costringe il contenuto della pagina a rimanere centrato.

 #footer float: left; larghezza: 600px; posizione: relativa; a sinistra: 50%; margin-left: -300px;

Passaggio 2: implementa la funzione di ricerca con jQuery e Google

La funzione principale di questo sito è la ricerca di documenti con tipi di file specifici, come "PDF" e "DOC". Se sei esperto nei motori di ricerca, potresti già sapere come ottenerlo. Se vogliamo cercare documenti PDF su "jQuery", possiamo inserire il seguente testo nella casella di testo di ricerca:

 jQuery filetype: PDF

jQuery è un ottimo framework Javascript che fornisce un utile freamework JavaScript. Se stai leggendo questo articolo, penso che dovresti avere abilità jQuery di base ormai. Ma se no, va bene anche questo. Inizieremo il nostro lavoro dall'inizio.

Creiamo un nuovo file per salvare i codici Javascript / jQuery utilizzati in questo esempio. Il nome di questo file è main.js, che verrà inserito nella directory js. Il codice di riferimento utilizzato nel file HTML è ...

Le prime due righe vengono utilizzate per importare il file della libreria jQuery dal CDN di Google. Se preferisci, puoi invece usare il tuo file di libreria jQuery locale.

All'interno di main.js, aggiungi il seguente script, che verrà eseguito dopo che il DOM è pronto.

 $ (document) .ready (function () // posiziona i tuoi codici qui);

Vogliamo aggiungere le icone del tipo di file prima del testo del tipo di file sopra la casella di ricerca.

 $ (document) .ready (function () $ ("# types a"). each (function () $ (this) .css ("background": "URL trasparente ('icone /" + $ (questo ) .attr ("valore") + ".gif") no-repeat 4px center "," height ":" 100% ");););

Le icone sono posizionate nella nostra directory "icone" e il nome delle icone è impostato come (filetype) .gif. Quindi, nel codice precedente, possiamo usare il selettore $ (this) .attr ("valore") per ottenere il nome del tipo di file, come "pdf", "doc", ecc. Quindi possiamo prendere il nome del file dell'icona, che può essere utilizzato per impostare l'immagine di sfondo dell'elemento. Nel codice precedente, la funzione css () viene utilizzata per impostare lo stile CSS dell'elemento $ ("# types a").

Ora il tipo di file sopra la casella di ricerca dovrebbe essere simile a:

Ma, come puoi vedere, quando la pagina viene ricaricata, non possiamo distinguere quale tipo di file abbiamo selezionato.

Cambierà gli stili ogni volta che un utente fa clic su un'icona. L'evento onClick verrà attivato dopo che l'utente ha fatto clic su un link.

 $ ("# types a"). click (function () $ ("# 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;);

Qui, utilizziamo un colore di sfondo diverso per far apparire il tipo di file selezionato in modo diverso. Ora, il link del tipo di file selezionato ha il seguente aspetto:

Ma il problema è che, dopo che la pagina è stata ricaricata, verrà selezionato qualsiasi tipo di file. Dobbiamo dare un tipo di file selezionato predefinito dopo che la pagina è stata aggiornata.

 $ (document) .ready (function () / * inizializza i dati "filetype" * / $ ("# types a: first"). click (););

Ogni volta che la pagina viene ricaricata, il primo collegamento nella sezione dei tipi di file eseguirà un'operazione di "clic".

Funzione di ricerca

Successivamente, implementeremo la funzione di ricerca. Quando un utente fa clic sul pulsante "Seach Docs", verrà reindirizzato alla pagina dei risultati, fornita da Google. Una funzione chiamata updateLink () viene utilizzata per aggiornare il collegamento su questo pulsante di ricerca quando l'utente inserisce le sue parole chiave.

 function updateLink () $ ("# google"). attr ("href", "http://www.google.com/search?q=" + encodeURI ($ ("# word"). val ()) + "+ filetype% 3A" + encodeURI ($ ("# types"). data ("filetype")));

Nel codice sopra, usiamo la funzione attr () per aggiornare l'attributo href del pulsante di ricerca (link). $ ("# word"). val () è usato per afferrare le parole chiave nella casella di ricerca. $ ("# types"). data ("filetype") viene utilizzato per ottenere il tipo di file, che verrà impostato in $ ("# types a"). click () function. E anche in questa funzione, verrà chiamata la funzione updateLink, il che significa che l'attributo href del pulsante di ricerca verrà aggiornato ogni volta che viene modificato il tipo di file.

 $ ("# types a"). click (function () $ ("# 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 ("valore")); updateLink (); $ ( "#word"). focus (); return false;);

Abbiamo quasi finito. Ma aspetta, ora, se un utente cambia la parola chiave di ricerca dopo aver selezionato il tipo di file, cosa succederà? L'attributo href della casella di ricerca non verrà aggiornato. Non è quello che vogliamo. Quindi dobbiamo anche compensare questa possibilità.

 / * aggiorna il link quando "#word" cambia * / $ ("# word"). keydown (function (e) updateLink ();). keyup (function (e) / * invia ricerca con "invio" chiave * / if (e.keyCode == '13') $ ("# google"). click (););

Nel codice precedente, ogni volta che $ ("# word") viene modificato, ad esempio, l'utente ha modificato le parole chiave nella casella di ricerca, la funzione updateLink verrà richiamata per aggiornare il collegamento del pulsante di ricerca. Aggiungiamo anche un'ulteriore comodità. Quando un utente preme "Invio", assumiamo che l'utente significhi simulare la funzionalità del pulsante "Cerca". Sappiamo che il codice di accesso è 13, il che significa che è stato premuto il tasto "Invio": verrà attivato l'evento onClick del pulsante di ricerca.

Ora, quando digitiamo qualcosa nella casella di ricerca, il risultato verrà visualizzato come la seguente immagine. Reindirizzerà alla pagina dei risultati di ricerca di Google.

Passaggio 3: Visualizza i risultati della ricerca con il plug-in ColorBox jQuery

ColorBox è un ottimo plugin jQuery che può essere utilizzato per creare un effetto light box. Per l'uso dettagliato di questo plugin, puoi fare riferimento al suo sito web.

Prima di tutto, dovremmo scaricare il plugin ColorBox dal sito web ufficiale. L'ultima versione è 1.2.4, al momento della stesura di questo documento. Prima che possiamo usarlo, dobbiamo collegarci al file Javascript.

colorbox.css e colorbox-custom.css sono usati per controllare l'aspetto del light-box.
colorbox-custom-ie.css contiene alcuni hack solo per Internet Explorer.
jquery.colorbox.js è il file del plugin ColorBox.

Il plugin ColorBox può essere istanziato in questo modo:

 / * setup colorbox plug-in * / $ .fn.colorbox.settings.transition = "fade"; $ .fn.colorbox.settings.bgOpacity = "0,8"; $ .fn.colorbox.settings.contentCurrent = "(current / total)";

L'ID del pulsante di ricerca è "google", quindi è possibile utilizzare il selettore "$ (" # google ")" per ottenere questo elemento. Il plug-in ColorBox può essere utilizzato come segue:

 $ ("# google"). colorbox (contentWidth: "800px", contentHeight: "500px", contentIframe: true);

Abbiamo impostato la larghezza del contenuto a 800 px e l'altezza a 500 px.

Passaggio 4: aggiungere suggerimenti con il plug-in SimpleTip

SimpleTip è un semplice plugin per tooltips jQuery. È leggero e facile da usare. Possiamo scaricarlo dal suo sito ufficiale.

Ancora una volta, facciamo riferimento allo script.

Dovremmo anche definire l'aspetto del tooltip con i CSS.

 .tooltip position: absolute; imbottitura: 10px 13px; margine: 0px 0px 0px 10px z-index: 2; colore: # 303030; background-color: # f5f5b5; bordo: 2px solid # DECA7E; font-size: 12px; altezza della linea: 15px; allineamento del testo: centro;

Possiamo aggiungere questa definizione di stile nel nostro file style.css.

Ora vogliamo aggiungere il suggerimento a questi collegamenti di tipo di file. Il suggerimento apparirà quando l'utente si posiziona su ogni tipo di collegamento. I tooltip mostreranno informazioni più dettagliate sul tipo di file.

 $ ("# types a"). each (function () $ (this) .css ("background": "URL trasparente ('icons /" + $ (this) .attr ("valore") + ". gif ') no-repeat 4px center "," height ":" 100% "); $ (this) .simpletip (showEffect:' slide ', hideEffect:' slide ', posizione:' top ', offset: [ 0, -10], contenuto: $ (this) .attr ("titolo")););

Simpletips ha molti parametri per creare l'effetto. Nel codice precedente, l'effetto mostra e nascondi sono impostati come "diapositiva" e anche i contenuti dei suggerimenti sono impostati come gli stessi con l'attributo "titolo" di ogni collegamento di tipo di file.

Passaggio 5: aggiungi i gruppi di segnalibri al piè di pagina con l'addThis Widget.

Per condividere con i tuoi amici tramite alcuni siti di social network, come del.icio.us, digg, myspace, facebook, twitter e così via, Addthis offre un servizio fantastico e gratuito.

Possiamo usare il codice dal sito ufficiale e, normalmente, sembra il seguente:

Puoi anche impostare alcuni stili per ciò che questi pulsanti visualizzano. Qui inseriamo il codice nel piè di pagina della nostra pagina di esempio. Il risultato dovrebbe essere simile a:

Passaggio 6: animare il contenuto del piè di pagina.

L'ultimo passo di questo esempio è creare l'animazione quando un utente fa clic sui collegamenti del piè di pagina, come "Informazioni", "Contatti" e "Grazie".

  Di
 Cerca documenti su google, non può essere più facile.

 Questo sito è progettato per i principianti di Google per cercare rapidamente i documenti di formati mutiple.

 Divertirsi!!! 

 
  Contatto
 Sentiti libero di contattarmi in qualsiasi momento e su qualsiasi cosa, questo sito o altri argomenti.

 
  Grazie
 Ci sono molte persone che voglio ringraziare, che hanno fatto un ottimo lavoro nello sviluppo del web, che mi ha fatto capire questa pagina più facilmente. 

 1. jQuery: Un framework javascript facile da usare ma grande e potente.
 
 2. ColorBox: un plugin lightbox leggero e personalizzabile per jQuery.

 3. Simpletip: un semplice plugin tooltips per jQuery.

Questo codice verrà inserito nel tag div che ha un id di "footer". Quindi possiamo aggiungere un po 'di jQuery per controllare il display.

 / * handle footer links display * / $ ("# footLinks a"). toggle (function () $ ("# footLinks a") each (function () $ ("#" + $ (this) .attr ("title")). hide ('fast');); $ ("#" + $ (this) .attr ("title")). slideDown ('slow'); return false;, function ( ) $ ("#" + $ (this) .attr ("title")). slideUp ('slow'); return false;);

slideDown e slideUp sono usate per creare l'effetto di animazione. Il piè di pagina di questa pagina verrà visualizzato come la seguente immagine.

Abbiamo chiuso!

Ora abbiamo creato un portale di ricerca di documenti del sito Web 2.0 completo. Quali sono i tuoi pensieri? Grazie mille per la lettura.

Seguici su Twitter o iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.

Codice