jQuery promotivne skripte. jQuery primjer. Jednostavni primjeri jQuery skripti. Stvaranje novih elemenata
S pojavom WEB-a 2.0 razvili su se i okviri javascripta koji webmasterima omogućuju puno bržu i lakšu izradu dinamičkih elemenata web stranica. Jedan takav okvir je jQuery, koji je stekao ogromnu popularnost zbog svoje jednostavnosti i nevjerojatno male težine. Dakle, predstavljam vam 10 najkorisnijih jQuery skripti za poboljšanje sučelja vaše web stranice.
Debela kutija
Opis: Potrebno je skrenuti pozornost korisnika na neki tekst, sliku ili web obrazac kroz modalni prozor.
Kada i gdje koristiti: Kada korisniku trebate prikazati više informacija, prikažite veću sliku, postavite nekoliko pitanja putem web obrasca ili prikažite obrazac za prijavu, ali ne želite da korisnik napusti stranicu.
Skripta, primjer, dokumentacija
WordPress dodatak
Tabulacije
Opis: Omogućuje prikaz sadržaja stranice u karticama.
Kada i gdje koristiti: Kada želite osloboditi prostor na zaslonu pružanjem brz pristup Do skrivene informacije. Često se koristi u widgetima za razne premium WordPress teme.
Skripta, primjer, dokumentacija
WordPress dodatak
Coda klizač
Opis: stvara klizač, kao na snimci zaslona s web stranice Coda.
Kada i gdje koristiti: Kao i kod Code, ova skripta je izvrsna za predstavljanje proizvoda ili usluga grupiranih u odjeljke. Korisnici dobivaju priliku brzi pregled, kao i intuitivna navigacija.
Skripta, primjer, dokumentacija
Tema za WordPress
Galleria
Opis: Galleria je javascript galerija napisana u jQueryju. Učitava slike jednu po jednu i prikazuje njihove minijature.
Kada i gdje se koristi: za prikaz fotografija događaja ili proizvoda, na primjer.
Skripta, primjer, dokumentacija
jSavjet
Opis: Opisi alata implementirani u jQuery.
Kada i gdje se koristi: Kada trebate dati više informacija o objektu u kontekstu članka ili implementirati savjete korisniku u raznim web formama.
Skripta, primjer, dokumentacija
WordPress dodatak
Promjena stilova
Opis: Omogućuje posjetiteljima vaše web stranice da samostalno mijenjaju stilove dizajna "jednim klikom".
Kada i gdje koristiti: Kada želite dopustiti korisniku da odabere različite veličine fonta, prikažite informacije formatirane za mobitel ili za ispis, neka prilagodi boje. Prebacivač stilova stvarno može pomoći u poboljšanju upotrebljivosti vaše web stranice.
Skripta, primjer, dokumentacija
WordPress dodatak
Izbornik jQuery Accordion
Opis: Omogućuje vam stvaranje dinamičkih izbornika.
Skripta, primjer, dokumentacija
WordPress dodatak
Galerija klizača
Opis: predstavlja proizvode/slike u galeriji koja se može pomicati.
Kada i gdje koristiti: Kada želite smjestiti sve elemente u bočnu traku, ali nema dovoljno prostora za sve opcije.
Skripta, primjer, dokumentacija
Provjera valjanosti obrasca
Opis: Provjerite valjanost web obrazaca pomoću provjere valjanosti obrazaca kako biste izbjegli netočno ispunjena polja.
Kada i gdje se koristi: U većini oblika. Ovo pomaže korisnicima da razumiju točno gdje su netočno ispunili polja isticanjem njihovih pogrešaka.
Skripta, primjer, dokumentacija
jRžati
Opis: Prikazuje poruke u pregledniku baš kao Growl na MacOSX-u
Kada i gdje koristiti: Ako obavijestite korisnika o radnji, ali ne želite da napusti trenutnu stranicu/osvježi je. Ovo je izvrstan način za potvrdu radnji koje je izvršio korisnik, kao što je registracija. Također možete koristiti jGrowl u raznim trgovinama itd. za potvrdu dodavanja artikla u košaricu ili potvrdu transakcije.
Skripta, primjer, dokumentacija
Prije 10 godina, kada je jQuery bio tek u povojima, ekosustav preglednika bio je vrlo raznolik i svaki od proizvoda koji su tada postojali borio se sa složenošću manipuliranja DOM elementima na svoj način. Ambiciozan zadatak koji smo si postavili jQuery programeri, bio je razviti univerzalni pristup za rješavanje ovih problema i stvoriti API koji bi radio jednako dobro u svakoj situaciji.
Koliko su mogli procijeniti, nakon 10 godina postojanja, jQuery ostaje jedna od najpopularnijih JavaScript biblioteka.
Sam JavaScript sada je potpuno zreo proizvod, dobro dokumentiran i podržan od strane svih modernih preglednika. Zajednica modernih preglednika također je više konsolidirana i, u većini slučajeva, možete biti sigurni da ako je, recimo, stranica ispravno prikazana u Cromeu, tada će izgledati isto i u Firefoxu. querySelectors također podržavaju gotovo svi moderni preglednici.
Čini se da se povijest razvoja jQueryja kreće prema zalasku - zašto preopteretiti stranice i trošiti dodatne cikluse procesora ako se većina problema može riješiti standardnim sredstvima Jezik? S druge strane, u tako dugom razdoblju za računalnu industriju razvijen je ogroman broj rješenja koja se jednostavno mogu uzeti i koristiti, ovdje i sada.
Mislim da bi ovaj izbor trebao napraviti sam programer u svakoj konkretnoj situaciji, ne usredotočujući se na modu i trendove, već na zdrav razum i izglede za razvoj svoje kreacije.
U ovoj recenziji prikupio sam sve besplatne jQuery dodatke za koje znam, a koji se trenutno aktivno razvijaju ili koji su ažurirani barem jednom tijekom prošle godine. Neke od njih sam aktivno koristio i koristim u svojoj praksi, neke poznajem samo površno, ali su me impresionirali svojim mogućnostima. Među njima ima iznimno nesvakidašnjih, napravljenih s puno mašte. Čak i ako ne nađete način da ih upotrijebite u svojim projektima, možda će vas inspirirati da kreirate vlastita, još nevjerojatnija rješenja.
multiscroll.js Zanimljivo rješenje za privlačenje pozornosti posjetitelja - pomicanje stranice je napravljeno u obliku dva panela, od kojih jedan klizi prema gore, a drugi dolje, otvarajući sljedeći blok. Također radi odlično na svim, čak i vrlo zastarjelim preglednicima.
Vrlo originalan dodatak za koji mislim da će se svidjeti posjetiteljima ako imate puno dugog tekstualnog materijala.
To je jedna od najpopularnijih JavaScript biblioteka. I to nije iznenađujuće za one koji ga koriste. Omogućuje vam da pojednostavite, ubrzate i, što je najiznenađujuće, poboljšate razvoj JavaScript skripti.
Prednosti:
- Vrlo zgodan rad s elementima, na temelju CSS selektora.
- Izvrsna kompatibilnost s više preglednika. Mnogi programeri ne razmišljaju o kompatibilnosti s više preglednika, međutim, to je potrebno jer je isti kod različitim preglednicima mogu se drugačije obrađivati. uzima u obzir sve ove nijanse i više ne morate razmišljati o tome.
- Izvrsne mogućnosti animacije. Animacija ukrašava stranicu i čini je ugodnijom za korištenje. Jednostavno je nemoguće napraviti animaciju lakšom od onoga što je implementirano u .
- Veliki broj gotovih dodataka. Za izradu istog klizača slike u JavaScriptu može biti potrebno nekoliko dana. I možete instalirati i konfigurirati gotov dodatak u nekoliko minuta.
Na temelju ovoga, svatko tko razvija skripte u JavaScriptu trebao bi znati. A svrha ove kategorije je naučiti vas kako koristiti, a također pokazati primjere korištenja, na primjer, iz moje vlastite prakse.
Nakon čitanja članaka o jQueryju, naučit ćete:1) Kako instalirati.
2) Što je funkcija $() u .
3) Kako odabrati elemente u .
4) Kako raditi s uzorkovanjem na .
5) Kako dodati i ukloniti elemente u .
6) Kako obraditi događaje na .
7) Kako se radi animacija na .
8) Kako zumirati slike na .
9) Kako napraviti gladak gumb "povratak na vrh" na .
10) Kako dinamički učitavati datoteke na poslužitelj.
11) Kako to učiniti Adaptivni izgled na .
12) Kako poslati asinkrone zahtjeve na
13) Kako poslati Ajax zahtjeve pomoću metoda $.post() i $.get().
14) Kako napraviti radio gumb u obliku klizača na .
15) Kako instalirati glatki klizač.
16) Kako napraviti arhivu pomoću dodatka za .
17) Kako razgledati stranicu na .
18) Kako napraviti lijepe kartice koristeći JQuery.
19) Kako stvoriti opise na web stranici pomoću dodatka za .
20) Kako stvoriti lijepu traku napretka pomoću dodatka za .
21) Kako napraviti bravu pomoću predloška na .
22) Kako dodati zvučnike na web stranicu s bibliotekom dynamo.js.
23) Kako napraviti video u pozadini pomoću .
24) Kako potvrditi slanje pošte na .
25) Kako napraviti lijep i učinkovit slajder koristeći JQuery.
26) Kako napraviti prekrasan padajući popis na .
27) Kako napraviti prekrasan skočni prozor u JQueryju koristeći WebUI-Popover.
28) Kako napraviti lijepe obavijesti u JQueryju koristeći dodatak Noty.
29) Kako napraviti prekrasan padajući izbornik sa zanimljivim efektom koristeći CSS i .
30) Kako učiniti pozadina u obliku čestica na.
31) Kako napraviti interaktivnu usporedbu dvije fotografije koristeći JQuery.
32) Kako napraviti kružni klizač u JQueryju.
33) Kako napraviti oblake koristeći JQuery.
34) Kako prikazati vrijeme proteklo od objave posta na .
35) Kako se povući Posebni simboli na JQueryju.
36) Kako napraviti brojač odbrojavanja u JQueryju.
37) Kako napraviti prilagođeni izbornik koristeći JQuery.
38) Kako napraviti animaciju prilikom učitavanja stranice na .
40) Kako napraviti klizni izbornik koristeći JQuery.
41) JQuery LightGallery - dodatak za izradu galerija.
42) Kako omotati element u pregledniku ili izgledu uređaja na .
43) Kako učiniti prekrasna galerija s sortiranjem u JQueryju.
44) Kako napraviti interaktivni 3D objekt koristeći JQuery.
45) Kako napraviti popup prozor koristeći JQuery.
46) Kako napraviti efekt paralakse pomicanja.
47) Kako napraviti hamburger meni koristeći CSS i JS. 1. dio.
48) Kako napraviti hamburger jelovnik koristeći CSS i JS. 2. dio.
49) Kako napraviti pop-up klik pretraživanje.
50) Kako potvrditi obrazac koristeći jQuery.
51) Kako napraviti telefonsku masku za unos koristeći jQuery.
52) Kako raditi s jQuery bibliotekom.
53) Kako raditi s jQuery UI bibliotekom.
54) Kako koristiti jQuery UI Slider.
55) Kako koristiti widget jQuery UI Datapicker.
56) O dodatku za kartice EasyTabs.
57) Kako prilagoditi klizač BxSlider.
58) Kako postaviti mjerač vremena na web mjesto.
59) Kako napraviti AJAX obrazac bez ponovnog učitavanja stranice.
60) Kako stvoriti efekt ispisanog teksta na web stranici.
61) Korištenje stvarnog primjera o animaciji SVG vektora.
62) Filtri u jQueryju.
63) Kako dobiti selektor u jQueryju.
64) Kako manipulirati atributima u jQueryju.
65) Kako rade jQuery događaji miša.
66) Kako jQuery efekti rade.
67) Kako učiniti (1. dio).
68) Kako napraviti skočni prozor skočni prozor na jQuery (2. dio).
69) Kako filtrirati prema prvim slovima koristeći jQuery.
70) Kako animirati gumb izbornika hamburgera.
71) Kako napraviti odgovarajući jelovnik za hamburgere.
72) Kako napraviti prvi mobilni izgled.
73) Kako napraviti glatko sidro koristeći jQuery.
74) Kako pomicati stranicu prema gore.
75) Kako napraviti widget harmonike knjižnice.
Humane.js
Dobra Jquery skripta koja vam omogućuje prikaz upozorenja na stranici u obliku skočnih prozora. Podržava mobilne uređaje, lagan je, dobro dokumentiran i, što je najvažnije, obavještava vas nenametljivo, bez ometanja vašeg iskustva gledanja.
Impress.js
Skripta vam omogućuje stvaranje izvrsnih prezentacija na web mjestu. Širok raspon mogućnosti postavke, podrška za upravljanje tipkovnicom. Preporučam pogledati demo kako bi bilo jasnije o čemu govorimo.
PDF.js
Jako zanimljiv scenarij. Omogućuje generiranje pomoću HTML5 PDF dokument od sadržaja stranice. Sada, da biste preuzeli članak u PDF-u, više ne morate koristiti usluge trećih strana, sve se može učiniti, kako kažu, "bez napuštanja blagajne"
jQuery Transit
Vrlo sofisticirana JQuery skripta koja može učiniti gotovo sve s objektima. Stišće, pomiče, rasteže, uvija na bilo koji način - puno mogućnosti za korištenje. Koristi CSS3 mehanizam transformacije i teži vrlo malo - samo 2 kilobajta u komprimiranom obliku.
ResponsiveSlides.js
Dobre vijesti za one koji optimiziraju svoje stranice za mobilne uređaje pomoću @media. Ovaj mali klizač radi sa svim preglednicima počevši od IE6, Mobilni uredaji na svim modernim operativnim sustavima i omogućuje vam skaliranje slika kako bi odgovarale razlučivosti zaslona uređaja. Obavezna oprema za sve mobilne programere
Response.js
Alat za skripte za izradu web stranica prilagođenih mobilnim uređajima. Podržava HTML5, ima hrpu postavki za ugodan rad programer.
Slabtext
Neobična skripta koja vam omogućuje stvaranje velikih naslova koji su sada moderni. Princip rada je sljedeći: skripta uzme red, prebroji znakove, podijeli ga na dužinu retka i pametno izračuna koliko je znakova potrebno u svakom retku, vodeći računa o podjeli na riječi. Zatim dodaje malo magije i... bolje je pogledati demo, jer nemam dovoljno riječi da objasnim kako radi
Scrollrama.js
Zanimljiva skripta koja vam omogućuje implementaciju različitih efekata pomicanja na stranici. Usput, ovi efekti pomicanja dobivaju na popularnosti, primjećujem ih na mnogim stranicama.
Textualizer.js
Omogućuje vam primjenu raznih animacija na doslovno svako slovo na stranici. Vrlo prilagodljiv, dobra kompatibilnost s više preglednika, lagan i dovoljno lijep dodatak za dodavanje malo "kreativnog" nereda vašoj stranici
Ljepljiv
Dobra skripta koja vam omogućuje da bilo koji element na stranici učinite uvijek vidljivim, na primjer, kada se pomičete prema dolje, Glavni izbornik uvijek će ostati na mjestu. Isto možete učiniti s bočnom trakom ili bilo kojim drugim elementom.
Za one koji se dvoume trebaju li ili ne koristiti JQuery skripte ili one previše usporavaju učitavanje - ne brinite. Glavna stvar je ne pretjerati s ljepotom i funkcionalnošću, a onda će sve sigurno biti sjajno!
Sigurno ste čuli za prekrasnu Javascript biblioteku zvanu jQuery. Što je zapravo jQuery?
Kako olakšati život web developeru? Gdje početi? jQuery čini pisanje Javascripta zabavnim i lakšim. Uz ovu biblioteku, mnogi prilično složeni aspekti Javascripta mogu se lako implementirati u bilo koju aplikaciju.
Današnja lekcija će vam reći kako započeti s jQueryjem i kako napisati svoju prvu skriptu.
Što je jQuery?
jQuery je vrlo lagana Javascript biblioteka (neki je nazivaju okvirom) koja uklanja glavobolju pisanja Javascript koda. Ima puno vrlo moćnih značajki, kao što je DOM praćenje, dodavanje prekrasnih efekata i animacija elementima, super jednostavne Ajax tehnike i metode. Na glavnoj stranici jQuery stranice, najprecizniji opis, po mom mišljenju:
jQuery je brza i koncizna biblioteka koja pojednostavljuje rukovanje događajima, animaciju i Ajax interakciju za brži web razvoj. jQuery je dizajniran da promijeni način na koji je JavaScript napisan.
Koje su prednosti jQueryja?
Pogledajmo na brzinu neke od prednosti i svojstava ovog okvira:
Količina koda (potrebnog za pokretanje skripte) značajno je smanjena u usporedbi s JavaScriptom, što zauzvrat znači manje utrošenog vremena i čitljiviji kod. U ostatku članka razmotrit ćemo neke primjere.
Mnogo lakše razumjeti kôd (za razliku od JavaScripta). U našem svijetu, što prije završite proces programiranja, više vremena možete posvetiti drugim ciljevima.
Vrlo zgodna dokumentacija i aktivna zajednica, uvijek spremna pomoći ako je potrebno.
Korištenje Ajaxa postaje puno lakše. Potrebno vam je samo 5 redaka koda (ponekad i manje) za izradu jednostavnog Ajax zahtjeva.
Ogroman broj dodataka s kojima možete učiniti gotovo sve.
jQuery je zabavan :)
Kako započeti?
Prije svega, morate posjetiti početna stranica službenu web stranicu jQuery i preuzmite najnoviju verziju ovog okvira. Nakon preuzimanja ovu datoteku trebate uploadati na svoj hosting, te u zaglavlju dokumenta napisati poveznicu na ovu datoteku.
Alternativno, možete koristiti pomoć velikog Googlea i staviti poveznicu na njihov server, gdje se uvijek nalaze najnovije verzije bilo kojeg frameworka. Potrebnu poveznicu možete pronaći.
Je li dokument spreman?
Da bismo izvršili našu prvu jQuery skriptu, moramo umotati cijelu našu skriptu u funkciju. Ova funkcija će se izvršiti kada je DOM potpuno spreman (kada je “dokument spreman” - doslovni prijevod s engleskog). Imajte na umu da je ovo vrlo slično popularnom događaju 'onload', ali nije isto. Pogledajmo primjer:
$(dokument).ready(function())( //Kod ovdje ));
Gore kažemo jQueryju da izvrši bilo koji kod unutar funkcije, s potpuno spremnim DOM-om. To ima svojih prednosti, unatoč činjenici da mnogima možda nije jasno. Prije svega, ovom tehnikom potpuno odvajamo Javascript od HTML-a. Drugo, ne moramo čekati da se stranica potpuno učita, DOM je dovoljan za učitavanje.
Za lijene programere ili za one koji broje svaki znak, možete dodatno skratiti gornji kod:
$(funkcija())( //Kod ovdje ));
Vaša prva jQuery skripta
Već znamo kako referencirati knjižnicu. Također razumijemo nešto o funkciji document.ready. Sada je vrijeme da napišete jednostavan scenarij.
Učinimo to što je moguće jednostavnijim. Za ovaj primjer, napravimo stranicu s tekstom i citatom na kraju. Želimo prikazati ponudu samo ako korisnik klikne na gumb. U nastavku pogledajte kôd potreban za ovo:
$(dokument).spreman(funkcija())(
var myQuote = $("#my_quote");
mojCitat.sakrij();
$(".button").click(function())(
mojCitat.show(500);
});
});
Pogledajmo pobliže cijeli kod.
Kao što je gore spomenuto, sav kôd koji treba izvršiti stavljamo unutar funkcije $document.ready().
Dodjeljujemo ID naše ponude (my_quote) varijabli myQuote. Sada imamo pristup citatu s id-om my_quote.
To je sve. Kada pritisnete tipku 0,5 sekundi, prikazat će se citat. Vrlo jednostavno, zar ne?
Nastavit će se....
Hvala na pozornosti! Sve najbolje!