Siç e dini tashmë, një nga cilësitë kryesore të bibliotekës jQuery është se është shumë e lehtë për të gjetur elementë dhe aftësi për t'i manipuluar më tej ato. Pra, lista e këtyre manipulimeve mund të zgjerohet duke organizuar metoda të reja për objektin jQuery. Të realizuara në një skedar të veçantë, shtesa të tilla formojnë shtojca për bibliotekën jQuery.
Më tej, duke përshkruar rregullat për krijimin e shtojcave tona, ne do të zbatojmë një shtojcë të veçantë të plotë si shembull. Funksionaliteti i tij do të jetë shtimi i një sjelljeje të re për elementët e zgjedhur - ndryshimi i ngjyrës në lëvizje. Le ta quajmë shtojcën responsiveBlock.
Krijimi i një skedari me një plugin dhe lidhja e tij
Zakonisht, shtojcat javascript ndodhen në skedarë të veçantë. Ekziston një konventë për skedarët e shtojcave jQuery që ata duhet të ndjekin formatin jquery.plaginName.js. Kështu, skedari me shtojcën tonë do të duhet të quhet jquery.responsiveBlock.js.
Për ta bërë shtojcën tonë të disponueshme në faqe, duhet të lidhni skedarin me bibliotekën jQuery dhe më pas skedarin js me shtojcën tonë shtesë:
~ lt ~ skript src = "jquery.min.js" ~ gt ~~ lt ~ / skript ~ gt ~ ~ lt ~ skript src = "jquery.responsiveBlock.js" ~ gt ~~ lt ~ / skript ~ gt ~
Baza për shtojcën
Ky variabël në trupin e një metode përmban gjithmonë objektin aktual jQuery (ai në të cilin është thirrur metoda). Për të përshkuar të gjithë elementët e përzgjedhur individualisht, ne përdorim metodën .each (). Dhe për të qenë në gjendje të vazhdojmë zinxhirin e metodave, metoda jonë do të duhet të kthejë objektin aktual jQuery:
(funksioni ($) (jQuery.fn .responsiveBlock = funksioni () (var make = funksioni () ();)) (jQuery);
Shtimi i veçorive në një shtojcë
Shumica e shtojcave kërkojnë cilësime. Në shtojcën tonë, për shembull, do të jetë shumë e dobishme të jeni në gjendje të specifikoni ngjyrën e një elementi ndërsa kursori nuk qëndron pezull mbi të dhe ngjyra pas pezullimit. Ekziston një mënyrë e thjeshtë për të organizuar cilësimet për shtojcën jQuery. Kjo do t'ju lejojë të vendosni një listë të pronave, si dhe vlerat e tyre të paracaktuara. Në të njëjtën kohë, mund të vendosni vlerat tuaja për këto veti në momentin e instalimit të shtojcës në një element, në parametrin e parë:
(funksioni ($) (jQuery.fn .responsiveBlock = funksioni (opsionet) ( // Vendosni një listë të vetive dhe specifikoni vlerat e paracaktuara për to. // Nëse, kur thirrni metodën, me porosi // variantet e disa prej tyre, atëherë ato do të mbishkruhen automatikisht // standardet përkatëse opsionet = $ .extend ((defColor: "e bardhë", hoverColor: "e kuqe"), opsionet); var make = funksion () ( // zbatimi i funksionimit të metodës me një element të veçantë faqeje); kthej këtë .secili (bëj); // në fund, metoda responsiveBlock do të kthejë objektin aktual jQuery); )) (jQuery); // tani mund të vendosni shtojcën me cilësimet e paracaktuara:$ ("div: i pari") .responsiveBlock (); // ose specifikoni vlerat tuaja për disa ose të gjitha cilësimet$ ("div: fundit") .responsiveBlock ((defColor: "#bbbbbb")); $ ("ul") .responsiveBlock ((defNgjyra: "#aaaaaa", hoverNgjyra: "jeshile"));
(Për një kuptim më të mirë të këtij shembulli, duhet të njiheni me qëllimin e funksionit $ .extend).
Më sipër është shablloni më i zakonshëm i shtojcave jQuery. Prandaj, nëse vendosni të shkruani shtojcën tuaj, atëherë mund të filloni me siguri me të (natyrisht, me emrin tuaj të shtojcës dhe listën tuaj të cilësimeve).
Zbatimi i mëtejshëm
~ lt ~! DOCTYPE html ~ gt ~ ~ lt ~ html ~ gt ~ ~ lt ~ kokë ~ gt ~ ~ lt ~ script src = "http://code.jquery.com/jquery-latest.min.js" ~ gt ~~ lt ~ / skript ~ gt ~ ~ lt ~ style ~ gt ~ div (mbushje: 10 px; margjina: 5 px; kufiri: 3 px e kuqe e fortë) ~ lt ~ / style ~ gt ~ ~ lt ~ / kokë ~ gt ~ ~ lt ~ body ~ gt ~ ~ lt ~ div ~ gt ~ Blloko në faqe ~ lt ~ / div ~ gt ~ ~ lt ~ skript ~ gt ~ (funksion ($) (jQuery.fn.responsiveBlock = funksion (opsione) (opsione = $ .extend ((defColor: "e bardhë", // ngjyra e elementit mbi të cilin nuk ka kursor hoverNgjyra: "e kuqe" // ngjyra e elementit mbi të cilin kursori qëndron pezull), opsionet); var make = funksion () (// këtu kjo ndryshore do të përmbajë një element të veçantë // DOM, në të cilin do t'ju duhet të aplikoni // efektet e shtojcës $ (this) .css ("background-color", options.defColor) . mouseenter (funksioni () ($ (ky) .css ("background -color", options.hoverColor);)) .mouseleave (funksioni () ($ (this) .css (" background-color", options.defColor) ;));); ktheje këtë.secili (bëj);) ;)) (jQuery); $ ("div") responsiveBlock (); ~ lt ~ / skript ~ gt ~ ~ lt ~ / trup ~ gt ~ ~ lt ~ / html ~ gt ~
Gjenerimi i ngjarjeve
Biblioteka jQuery ju lejon të organizoni ngjarjet tuaja në elementë dhe më pas të vendosni mbajtësit e tyre (si ngjarjet onClick ose onMousemove). Për të gjeneruar ngjarjet tuaja në elementë të përzgjedhur, duhet të përdorni metodën .trigger () dhe mund të vendosni trajtuesit e tyre duke përdorur .on (). Kështu, shtojcat mund të ofrojnë jo vetëm funksionalitet të ri, por edhe një sistem ngjarjesh të lidhur që mund të përdorë çdo përdorues i shtojcës suaj.
Për të parandaluar që emrat e ngjarjeve të shtojcave tuaja të përplasen me emrat e ngjarjeve të huaja, përdorni hapësirat e emrave. Mënyra më e përshtatshme për ta bërë këtë është të përdorni emrin e vetë shtojcës.
Në shtojcën tonë, ju mund të organizoni një ngjarje statusChange që do të ndodhë kur gjendja e një elementi ndryshon (nëse kursori është i vendosur mbi ose jo):
(funksioni ($) (jQuery.fn .responsiveBlock = funksioni (opsionet) (opsionet = $ .extend ((defNgjyra: "e bardhë", // ngjyra e elementit mbi të cilën nuk ka kursor hoverNgjyra: "e kuqe" // ngjyra e elementit mbi të cilin lëviz kursori), opsione); var make = funksion () ( // këtu kjo ndryshore do të përmbajë një të veçantë // Elementi DOM për të cilin do t'ju duhet të aplikoni // ndikimi i shtojcës$ (this) .css ("background-color", options.defColor) .mouseenter (funksioni () ($ (this) .css ("background-color", options.hoverColor) .trigger ("responsiveBlock.stateChange") ; // - thirrje ngjarje)) .mouseleave (funksioni () ($ (kjo) .css ("background-color", options.defColor) .trigger ("responsiveBlock.stateChange"); // - thirrje ngjarje)); ); kthej këtë .secili (bëj); ); )) (jQuery); // tani do të jetë e mundur të lidhen mbajtësit e ngjarjes StateChange me elementët e faqes:$ ("div") .on ("responsiveBlock.stateChange", mbajtës);
Pavarësisht nga kaq shumë dokumentacion për shkrimin e shtojcave jquery, nuk ka askund këshilla të mira praktike që mund të gjenden. Nuk ka asnjë dokument të vetëm shembull që përshkruan se çfarë cilësish duhet të ketë një shtojcë e mirë jquery. Por ju jeni me fat sot, në këtë artikull do të shqyrtojmë 12 këshilla të shkëlqyera për t'ju ndihmuar të shkruani një shtojcë të shkëlqyer jquery.
Në këtë artikull, ne do të fokusohemi më pak në vetë kodin Java Script dhe do t'i kushtojmë më shumë vëmendje këshillave praktike.
1 - Shkruani një shtojcë me shabllonin e duhur
Ka disa shabllone që korrespondojnë në një shkallë ose në një tjetër me "mënyrën e duhur" për të shkruar shtojca. Nëse nuk i ndiqni këto modele, shtojca juaj mund të mos funksionojë siç duhet. Këtu është një nga modelet më të njohura:
(funksioni ($, dritare, i papërcaktuar) ($ .fn.myPlugin = funksion (opts) (var standardet = (// vendosni variablat tuaja të paracaktuara) // shtoni opsione të personalizuara në opsionet e parazgjedhura var = $ .extend (parazgjedhur, opts || ()); ktheje këtë.secilin (funksioni () (// jQuery zinxhir // veprimet e shtojcave));)) (jQuery, dritare);
Së pari, ne krijojmë një funksion anonim që do të na mbrojë nga përdorimi i variablave globalë. Si parazgjedhje, tre argumente kalojnë $, dritare dhe të papërcaktuara. Ato do të kërkohen nga bërthama jQuery.
Më pas, do të shkruajmë një shabllon të shtojcës jQuery, $ .fn.PluginName. Në këtë mënyrë ne regjistrojmë shtojcën në mënyrë që të mund të përdoret në formatin $ (përzgjedhës) .metod (). Nëse dëshironi ta bëni drejtpërdrejt në vend që të shkruani një shtojcë që përdor funksione, shkruani si më poshtë:
$ .PluginName = funksion (opsione) (// opsione dhe veprime të shtojcave)
Ky lloj shtojce nuk mund të ketë një zinxhir funksionesh, ai do të përbëhet nga një funksion i drejtpërdrejtë. Për shembull:
$ .splitInHalf = funksion (stringToSplit) (gjatësia var = stringToSplit.length; var stringArray = stringToSplit.split (stringToSplit); ktheje stringArray;)
Në këtë kod, ne po kthejmë një grup vargjesh. Për qartësi, një shembull tjetër:
$ .getOddEls = funksion (jQcollection) (// kthim jQcollection.filter (funksion (indeks) (var i = indeks + 1; kthim (indeksi% 2! = 0);));
Në këtë rast, përdoruesi merr një objekt jQuery, një filtër, i cili është marrë nga koleksioni jQuery. Shtojcat mund të kthejnë si vargje ashtu edhe vargje, numra, funksione dhe lloje të tjera të dhënash.
2 - Dokumentoni kodin tuaj (i saktë)
Gjëja më e rëndësishme që mund të bëni kur publikoni kodin tuaj është dokumentimi. Kjo do të thotë që ju duhet t'u shpjegoni zhvilluesve se çfarë bën ose mund të bëjë kodi juaj. Asnjë përdorues nuk dëshiron të hamendësojë se çfarë është në gjendje të bëjë kodi juaj.
Dokumentacioni është një praktikë që nuk kërkon rregulla të veçanta për zbatimin e tij. Megjithëse, dhe kështu është e qartë se sa më i përshtatshëm dhe i detajuar të jetë, aq më mirë.
Shtë e nevojshme të dokumentoni si brenda kodit (duke komentuar) ashtu edhe jashtë - në një dokument të veçantë, përshkruani secilën klasë, metodë, opsion, rastet e përdorimit të tyre etj.
3 - Bëni shtojcën tuaj fleksibël në cilësime
Shtojcat më të njohura predispozojnë mundësinë për të hyrë në variablat në mënyrë që përdoruesit të mund të kontrollojnë disa nga funksionalitetet e shtojcës. Gjithashtu, gjëja e mirë është aftësia për të personalizuar cilësimet tuaja. Për shembull, kur krijoni një shtojcë rrëshqitës, cilësimet e duhura do të ishin shpejtësia e rrëshqitjes, lloji i shfaqjes së rrëshqitjes dhe shtrirja e bllokut të rrëshqitësit.
Është gjithashtu praktikë e mirë që të kemi mundësi të aksesojmë emrat e klasave dhe ID-të me të cilat zgjedhim elementin DOM. Së bashku me këtë, ata gjithashtu duhet të jenë në gjendje të hyjnë në funksionin e kthimit të thirrjes sa herë që thirret. Ose, kur rrëshqitësi hapet dhe kthehet në elementin e parë (foto).
"Është detyra juaj të mendoni për përdorshmërinë dhe nevojat e përdoruesve."
Le të marrim një shembull tjetër: një shtojcë i bën një kërkesë një API, duhet të jetë në gjendje të aksesojë objektin e kthyer. Këtu është një shembull i këtij koncepti:
$ .fn.getFlickr = funksion (opts) (ktheje këtë.secil (funksionin () (// jQuery chainability var defaults = (// opsionet e paracaktuara cb: funksioni (të dhënat) (), flickrUrl: // vlerat e paracaktuara në thirrni API) // zgjeroni opsionet me opsione të personalizuara var = $ .extend (parazgjedhjet, opsionet || ()); // thirrni funksionet asinkrone dhe më pas kthejeni thirrjen // kaloni objektin e kthyer në API $ .ajax (flickrUrl, funksioni (dataReturned ) ( option.cb.call (kjo, të dhënat e kthyera);));)))
Ky kod na lejon të aksesojmë të dhënat duke përdorur rreshtin e mëposhtëm:
$ (përzgjedhës) .getFlickr (funksioni (fdata) (// të dhënat flickr në objektin fdata));
Një mënyrë tjetër për të aksesuar të dhënat, duke përdorur grepa (grepa) si opsione. Në jQuery 1.7.1 e lart, ne mund të përdorim .on (Emri i ngjarjes, funksioni () ()) pasi të telefonojmë shtojcën tonë për të përdorur sjelljen e shtojcës në funksionet tona të përdoruesit. Për shembull, shtojca më poshtë është një shembull i mirë se si të zbatohet kjo:
$ .fn.getFlickr = funksion (opts) (kthejeni këtë.secilin (funksionin (i, el) (var $ this = el; var defaults = (flickrUrl: "http://someurl.com") vari opsionet = $. shtrirje (parazgjedhur, zgjedh || ()); $ .ajax (flickrUrl, funksioni (dataReturned) ($ this.trigger ("callback", dataReturned);)) gabim (funksion () ($ this.trigger ("gabim ", të dhënat u kthyen);))))))
Kjo na jep mundësinë të thërrasim shtojcën getFlickr, plus t'i bashkojmë disa "dëshira".
$ (përzgjedhës) .getFlickr (opts) .on ("callback", funksion (të dhëna) (// veprim)) on ("gabim", funksioni () (// gabim i trajtuar));
Mund të mos e kuptoni se sa e rëndësishme është t'i siguroni shtojcës tuaj jQuery fleksibilitet dhe personalizim. Sa më komplekse të jetë shtojca juaj, aq më shumë cilësime duhet të përmbajë.
4 - Mos përdorni shumë konfigurime
Pavarësisht fjalëve të mëparshme, është një gabim i madh përdorimi i shumë cilësimeve. Për shembull, është shumë i përshtatshëm për zhvillimin e ndërfaqes së përdoruesit të përdorë shtojca që kanë të gjitha argumentet e paracaktuara.
$ (përzgjedhës) .myPlugin ();
Në përgjithësi, ndonjëherë kjo nuk është realiste, pasi përdoruesi dëshiron të jetë në gjendje të personalizojë funksionalitetin. Në këtë rast, duhet të siguroni si "parazgjedhjen" dhe aftësinë për të personalizuar shtojcën. Por, përpiquni të përdorni vetëm parametrat e nevojshëm, siç tregohet në këtë shembull të marrjes së cicërimave (shtojca përdor vetëm një parametër "emër përdoruesi").
$ (zgjedhës) .fetchTweets ("jcutrell");
Të tilla shtojca janë shumë të njohura në mesin e zhvilluesve ... ai merr cicërima dhe i mbështjell ato në një etiketë paragrafi, gjithçka që duhet të bëjë është të fusë emrin e përdoruesit.
5 - Zhvendos udhëzimet CSS në një skedar të veçantë
Natyrisht, kjo vlen vetëm për shtojca të caktuara ... por përpiquni të vendosni të gjitha udhëzimet CSS në një skedar të veçantë. Kjo do ta bëjë më të lehtë krijimin e UI.
Shumica e shtojcave vijnë të bashkuara me imazhe dhe stile CSS. Por mos harroni këshillën e dytë - dokumentoni stilet CSS gjithashtu me imazhe. Zhvilluesit nuk kanë gjasa të jenë të gatshëm të shikojnë kodin për të gjetur atë që duhet të ndryshojnë.
Është më i përshtatshëm për të përdorur stilimin bazuar në aksesin në klasë / ID. Por klasat dhe ID-të duhet gjithashtu të jenë të disponueshme dhe të dokumentuara në mënyrë që përdoruesi të mos duhet të përcaktojë se çfarë po ndodh atje.
6 - Jepni shembuj të përdorimit të shtojcës suaj
Nëse nuk mund të jepni shembuj të aftësive të shtojcave tuaja, është më mirë të mos filloni ta shkruani atë. Përdoruesit nuk do ta shikojnë atë për një kohë të gjatë, ata thjesht do të largohen për të kërkuar një tjetër.
Nuk është e vështirë, sepse ju jeni zhvilluesi i shtojcave. Mos u bëni dembel. Këtu janë disa ide të mira për shembuj:
- Shembulli "Hello World" është gjithmonë i dobishëm për shtojcat që punojnë me HTML dhe CSS.
- Shembuj të avancuar - ofrojnë një mundësi për të parë të gjitha aspektet e funksionalitetit të shtojcës. Shembujt duhet të shfaqin numrin maksimal të opsioneve dhe aftësive.
- Shembuj integrimi - nëse shtojca juaj ka aftësinë të përdorë shtojca të tjera. Sigurohuni që të tregoni se si të integroni një shtesë tjetër në kodin tuaj.
7 - Shkruani një shtojcë të krahasueshme me shumicën e versioneve të jQuery
jQuery, si çdo bibliotekë e mirë, rritet dhe zhvillohet. Disa metoda të vjetra nuk janë më të disponueshme, disa të reja po prezantohen. Një shembull i mirë për këtë është metoda .on (), e cila është një zgjidhje gjithëpërfshirëse për delegimin e ngjarjeve. Nëse shkruani një shtojcë duke përdorur këtë metodë, njerëzit që përdorin jQuery 1.6 do të lihen jashtë. Nuk dua të them që kodi juaj duhet të përmbajë metoda të vjetruara, por sigurohuni që të përfshini në dokumentacion se cilin version të jQuery po përdorni.
8 - Mbani një Ndryshim
Së bashku me përditësimin e kodit të shtojcës për versionin e ri të jQuery, është gjithashtu e nevojshme të monitorohen dhe dokumentohen të gjitha përditësimet. Mënyra më e mirë për ta bërë këtë është përdorimi i shërbimit të mirënjohur GitHub. Ky është një depo publike ku mund të ruani të gjitha versionet e shtojcave, ndryshimet dhe më shumë.
9 - Shkruani një shtojcë sipas kërkesës
Le të jemi të sinqertë, disa shtojca janë të sikletshme, ka disa që nuk mund të quhen fare shtojca. Pra, le të shkruajmë shtojca që janë në kërkesë! Mbani mend, bota nuk ka nevojë për një shtesë tjetër rrëshqitëse, tashmë ka shumë prej tyre.
Nëse vendosni të shkruani një shtojcë për hapësirën e zhvilluesve social, gjeni një arsye për ta shkruar atë. Siç na pëlqen të themi, "Pse të rishpikësh timonin"? Eshtë e panevojshme të thuhet, ndonjëherë mënyra të reja dhe më të mira për të bërë të njëjtën gjë janë të mirëseardhura. Por duhet të ketë arsye praktike ngjitëse për këtë.
10 - Ju lutemi jepni një version të ngjeshur të kodit
Një këshillë kaq e vogël, por shumë e arsyeshme! Versioni i ngjeshur e bën shtojcën tuaj më të dobishme. Është gjithashtu e rëndësishme që zhvilluesit të dinë se sa do të "peshojë" produkti juaj.
Kur kompresoni kodin tuaj, mos harroni të jepni një version të pakompresuar.
11 - Kodi juaj është shumë i zgjuar
Kur shkruani një shtojcë jQuery, supozohet se do të përdoret nga të tjerët ... apo jo? Për këtë arsye, kodi juaj i shtojcës duhet të jetë sa më i lexueshëm. Nëse jeni duke skalitur gjithçka në një rresht ose nuk i emërtoni variabla në mënyrë semantike, kjo e bën të vështirë leximin e kodit. Kodi i formatuar mirë, është një shtesë e bukur për dokumentacionin. Dhe mos u shqetësoni për emrat e gjatë të variablave, thjesht mund ta zvogëloni kodin.
Nëse emërtoni variablat "a" ose "x" - kjo është e gabuar!
Gjithashtu, përpiquni të zvogëloni numrin e rreshtave në secilin funksion. Është më e lehtë për t'u kuptuar dhe më logjike në këtë mënyrë.
12 - Test
Shpresoj që gjithmonë ta testoni kodin tuaj, apo jo? Nëse jo, si mund ta postoni nëse nuk jeni të sigurt nëse funksionon. Testimi manual është gjithmonë i rëndësishëm, por nëse rifreskoni faqen në shfletues për të testuar funksionalitetin e shtojcës, nuk është i saktë. Unë ju këshilloj të përdorni mjete të tilla si - Qunit, Jasmine, Mocha.
Mendimet përfundojnë
Nëse po mendoni të shkruani një shtojcë jQuery, mbani parasysh këto këshilla. Ndoshta më ka munguar diçka. Nëse e dini se cilat cilësi të tjera pozitive duhet të ketë një shtojcë e mirë, më tregoni në komente. Ju uroj suksese krijuese!
Shtojcat jQuery janë një nga komponentët më thelbësorë kur ndërtoni një faqe interneti, ose në të vërtetë çdo aplikacion në internet. Ato ju lejojnë të zgjeroni funksionalitetin tuaj. Ky artikull liston shtojcat më të dobishme nga 2012. Për një kërkim më të përshtatshëm të gjitha shtojcat ndahen në kategoritë e mëposhtme: Paraqitja e faqeve në internet - shtojcat, shtojcat e navigimit, Shtojcat e formularit, shtojcat për krijimin e rrëshqitësve, shtojcat për grafikët dhe grafikët, efektet për imazhet dhe të tjera. Gjithashtu midis këtyre shtojcave janë shtojcat për t'ju ndihmuar të ndërtoni aplikacionet tuaja të përgjegjshme.
Shtojcat e paraqitjes së faqes
Equalize.js është një shtojcë jQuery që ju lejon të krijoni një strukturë të bllokuar të sajtit. Kjo ju lejon të përafroni lartësinë dhe gjerësinë e çdo elementi.
Shtojca e re për paraqitjet reaguese Freetile ju lejon të krijoni elementë të çdo madhësie, duke eliminuar nevojën për të krijuar një madhësi fikse të kolonave të rrjetit.
Shtojca jquery Gridster.JS për ndërtimin e rrjeteve të tërheqjes dhe lëshimit. Gjithashtu ju lejon të hiqni dhe shtoni në mënyrë dinamike artikuj nga rrjeti.
Zoomooz.jsështë një shtojcë jQuery e lehtë për t'u përdorur për zmadhimin e çdo elementi të një faqe interneti. Mund të shtoni lehtësisht një efekt zmadhimi duke shtuar thjesht klasën "zoomTarget" në çdo element HTML. Zmadhimi mund të rivendoset duke klikuar në faqe. Shtojca është testuar në Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera dhe Chrome.
Wookmark është një shtojcë për krijimin e një shablloni dinamik me shumë kolona.
jQuery HiddenPosition është një shtojcë që ju lejon të shtoni çdo element, edhe nëse ai është i fshehur.
Stellar.js është një shtojcë jQuery që ofron efekt paralaks për elementët.
Një shtojcë jQuery që shton një efekt të vërtetë të kthimit të faqeve kur lundroni midis seksioneve. Përdoret përshpejtimi i harduerit. Punon në tableta dhe smartfonë.
Plugin për tipografi të përgjegjshme. Kjo ju lejon të përdorni një përzgjedhës që gjeneron madhësinë ideale të shkronjave.
Ju lejon të ndërtoni lëvizje të animuara rreth sajtit, duke përfshirë të gjitha transformimet e mundshme
Shtojcat e navigimit
HorizontalNav është një shtojcë jQuery që shtrin menunë horizontale për t'iu përshtatur gjerësisë së plotë të kontejnerit. Nëse jeni përpjekur ndonjëherë të krijoni efektin e shtrirjes së duhur të një menyje navigimi në një kontejner CSS në një projekt, atëherë patjetër që e dini se sa e vështirë është përputhshmëria e ndër-shfletuesve. Kjo shtojcë e bën këtë me lehtësi.
stickyMojo është një shtojcë e lehtë, e shpejtë dhe fleksibël e shiritit anësor ngjitës në jQuery. Punon me Firefox, Chrome, Safari dhe IE8 + (mbështet mjaft mirë versionet më të vjetra të IE).
ddSlick është një shtojcë që ju lejon të krijoni menutë me imazhe dhe përshkrime.
Plugin për organizim të lehtë të paneleve në rënie. Shtojca mbështet punën me kuki për të ruajtur gjendjen e paneleve. Ndër opsionet ka funksione kthimi për konfigurimin e hapjes dhe mbylljes së seksioneve.
Plugin për krijimin e blloqeve të palosshme që mund të përmbajnë çdo të dhënë në një hapësirë të kufizuar.
Shtojcat e formësimit
Shtojca ju lejon të përcaktoni nivelin e kompleksitetit të fjalëkalimit.
Plugin JQuery për vizualizimin e procesit të ngarkimit të skedarëve. Ai mbështet drag & drop dhe krijon pamje paraprake të menjëhershme për fotot.
Plugin që zbulon dhe verifikon numrat e kartës së kreditit. Kjo ju lejon të përcaktoni llojin e kartës së kreditit.
Plugin për filtrimin e të dhënave. Ju mund të filtroni të dhënat sipas etiketës dhe sipas etiketave dhe kategorive të shumta.
Një shtojcë që kontrollon saktësinë e hyrjes së emailit sipas një liste të përgatitur më parë (këtu mund të përfshini shërbimet më të njohura të postës mail.ru, yandrex.ru, gmail, etj.).
Plugins për krijimin e rrëshqitësve dhe karuselit
Plugin që ju lejon të kontrolloni tranzicionet duke përdorur miun, tastierën me prekje dhe tastierën. Mund të shtoni kalime shtesë në tranzicionet e paracaktuara, të cilat janë gjithashtu në skedarin burimor.
iosSlider
iosSlider është një shtojcë për rrëshqitës të përgjegjshëm ndër-shfletues.
RSlider është një rrëshqitës i përgjegjshëm me ekran të plotë. OAi automatikisht do të përshtatet me gjerësinë e ekranit tuaj.
Fresco është një shtojcë reaguese e dritës. Mund të përdoret për të krijuar mbivendosje mahnitëse që funksionojnë shkëlqyeshëm në të gjitha madhësitë e ekranit, në të gjithë shfletuesit, në të gjitha pajisjet.
BookBlock: Shtojca për kthimin e përmbajtjes
BookBlock është një shtojcë jQuery që mund të përdoret për të krijuar komponentë broshurash që ju lejojnë të krijoni navigim me rrëshqitje faqesh. Çdo përmbajtje mund të përdoret këtu, qofshin imazhe ose tekst. Shtojca e transformon strukturën vetëm kur nevojitet (me fjalë të tjera, vetëm kur faqja kthehet) dhe përdor mbivendosje dhe hije për ta bërë atë të duket reale.
Përshtatësi është një rrëshqitës i lehtë i përmbajtjes që ofron një ndërfaqe të thjeshtë për zhvilluesit për të krijuar animacione të bukura 2D ose 3D për kthimin e rrëshqitjeve. Aktualisht ka mbështetje për vetitë 3D në uebkit dhe shfletuesit Firefox. Të gjitha tranzicionet 2D janë testuar në IE6 + dhe shfletues të tjerë modernë.
Karuseli i vazhdueshëm me disa veçori të dobishme.Është shumë i personalizueshëm dhe madje mbështet shfletuesit më të vjetër.
Rhinoslider- mjaft fleksibël jQuery shtojca për paraqitjen e diapozitivëve. Ai ofron jo vetëm një shumëllojshmëri efektesh, por është gjithashtu e mundur të shtoni stilet, efektet dhe funksionet tuaja në rrëshqitës.
Sequence është një shtojcë jQuery që lëviz përmbajtjen në një mënyrë origjinale dhe ju jep kontroll të plotë. Mund të përdoret çdo lloj përmbajtjeje; do të rrotullohet pafund. Ai përdor shënjimin semantik dhe mbështet modele të përgjegjshme dhe pajisje të bazuara në prekje.
Glisse.js është një galeri fotografish jQuery e thjeshtë, e përgjegjshme dhe shumë e personalizueshme.
Plugins për grafikët dhe grafikët
Morris.js është një bibliotekë e lehtë që përdor jQuery dhe Raphaël për ta bërë të lehtë vizatimin e grafikëve të serive kohore.
JQuery Org Chart është një shtojcë që ju lejon të krijoni struktura pemësh me elementë të mbivendosur. Të dhënat futen në një listë të parregulluar të mbivendosur, duke e bërë shtojcën tepër të lehtë për t'u përdorur.
Shtojcat e tipografisë
Bacon.js është një shtojcë jQuery që ju lejon të mbështillni tekstin rreth një kurbë ose rreshti Bézier.
Textualizer është një shtojcë jQuery për krijimin e efekteve të bukura në tekst. Puna e mbështetur në: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)
SlabText është një shtojcë shumë e dobishme jQuery që ndan titujt rresht pas rreshti përpara se të ndryshoni madhësinë e çdo rreshti për të mbushur hapësirën horizontale të disponueshme.
trunk8 është një shtojcë për shkurtimin e tekstit jQuery. Redukton një bllok të madh teksti në një seksion më të vogël për shikim paraprak.
Plugins për krijimin e efekteve të ndryshme për imazhe
Ky është një shtojcë jQuery që përdor filtrat CSS3 për të krijuar një efekt animi.
Plugin për zbatimin e efektit të imazheve të përgjegjshme.
Shtojca jQuery që e bën të lehtë krijimin e hartave të imazheve. Me këtë mjet, çdo hartë imazhi mund të nënvizohet ose zgjidhet, dhe harta mund të manipulohet në mënyra të ndryshme. Ai funksionon në të gjithë shfletuesit kryesorë, duke përfshirë Internet Explorer 6, nuk përdor Flash dhe nuk kërkon asgjë tjetër përveç jQuery. Disa efekte të avancuara kërkojnë mbështetje HTML5, por ajo do të vazhdojë të funksionojë në shfletuesit e vjetër.
