Share
În acest articol, vom crea un site care caută documentul cu jQuery. Acest site va fi folosit pentru a căuta documente prin specificarea unei extensii (tip de fișier). Datele sunt apoi filtrate și trimise la Google. Vom afla multe sfaturi și abilități JQuery prin acest proces. Un plugin de culoare gri numit "ColorBox", și un plugin toolTip numit "SimpleTip" va fi, de asemenea, introdus în acest articol. Să începem.
În zilele noastre, cele mai utile instrumente pentru navigarea pe Internet sunt motoarele de căutare precum Google, Yahoo și MSN live. Din păcate, nu toată lumea știe cum să utilizeze aceste instrumente în mod eficient și corect.
În acest articol, vom folosi un mic truc de căutare Google pentru a crea un site web stil Web 2.0. De pe acest site, utilizatorul poate căuta documentele introducând un cuvânt cheie și selectând un anumit tip de fișier. Voi acorda mai multă atenție utilizării jQuery în procesul de construire a site-ului. Odată finalizată, proiectul nostru ar trebui să arate după cum urmează.
Desigur, dacă doriți, vă puteți crea propriile logo-uri sau icoane cu Photoshop. Dar, dacă sunteți un om leneș, ca mine, le puteți descărca online. Cu toate acestea, vă rugăm să acordați atenție licenței, deoarece unele dintre aceste resurse nu sunt permise pentru uz comercial.
creatr este un site minunat care oferă un serviciu de creare a logo-ului Web 2.0 online. Cel mai important, este gratuit și ușor de utilizat! Există mai multe stiluri pe care le puteți alege să vă creați logo-ul. Am ales ceva de genul următor.
Pictogramele utilizate în acest articol sunt toate din sistemul de operare Windows. Dacă preferați să folosiți alte pictograme, revizuiți pictogramele și pictogramele pentru a găsi icoane frumoase. De asemenea, puteți utiliza un motor de căutare pentru a găsi iconițe pe internet. Mergeți la iconfinder sau iconlook pentru a încerca.
Pagina noastră principală va fi similară cu cea a paginii Google.com. O schiță inițială scurtă arată după cum urmează:
Codul HTML pentru această pagină este după cum urmează.
Căutați documente cu Google! 
DOC PDF XLS PPT RTF txt BĂŢ
Căutați în DocsDespre | Contact | Multumesc |Rezultatele căutării provin de la Google, acest site nu are nicio asociere cu Google Inc..
Copyright © 2009 Acesta este doar un site demo. (BETA).
Apoi, ar trebui să adăugăm câteva stiluri la pagină, pentru a fi mai ușor de citit și mai frumos. Creați un fișier nou numit style.css pentru a salva stilurile utilizate în acest exemplu.
corp font: 12px / 1.5 Tahoma, Helvetica, Arial, sans-serif; text-align: center; margine: 0px; background-color: # f9f9f9; a: link, a: vizitat text-decoration: none; Culoare: # 6599CB; #header text-aliniere: centru; umplutura: 70px 0px 40px 0px; #header un img style-border: none; margine: 0px; #tipuri padding: 15px; #types span margin-left: 25px; #word text-aliniere: centru; font: 15pt / 17pt bold "Helvetica" normal; umplutura: 5px 10px 5px 10px; lățime: 40%; frontieră: verde verde de 3px; #google culoare: #fff; fundal: verde; font-size: 15px; text-decoration: nici unul; font-weight: bold; margine: 10px 5px 10px 5px; umplutura: 5px 10px 5px 10px; linia-înălțime: 15px; #wrapper text-aliniere: centru; #footer text-aliniere: centru; margine: 50px 0px 0px 0px; frontieră-sus: 1px solid # E4E4E4; culoare: # 808080; plutește la stânga; lățime: 600px; poziție: relativă; stânga: 50%; margin-stânga: -300px; #footer div marginea-sus: 5px; #footer #about, #footer #contact, #footer #thanks display: none; text-align: left; margine: 10 pixeli; padding: 10px; fundal-culoare: # FFFF99;
Să nu uităm să ne referim fișierul CSS extern.
Pagina dvs. ar trebui să arate astfel:
Acordați atenție acestui stil de design, care forțează conținutul paginii să rămână centrat.
#footer float: left; lățime: 600px; poziție: relativă; stânga: 50%; margin-stânga: -300px;
Funcția principală a acestui site este de a căuta documente cu tipuri de fișiere specificate, cum ar fi "PDF" și "DOC". Dacă sunteți bine-versat în motoarele de căutare, s-ar putea să știți deja cum să realizați acest lucru. Dacă dorim să căutăm documente PDF despre "jQuery", putem introduce următorul text în căsuța de text a căutării:
Tipul fișierului jQuery: PDF
jQuery este un cadru de Javascript excelent care oferă un ușor de utilizat freamework JavaScript. Dacă citiți acest articol, cred că ar trebui să aveți abilități jQuery de bază până acum. Dar dacă nu, este bine. Vom începe munca de la început.
Creați un fișier nou pentru a salva codurile Javascript / jQuery utilizate în acest exemplu. Numele acestui fișier este main.js, care va fi pus în directorul js. Codul de referință utilizat în fișierul HTML este ...
Primele două linii sunt utilizate pentru a importa fișierul bibliotecă jQuery de pe CDN-ul Google. Dacă preferați, puteți să utilizați fișierul local de bibliotecă jQuery.
În cadrul main.js, adăugați următorul script, care va fi rulat după ce DOM este gata.
$ (document) .ready (funcția () // plasați aici codurile);
Vrem să adăugăm pictogramele de tip de fișier înainte de textele tipului de fișiere de deasupra casetei de căutare.
Accentsconagua
$ (documentul) .ready (funcția () $ ("# tipuri a"). ) .attr ("valoare") + ".gif") nu se repetă 4px centru "," înălțime ":" 100% "););); Pictogramele sunt plasate în directorul "icoane", iar numele icoanelor sunt setate ca (filetype) .gif. Deci, în codul de mai sus, putem folosi selectorul $ (this) .attr ("value") pentru a obține numele tipului de fișier, cum ar fi "pdf", "doc" etc. Apoi, care poate fi folosit pentru a seta imaginea de fundal a elementului. În codul de mai sus, funcția css () este utilizată pentru a seta stilul CSS al elementului $ ("# types a").
Acum, tipul de fișier deasupra casetei de căutare ar trebui să arate astfel:
Dar, după cum puteți vedea, atunci când pagina este reîncărcată, nu putem distinge ce tip de fișier am selectat.
Vom schimba stilurile de fiecare dată când un utilizator dă clic pe o pictogramă. Evenimentul onClick va fi declanșat după ce utilizatorul dă clic pe un link.
$ (a)) .css ("background-color": "", "padding" : "# 6599CB", "padding": "5px", "color": "# 6599CB", fontWeight: "normal" , "culoare": "alb", fontWeight: "îndrăzneț"); return false;); Aici folosim culoarea de fundal diferită pentru ca tipul de fișier selectat să apară diferit. Acum, link-ul de tip de fișier selectat arată astfel:
Dar, problema este că, după reîncărcarea paginii, va fi selectat orice tip de fișier. Trebuie să dăm un tip de fișier selectat implicit după ce pagina a fost actualizată.
$ (document) .ready (functie () / * initializeaza data "filetype" * / $ ("# a a: first"). De fiecare dată când pagina este reîncărcată, primul link din secțiunea de tipuri de fișiere va efectua o operație "clic".
Apoi vom implementa funcția de căutare. Când un utilizator dă clic pe butonul "Seach Docs", el va fi redirecționat către pagina de rezultate, furnizată de Google. O funcție numită updateLink () este utilizată pentru actualizarea link-ului de pe acest buton de căutare când utilizatorul introduce cuvintele cheie.
funcția updateLink () $ ("# google") attr ("href", "http://www.google.com/search?q=" + encodeURI ($ ("#word" + "Tipul fișierului% 3A" + encodeURI ($ ("# types")) date ("filetype")); În codul de mai sus, folosim funcția attr () pentru a actualiza atributul href al butonului de căutare (link). $ ("# word") val () este folosit pentru a apuca cuvintele cheie din caseta de căutare. Datele ("filetype") sunt folosite pentru a obține tipul de fișier, care va fi setat în funcția $ ("# types a"). Și, de asemenea, în această funcție va fi apelată funcția updateLink, ceea ce înseamnă că atributul href al butonului de căutare va fi actualizat de fiecare dată când tipul fișierului este modificat.
$ (a)) .css ("background-color": "", "padding" : "# 6599CB", "padding": "5px", "color": "# 6599CB", fontWeight: "normal" , "color": "alb", fontWeight: "bolder"); $ ("#types"). "#word") focus (); return false;); Aproape am terminat. Dar așteptați, acum, dacă un utilizator modifică cuvântul cheie după ce ați selectat tipul fișierului, ce se va întâmpla? Atributul href al căsuței de căutare nu va fi actualizat. Nu asta vrem. Așadar, trebuie să compensăm și această posibilitate.
/ * actualizarea link-ului atunci când "#word" schimbă * / $ ("# cuvânt") keydown (funcția (e) updateLink ();). cheie * / dacă (e.keyCode == '13') $ ("# google"). În codul de mai sus, de fiecare dată când $ ("# cuvânt") este schimbat, de exemplu, utilizatorul a modificat cuvintele cheie din caseta de căutare, funcția updateLink va fi apelată pentru a actualiza linkul butonului de căutare. Să adăugăm, de asemenea, încă o comoditate. Atunci când un utilizator apasă "Enter", presupunem că utilizatorul înseamnă să imite funcționalitatea butonului "Căutare". Știm că codul cheie este 13, ceea ce înseamnă că tasta "Enter" a fost apăsată - vom declanșa evenimentul onClick al butonului de căutare.
Acum, când introducem ceva în caseta de căutare, rezultatul va fi afișat ca următoarea imagine. Acesta va redirecționa către pagina cu rezultatele căutării Google.
ColorBox este un plugin jQuery excelent care poate fi utilizat pentru a face un efect de casetă luminoasă. Pentru utilizarea detaliată a acestui plugin, vă puteți referi la site-ul său web.
Mai întâi de toate, ar trebui să descărcăm pluginul ColorBox de pe site-ul oficial. Ultima versiune este 1.2.4, la momentul acestei scrieri. Înainte de a putea să-l folosim, trebuie să conectăm fișierul Javascript.
Pluginul ColorBox poate fi instanțiat astfel:
/ * configurare plugin colorbox * / $ .fn.colorbox.settings.transition = "fade"; $ .fn.colorbox.settings.bgOpacitate = "0,8"; $ .fn.colorbox.settings.contentCurrent = "(curent / total)";
ID-ul butonului de căutare este "google", deci putem folosi selectorul "$ (" # google ")" pentru a obține acest element. Pluginul ColorBox poate fi folosit după cum urmează:
$ ("# google"). colorbox (contentWidth: "800px", contentHeight: "500px", contentIframe: true); Am setat lățimea de conținut la 800px și înălțimea la 500px.
SimpleTip este un plugin simplu pentru jQuery tooltips. Este ușor și ușor de utilizat. Îl putem descărca de pe site-ul său oficial.
Încă o dată, să menționăm scenariul.
De asemenea, ar trebui să definim aspectul tooltip-ului cu CSS.
.tooltip poziție: absolută; padding: 10px 13px; marcă: 0px 0px 0px 10px z-index: 2; culoare: # 303030; fundal-culoare: # f5f5b5; frontieră: 2px solid # DECA7E; font-size: 12px; linia-înălțime: 15px; text-align: centru;
Putem adăuga această definiție de stil în fișierul nostru stil.css.
Acum, dorim să adăugăm tooltip-ul la aceste linkuri de tip de fișier. Bara de instrumente va apărea atunci când utilizatorul se deplasează peste fiecare legătură de tip de fișier. Instrucțiunile vor afișa informații detaliate despre tipul de fișier.
$ (acest lucru) .css ("background": "url transparent (" icons / "+ $ (this) .attr (" value ") +". (showEffect: 'slide', hideEffect: 'slide', pozitie: 'top', offset: [] 0, -10], conținut: $ (acest) .attr ("titlu"));); Simpletips are mulți parametri pentru a crea efectul. În codul de mai sus, efectul de afișare și ascundere este setat ca "diapozitiv", iar conținutul butoanelor este setat ca același cu atributul "title" al fiecărui tip de fișier.
Pentru a împărtăși prietenului dvs. prin intermediul unor site-uri de socializare, cum ar fi del.icio.us, digg, myspace, facebook, twitter și așa mai departe, Addthis oferă un serviciu minunat și gratuit.
Putem folosi codul de pe site-ul oficial și, în mod normal, seamănă cu următorul text:
De asemenea, puteți seta anumite stiluri pentru afișarea acestor butoane. Aici am plasat codul în subsolul exemplului paginii noastre. Rezultatul ar trebui să arate astfel:
Ultimul pas al acestui exemplu este crearea unei animații atunci când un utilizator dă clic pe link-urile subsolului, precum "Despre", "Contact" și "Mulțumesc".
Despre
Căutați documente pe Google, nu poate fi mai ușor.
Acest site este destinat începătorilor Google să caute rapid documente de formate mutilate.
Bucură de ea!!!
a lua legatura
Simțiți-vă liber să mă contactați în orice moment și despre orice, acest site sau alte subiecte.
Mulțumiri
Sunt mulți oameni pe care doresc să îi mulțumesc, care au făcut o treabă foarte bună în dezvoltarea web-ului, ceea ce ma făcut să înțeleg mai ușor această pagină.
1. jQuery: Un cadru ușor de utilizat, dar puternic și puternic javascript.
2. ColorBox: Un plug-in lightbox, ușor de personalizat, pentru jQuery.
3. Simpletip: Un simplu plugin de la jQuery.
Acest cod va fi plasat în eticheta div care are un id de "subsol". Apoi putem adăuga un pic de jQuery pentru a controla afișajul.
/ * mânerul footer link-uri afișare * / $ ("# footLinks a"). comutare (funcția () $ ("# footLinks a" ("titlul"))) ascunde ("rapid");); $ ("#" + $ (this) .attr ("title")) ) $ ("#" + $ (acest) .attr ("titlu")) slideUp ('slow'); funcția slideDown și slideUp sunt utilizate pentru a crea efectul de animație. Subsolul acestei pagini va fi afișat ca următoarea imagine.
Am creat acum un portal web complet de căutare a documentelor Web 2.0. Care sunt gandurile tale? Mulțumesc mult pentru citire.
