1. Vinge slaidiseanss saidil jQuery "Elastic Slideshow"
Slaidiseanss pisipiltide ja slaidide kirjeldustega. Kujutiste muutmise erinevad efektid. On kaks võimalust: automaatse slaidivahetusega ja ilma.
2. Puhas CSS3 liugur
Kena pildiliugur koos kirjelduse ja automaatse slaidivahetusega. Kui hõljutate kursorit pildi kohal, siis pööramine peatub. Peatusega kaasneb CSS3 efekt.
3. jQuery PhotoFrame'i pistikprogramm
Kena galerii liugur.
4. Tekstiefektid "Tüpograafilised efektid"
Lahedad tüpograafiaefektid CSS3 ja jQuery abil. 7 erinevat lahedat efekti.
5. Pistikprogramm "Darkbox"
Väike kerge pistikprogramm piltide kuvamiseks hüpikakende plokis.
6. Hõljutage kursori mõju jQueryle
Ringikujuline hõljumise efekt.
7. Animeeritud jQuery CSS3 nupud
Palju erinevaid CSS3 animeeritud efekte oma veebisaidile vingete nuppude loomiseks. Lihtsalt väga lahedad hõljukiefektid.
8. HTML5 jQuery taustapiltide muutmine
Kui klõpsate pisipiltidel, vahelduvad taustapildid hägususe efektiga. Kui brauseriakna suurust muudetakse, muudetakse taustapildi suurust.
8. Interaktiivse tüpograafia efektid
Huvitavad tekstiefektid HTML5 ja jQuery abil (4 erinevat efekti). Efekti nägemiseks hõljutage kursorit teksti kohal.
9. Hüpikpiltide pealdised
Palju erinevaid animeeritud hõljutusefekte hüpikakende pildiallkirjade rakendamiseks.
10. Plugin "Portamento"
Ujuv plokk jQuerys. Jääb lehel alla kerides alati nähtavale.
11. Sisu kerijad
jQuery pistikprogramm fikseeritud suurusega plokkides kerimise kuvamiseks. Mitu stiili.
12. Plugin "Kerimisribad"
jQuery rakendab sisu horisontaalset ja vertikaalset kerimist fikseeritud suurusega plokkides.
13. Pistikprogramm "Tiny Scrollbar"
jQuery pistikprogramm sisu vertikaalseks ja horisontaalseks kerimiseks.
Demo
Lae alla
14. Plugin "jScrollPane"
Plokis oleva sisu kerimine brauseriüleselt.
15. Ujuvplokk "Scroll Follow"
Plugin ploki loomiseks, mis kerib pärast lehe kerimist. Blokeeringut on võimalik parandada, klõpsates lingil.
16. SideBari hüpikpaneelid
Liugpaneelid veebilehe kõikidel külgedel.
17. Spectacular CSS3 Stub lehtede stiililahendused
Kolm võimalust animeeritud efektide rakendamiseks, et luua tünn "Saidi valmimisel".
17. Efekt lehe kerimisel
Hämmastav efekt lehe kerimisel: elemendid liiguvad ekraani taga olevast alast välja või, vastupidi, peidavad end ekraani ala taha. Selline lahendus sobib suurepäraselt kasutamiseks portfellisaitidel, lõppenud projektide efektiivseks esitlemiseks koos lühikirjeldusega.
19. Plugin "fancyBox 2"
Paljudele tuntud fancyboxi pistikprogrammi uus, täielikult ümber kirjutatud versioon piltide ja muu sisu kuvamiseks modaalides.
20. Minimit Gallery
Funktsionaalne pistikprogramm, millel on lai valik funktsioone: galerii, karussell, liugur, menüü, laiendaja, animeeritud nupud.
21. jQuery News Ticker
Uudiste rotaator saidil. Sõnumid järgivad üksteist ja ilmuvad kasutades huvitavat kirjutusmasinaefekti. Uudiste muutmise saab peatada vajutades nuppu "Paus". Nooli saab kasutada ühelt sõnumilt teisele liikumiseks.
22. Kohanduvad pildid
Skaleeritavad pildid kuvamiseks mobiilseadmed... Piltide suurused sõltuvad akna suurusest. Kasutatud tehnoloogiad: JavaScript ja PHP5.
23. vScroller
Vertikaalne jQuery, CSS3 kerimisseade. Kerimiskiirus ja viivitusajad on reguleeritavad.
24. Mitmetasandiline rippmenüü "jQSimpleMenu"
Värske jQuery pistikprogramm mitmetasandiliste horisontaalsete rippmenüüde loomiseks saidil.
25. "jsCarousel 2.0"
jQuery pistikprogramm vertikaalsete ja horisontaalsete karussellide rakendamiseks.
26. Rotaator "Dünaamilised uudised"
jQuery pistikprogramm viimaste uudiste kenasti kuvamiseks RSS-kanalist.
27. Animeeritud menüü
Animeeritud efekt, kui hõljute kursorit menüüüksuse kohal.
28. Animeeritud tekstiefekt
Kolm suurepärast näidet koostööst CSS-i atribuut Taustaklipp: tekst. CSS3 efekt ei tööta vanemates brauserites.
29 CSS3 jQuery hägususe efekt
Kui hõljutate kursorit ploki kohal, suureneb see ja ülejäänud tekstiga plokid on taustal hägused.
30. CSS3 jQuery tööriistanõuanded
31 jQuery hõljutustööriista
32. Kerge CSS-menüü
33. CSS3 ja HTML5 märkmed
Tekstiga kleepuvate märkmetega sarnaste plokkide rakendamine.
34. Rlightbox
Meediumisisu kuvamine hüpikakende plokkidena: pildid, video, Flash.
35.jQuery sumisti
Suurendage ruudu pindala.
36 CSS3 jQuery pildi kirjeldus
Pistikprogramm "Põhinev lükandukse sisugalerii" hüpikakende piltide kirjelduste rakendamiseks. Kui hõljutate kursorit mõne kuvatava pildi kohal, a Lühike kirjeldus koos lingiga kogu artiklile. Õhus hõljumisel: garaažiuste tõstmise mõju.
37. Efekt "Enne ja pärast" jQuery plugin "uCompare"
Päästikut lohistades saate võrrelda kahte üksteise peale asetatud pilti. Ideaalne juhtudel, kui peate lehel millegi jaoks korraldama kaks võimalust: enne ja pärast.
38. Pildi pööramise efekt
39. Interaktiivsed maailma ja Euroopa ja USA kaardid
40. Slaidiseanss "Slider.js v1.1"
Mitu erinevat animeeritud slaidi üleminekuefekti.
1. jQuery Hover Zoom Plugin
Originaalne lahendus piltide kirjelduse rakendamiseks hõljukil, kasutades suumiefekti.
2. Plugin "Captify"
3.jQuery piltide kirjeldus galeriis
Kursori hõljutamisel kuvatakse pildi kirjeldus ja pilt ise on täidetud teatud värvi poolläbipaistva kihiga.
4.jQuery pilditiitrite rakendamine
Mitu võimalust subtiitrite rakendamiseks piltidele, mis ilmuvad hiirekursori pildile viimisel.
5.jQuery lükandukse efekt
Kui hõljutate kursorit pisipildi kohal, kuvatakse selle asemele kirjeldus.
6. jQuery pistikprogramm "Zoominfo"
Kui hõljutate kursorit pildi kohal, väheneb see ning kuvatakse foto nimi ja kirjeldus.
7. jQuery pistikprogramm "Mosaic"
Piltide hüpikakende kirjelduste rakendamine hiirekursoril. On 8 erinevat tüüpi hüpikteksti. Näete neid demo lehel.
Kui hõljutate hiirekursorit pildi kohal, kuvatakse lühike kirjeldus koos üksikasjaliku teabe lingiga.
9. Pildisignatuuri rakendamise pistikprogramm
Teine võimalus hüpikakende piltide pealkirjade rakendamiseks hõljutamisel. Valida on kahe vahel jQuery efektid allkirjade ilmumine.
10. Piltide kirjeldus "Eelvaate aken"
Plugin piltide allkirjastamiseks. Kui hõljutate hiirekursorit animeeritud efektiga, kuvatakse pildi kirjeldus. Animatsiooni loomiseks kasutatakse JQueryt.
Valmistatud materjalide põhjal
jQuery pistikprogrammid on veebisaidi või isegi mis tahes veebirakenduse loomisel üks olulisemaid komponente. Need võimaldavad teil oma funktsioone laiendada. Selles artiklis on loetletud kõige kasulikumad pistikprogrammid aastast 2012. Rohkem mugav otsing kõik pluginad on jagatud järgmistesse kategooriatesse: Veebilehe paigutus – pluginad, navigeerimispluginad, vormipluginad, liugurite loomiseks mõeldud pluginad, diagrammide ja graafikute lisandmoodulid, piltide efektid ja muud. Nende pistikprogrammide hulgas on ka pistikprogramme, mis aitavad teil reageerivaid rakendusi luua.
Lehekülje paigutuse pistikprogrammid
equalize.js on jQuery pistikprogramm, mis võimaldab teil luua blokeeritud saidistruktuuri. See võimaldab teil joondada mis tahes elemendi kõrgust ja laiust.
Uus pistikprogramm tundlike paigutuste jaoks Freetile võimaldab teil luua mis tahes suurusega elemente, ilma et peaksite looma fikseeritud ruudustiku veerge.
Gridster.JS jquery ehituse pistikprogramm lohistage ja tilk - võred. Samuti võimaldab see võrgustikust üksusi dünaamiliselt eemaldada ja lisada.
Zoomooz.js on lihtsalt kasutatav jQuery pistikprogramm veebilehe mis tahes elemendi suurendamiseks. Saate hõlpsasti lisada suumiefekti, lisades lihtsalt suvalisele HTML-elemendile klassi "zoomTarget". Suurendust saab lehel klõpsates lähtestada. Pluginat on testitud Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera ja Chrome.
Wookmark on pistikprogramm dünaamilise mitmeveerulise malli loomiseks.
jQuery HiddenPosition on pistikprogramm, mis võimaldab lisada mis tahes elemente, isegi kui see on peidetud.
Stellar.js on jQuery pistikprogramm, mis pakub elementidele parallaksiefekti.
JQuery pistikprogramm, mis lisab sektsioonide vahel navigeerimisel tõelise lehekülgede pööramise efekti. Kasutatakse riistvaralist kiirendust. Töötab tahvelarvutites ja nutitelefonides.
Plugin reageeriva tüpograafia jaoks. See võimaldab teil kasutada valijat, mis loob ideaalse fondi suuruse.
Võimaldab ehitada saidi ümber animeeritud liigutusi, sealhulgas kõiki võimalikke teisendusi
Navigeerimispluginad
HorizontalNav on jQuery pistikprogramm, mis laiendab horisontaalset menüüd mahuti kogu laiusele. Kui olete kunagi proovinud luua efekti, mida navigeerimismenüü õigesti venitate CSS-konteiner projektiga, siis teate kindlasti, kui keeruline on seda teha brauseritevahelise ühilduvuse tagamiseks. See pistikprogramm teeb seda hõlpsalt.
stickyMojo on jQuery kerge, kiire ja paindlik kleepuva külgriba pistikprogramm. See töötab Firefoxi, Chrome'i, Safari ja IE8+-ga (toetab üsna hästi IE vanemaid versioone).
ddSlick on pistikprogramm, mis võimaldab teil luua piltide ja kirjeldustega rippmenüüsid.
Pistikprogramm rippmenüü paneelide lihtsaks korraldamiseks. Plugin toetab küpsistega töötamist paneelide oleku salvestamiseks. Valikute hulgas on tagastamisfunktsioonid sektsioonide avamise ja sulgemise kohandamiseks.
Plugin kokkupandavate plokkide loomiseks, mis võivad sisaldada mis tahes andmeid piiratud ruumis.
Pluginate kujundamine
Pistikprogramm võimaldab teil määrata parooli keerukuse taseme.
JQuery pistikprogramm failide üleslaadimise protsessi visualiseerimiseks. See toetab pukseerimist ning loob fotode jaoks kohesed eelvaated.
Plugin, mis tuvastab ja kontrollib krediitkaardinumbreid. See võimaldab teil määrata krediitkaardi tüübi.
Plugin andmete filtreerimiseks. Saate andmeid filtreerida sildi ning mitme sildi ja kategooria järgi.
Plugin, mis kontrollib sisendit E -postõigeks saamiseks vastavalt eelnevalt koostatud nimekirjale (siia saate lisada kõige populaarsemad postiteenused mail.ru, yandrex.ru, gmail jne).
Pluginad liugurite ja karussellide loomiseks
Plugin, mis võimaldab teil juhtida üleminekuid hiire, puuteplaadi ja klaviatuuri abil. Vaikeüleminekutele saate lisada täiendavaid üleminekuid, mis on samuti lähtefailis.
iosSlider
iosSlider on pistikprogramm brauseriülese liuguri tundlikuks muutmiseks.
RSlider – täisekraan reageeriv liugur... OSee kohandub automaatselt teie ekraani laiusega.
Fresco on tundlik valguskasti pistikprogramm. Seda saab kasutada suurepäraste ülekatete loomiseks, mis töötavad suurepäraselt kõigi ekraanisuuruste, brauserite ja kõigi seadmete puhul.
BookBlock: Content Flip Plugin
BookBlock on jQuery pistikprogramm, mida saab kasutada brošüürilaadsete komponentide loomiseks, mis võimaldavad luua lehekülgede ümberpööramist. Siin saab kasutada mis tahes sisu, olgu see siis pilt või tekst. Pistikprogramm muudab struktuuri ainult vajaduse korral (teisisõnu, ainult siis, kui leht on pööratud) ja kasutab ülekatteid ja varje, et muuta see reaalseks.
Adapter on kerge sisu liugur, mis pakub arendajatele lihtsat liidest kaunite 2D- või 3D-slaidi pööramise animatsioonide loomiseks. Praegu on veebikomplekti ja Firefoxi brauserites 3D-omaduste tugi. Kõik 2D üleminekud on testitud IE6+ ja teistes kaasaegsetes brauserites.
Pidev karussell mitme kasuliku funktsiooniga.See on väga kohandatav ja toetab isegi vanemaid brausereid.
Rhinoslider- üsna paindlik jQuery slaidiseansi pistikprogramm. Pakutakse mitte ainult erinevaid efekte, vaid on võimalik lisada liugurile ka oma stiile, efekte ja funktsioone.
Järjestus on jQuery pistikprogramm, mis kerib sisu originaalsel viisil ja annab teile täieliku kontrolli. Kasutada võib igat tüüpi sisu; see kerib lõputult. See kasutab semantilist märgistust ja toetab reageerivaid malle ja puutepõhiseid seadmeid.
Glisse.js on lihtne, tundlik ja hästi kohandatav jQuery fotogalerii.
Pistikprogrammid diagrammide ja graafikute jaoks
Morris.js on kerge teek, mis kasutab aegridade graafikute joonistamise hõlbustamiseks jQueryt ja Raphaëlit.
JQuery Org Chart on pistikprogramm, mis võimaldab teil luua pesastatud elementidega puustruktuure. Andmed sisestatakse pesastatud järjestamata loendisse, mis muudab pistikprogrammi kasutamise uskumatult lihtsaks.
Tüpograafia pluginad
Bacon.js on jQuery pistikprogramm, mis võimaldab teil mähkida teksti ümber Bezieri kõvera või joone.
Textualizer on jQuery pistikprogramm tekstile kaunite efektide loomiseks. Toetatud: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)
SlabText on väga kasulik jQuery pistikprogramm, mis poolitab pealkirjad ridade kaupa enne iga rea suuruse muutmist, et täita saadaolev horisontaalne ruum.
trunk8 on jQuery teksti kärpimise pistikprogramm. Vähendab suure tekstiploki eelvaate jaoks väiksemaks jaotiseks.
Pluginad erinevate piltide efektide loomiseks
See on jQuery pistikprogramm, mis kasutab kallutamise efekti loomiseks CSS3 filtreid.
Plugin reageerivate piltide efekti rakendamiseks.
jQuery pistikprogramm, mis muudab pildikaartide loomise lihtsaks. Selle tööriistaga saab esile tõsta või valida mis tahes pildikaardi ja kaarti manipuleerida erinevatel viisidel... See töötab kõigis suuremates brauserites, sealhulgas Internet Explorer 6, see ei kasuta Flashi ega vaja midagi muud peale jQuery. Mõned täiustatud efektid nõuavad HTML5 tuge, kuid see töötab endiselt vanemates brauserites.
Vastutulelik või, kui teile meeldib, reageeriv veebidisain ei ole nüüd lihtsalt järjekordne disainitrend, see on juba omamoodi veebisaitide arendamise standard, mis tagab veebisaitide universaalsuse, harmoonilise visuaalse tajumise erinevate kasutajate seadmete ekraanidel. Hiljuti, arendamise ajal reageeriv mall, pidin tegelema erinevate raskustega teatud liugurite ja pildigaleriide integreerimisel ilma üldist disainistiili rikkumata. Nüüd on kõik palju lihtsam, võrgus on tohutult palju valmislahendusi ja mis on eriti meeldiv, enamik neist on vabalt kättesaadavad, avatud lähtekoodiga.
Tänu pakutavate tööriistade mitmekesisusele olen koostanud väikese ülevaate viimasel ajal ilmunud ja piiranguteta levitatavatest responsiivsete jQuery pildiliugurite silmapaistvamatest arengutest, s.t. täiesti tasuta.
Vau liugur
Suurepärase komplektiga tundlik jQuery pildiliugur visuaalsed efektid(pöörded, lahkumised, hägusus, spiraalid, rulood jne ...) ja palju valmis malle. WOW Slideri sisseehitatud lehe sisestamise viisardiga saate lihtsalt ja hõlpsalt mõne minutiga luua hämmastavaid slaidiseansse. Arendaja veebisait sisaldab kogu vajalikku dokumentatsiooni pistikprogrammi seadistamiseks ja kasutamiseks vene keeles, suurepäraseid reaalajas näiteid plugina tööst. Saadaval ka eraldi allalaadimiseks plugin wordpress ja moodul Joomla jaoks. Olen kindel, et see imeline liugur meeldib paljudele, nii algajatele kui ka kogenud veebimeistritele.
HiSlider
HiSlider – HTML5, Jquery liugur ja pildigalerii, absoluutselt tasuta pistikprogramm isiklikuks kasutamiseks saitidel, mis käitavad populaarseid süsteeme – WordPress, Joomla, Drupal. Selle lihtsa, kuid üsna funktsionaalse tööriista abil saate hõlpsalt luua oma saitide lehtedel hämmastavaid ja erksaid slaidiseansse, tõhusaid esitlusi ja teateid uute sõnumite kohta. Mitmed valmis mallid ja nahad liuguri jaoks, vapustavad sisu üleminekuefektid (muutused), mitmesuguse multimeediumisisu väljund: YouTube'i ja Vimeo videod, paindlikud kasutajaseaded jne.
Nivo liugur
Nivo Slider on vana hea, kõigile teemas osalejatele hästi tuntud, üks ilusamaid ja lihtsamini kasutatavaid pildiliugureid. Pistikprogrammi jQuery Nivo Slider saab tasuta alla laadida ja kasutada ning seda levitatakse MIT-i litsentsi alusel. WordPressi jaoks on olemas ka eraldi pistikprogramm, kuid kahjuks on see juba tasuline ja ühe litsentsi eest peate maksma 29 dollarit. Parem on teha WP teemafailidega veidi maagiat ja lisada oma ajaveebi Nivo Slideri pistikprogrammi tasuta jQuery versioon, kuna võrgus on piisavalt teavet selle kohta, kuidas seda teha.
Funktsionaalsuse osas on sellega kõik korras. Tööks kasutatakse jQuery v1.7+ teeki, ilusaid üleminekuefekte, lihtsaid ja väga paindlikke sätteid, tundlikku paigutust, automaatset piltide kärpimist ja palju muud.
Liuguri idee on inspireeritud arendajatelt, kes on tuntud Apple'i toodete esitlusstiili poolest, kus mitmed väikesed objektid (pildid) muutuvad, klõpsates valitud kategoorial lihtsa animatsiooniefektiga. Codrops pakub teile üksikasjalikku õpetust selle liuguri loomise kohta, täielikku HTML-i paigutust, CSS-reeglite komplekti ja käivitatavat jQuery pistikprogrammi, samuti imelist reaalajas näidet liuguri kasutamisest.
Pilu liugur
Täisekraani pildiliugur jQuerys ja CSS3-s + üksikasjalik õpetus pistikprogrammi integreerimiseks saidi lehtedele. Idee on järgmise või eelmise sisu juurde navigeerimisel praeguse slaidi viiludeks avamine. KOOS jQuery abil ja CSS-animatsioone saate luua ainulaadseid üleminekuid slaidide vahel. Tundlik liugurpaigutus tagab, et see näeb ekraanidel võrdselt hea välja erinevad tüübid kasutaja seadmed.
Elastne sisu liugur
Sisu liugur, mis reguleerib automaatselt laiust ja kõrgust olenevalt põhikonteineri suurusest, milles see asub. Üsna lihtne teostus ja paindlik seadistuste liugur, mida toidab jQuery, mille allosas on navigeerimine, kui ekraani suurust allapoole muuta, kuvatakse navigeerimine ikoonidena. Väga üksikasjalik dokumentatsioon (loomise õpetus) ja reaalajas näited kasutamisest.
3D -virna liugur
Eksperimentaalne liugur, mis näitab 3D-tasandilt üleminekutega pilte. Pildid on jagatud kaheks horisontaalseks hunnikuks, navigeerimisnoolte abil saab muuta ja iga järgneva pildi vaatamisolekusse üle minna. Üldiselt ei midagi erilist, aga idee ise ja teostustehnika on päris huvitav.
Väga lihtne, 100% tundlik ja täisekraanil jQuery pildiliugur. Liugur põhineb CSS-i üleminekutel (üleminekuomadus) koos jQuery võluga. Maksimaalne laius on vaikimisi seatud 100% peale, seega muutub piltide suurus sõltuvalt ekraani suuruse muutustest. Kujunduses pole spetsiaalseid animatsiooniefekte ja hõrgutisi, kõik on lihtne ja sujuvaks toimimiseks teritatud.
Minimaalsed slaidid
Nimi räägib enda eest, see on ilmselt üks kergemaid ja minimalistlikumaid jQuery pildiliugureid, mida olen kohanud (plugin 1 kb). ResponsiveSlides.js on väike jQuery pistikprogramm, mis loob slaidiesitlusi konteineris olevate elementide abil. Töötab paljude brauseritega, sealhulgas kõigi kuulsa progressipiduri IE versioonidega alates IE6-st ja uuematest versioonidest. Töö kasutab usaldusväärsuse tagamiseks koos javascriptiga CSS3 üleminekuid. Lihtne märgistus järjestamata loendi abil, üleminekute ja ajastuse kohandamine, automaatne ja käsitsi juhtimine slaidide vahetamine, samuti mitme slaidiseansi korraga tugi. Siin on selline vallatu "laps".
Kaamera
Kaamera on tasuta jQuery pistikprogramm saidi lehtedel slaidiseansside korraldamiseks, paljude üleminekuefektidega kerge liugur, millel on 100% tundlik paigutus ja väga lihtsad seadistused... Sobib suurepäraselt kõigi kasutajaseadmete ekraanidele (arvutimonitorid, tahvelarvutid, nutitelefonid ja Mobiiltelefonid). Võimalus demonstreerida manustatud videot. Automaatne slaidivahetus ja käsitsi juhtimine nuppude ja pisipiltide ploki abil. Peaaegu täielik pildigalerii kompaktse disainiga.
bxSlider jQuery
Veel üks üsna lihtne tundlik jQuery liugur. Slaididele saab paigutada mis tahes sisu, videoid, pilte, teksti ja muid elemente. Laiendatud tugi puutetundlikud ekraanid... CSS -i üleminekuanimatsioonide kasutamine. Suur hulk erinevaid variante slaidiseansside ja kompaktsete pildigaleriide esitlusel. Automaatne ja käsitsi juhtimine. Slaidide vahetamine nuppude abil ja pisipiltide valimine. Lähtefaili väike suurus, väga lihtne konfigureerida ja rakendada.
FlexSlider 2
FlexSlider 2 – Uuendatud versioon samanimeline liugur, millel on parem reageerimisvõime, skripti minimeerimine ja ümberpaigutamise / ümberjoonistamise minimeerimine. Pistikprogramm sisaldab põhiliugurit, pisipiltidega slaidijuhtimist, sisseehitatud vasak-pare nooli ja nuppude kujul olevat alumist navigeerimisriba. Võimalus kuvada videot slaididena (vimeo), paindlikud parameetriseaded (üleminekud, kaunistused, ajavahemik), täielikult reageeriv paigutus.
Galerii
Tuntud ja üsna populaarne, tundlik pistikprogramm jQuery kvaliteetsete pildigaleriide ja liugurite loomiseks. Liuguri liides, tänu oma juhtpaneelile visuaalselt meenutab tuttavat videopleierit, sisaldab pistikprogramm mitmeid erinevaid teemasid. Manustatud video ja piltide tugi populaarsed teenused: Flickr, Vimeo, YouTube ja teised. Üksikasjalik dokumentatsioon seadistamise ja kasutamise kohta.
Mustikas
Lihtne, ilma kellade ja viledeta tasuta jQuery pildiliugur, mis on kirjutatud spetsiaalselt reageeriva veebidisaini jaoks. Blueberry on eksperimentaalne avatud lähtekoodiga jQuery pistikprogramm. Minimalistlik disain, efekte pole, ainult sujuvalt avanevad pildid, mis asendavad üksteist teatud aja möödudes. Kõik on väga lihtne, seadistage see, ühendage see ja minge ...
jQuery popeye 2.1
Väga kompaktne valguskasti elementidega jQuery pildiliugur. Tänu oma paindlikule suurusele on hiirekursori hõljutamisel või sellel klõpsamisel väga lihtne sisestada mis tahes konteinerisse, pisipiltide kujul ühte kirjesse. Toodete või uudisteadete esitlemiseks on mugav asetada selline liugur külgribadele. Suurepärane lahendus suure hulga teabega saitidele.
Järjestus
Tasuta reageeriv liugur koos täiustatud CSS3 üleminekutega. Minimalistlik stiil, 3 kujundusteemat, iga kaader libiseb horisontaalselt, ilmudes keskele, pilt läheb vasakule, pealdis paremale, pisipildid dubleeritakse paremas alanurgas. Tooteesitluste leheküljed vaatamiseks igas kaadris. Juhtnuppude hulgas on ka tagasi ja edasi nupud. Toetus kõigi poolt kaasaegsed brauserid.
Pühkige
Väga lihtne piltide liugur nii funktsionaalsuse kui seadistuste poolest, seadistustest on slaidide vahetamise kiiruse muutus, manuaalrežiimi ühendamine (juhtnupud on aktiveeritud), pidev slaidiseanss. Sellel liuguril on õigus olla ja see köitis mind ainult sellega, et see on, ma ei leidnud selles arenduses midagi eriti huvitavat, võib-olla vaatasin halvasti)))
Tundlik pildiliugur
Selline ilus kohanduv pildiliugur Vladimir Kudinovilt ja kaaslastelt. Tugev, hästi arenenud tööriist, mis on varustatud illustreerivate näidete ja üksikasjalike juhistega loomiseks, paigaldamiseks ja kasutamiseks. Adaptiivne disain, toredad nupud ja nooled rohelisena, kõik on päris kena ja rahulik, ilma rõhuta.
FractionSlider
Tasuta paralleeliefektiga liugur jQuery plugin piltide ja tekstislaidide jaoks. Slaidianimatsioonil on mitu esitlusväärtust, mis on täielikult kontrollitavad iga ajastuse ja animatsiooni seadistuste puhul. Võimalus animeerida slaidil korraga mitut elementi. Saate installida erinevaid meetodeid animatsioone, slaidide kadumist või üleminekuid kindlast suunast. Automaatne kuva ja käsitsi juhtimine navigeerimisnooltega, mis hüppavad, kui hõljutate kursorit pildi kohal. 10 tüüpi slaidi välimuse animatsiooniefekte ja palju muud ...
Ülevaatus osutus üsna ulatuslikuks, kuid vaatlusaluste toodete suure hulga tõttu mitte piisavalt informatiivseks. Kõik üksikasjad ja üksikasjalikud kirjeldused funktsionaalsust konkreetse pistikprogrammi kohta saate teada otse arendajate lehtedelt. Jään vaid loota, et keegi on muutnud kellegi jaoks selle väga vajaliku tööriista leidmise oma saitide lehtedelt värviliste pildiliugurite loomiseks lihtsamaks.
Kas olete kunagi mõelnud, kas oleks tore, kui saaksite töötada venestatud mallidega? Mõelge vaid minut. Ingliskeelsete mallidega töötamiseks pole aega raisatud. Kiirustame teid rõõmustada tõsiasjaga, mille leiate nüüd TemplateMonsteri turult. Igaühe tekst kirjutati käsitsi. Ja loomulikult on kõiki valmislahendusi uskumatult lihtne kasutada.
Kogu lugupidamisega, Andrew
Kui veebihaldurid atribuudile kirjutavad, loovad brauserid automaatselt vihjeid pealkiri mingi tekst (tavaliselt atribuut pealkiri kehtib siltide kohta
ja
, st. linkidele ja piltidele). Kui kasutajad hõljutavad kursorit atribuuti sisaldavate siltide kohal pealkiri, siis kuvab brauser kohtspikri. Need on näpunäited ( tööriistavihje) muudame.
See artikkel hõlmab järgmist:
- kuidas kasutada pistikprogrammi standardsete tööriistavihjete asendamiseks
- kuidas seadistada qTip tööriistavihjeid
- kuidas kuvada Ajaxi sisu kohtspikris
Lihtsad kohandatud teksti näpunäited
Loodetavasti pole vaja seletada, et atribuute nagu pealkiri, alt on sageli hädasti vaja. Lõppude lõpuks aitavad need kasutajatel suures koguses teavet paremini navigeerida ja on lisaks väga kasulikud saidi otsingumootoritele optimeerimisel. Tööriistavihjete ainus probleem on see, et neid ei saa CSS-stiilidega muuta. Selle probleemi lahendamiseks kasutame võimalusi.
1. Looge skeleti põhiline HTML -fail, mis sisaldab pealkirja atribuuti.
Linkide loend:
- Kodu
- Ettevõtte kohta
- Kontaktid
- Portfell
2. Nüüd peate hoidlast alla laadima pistikprogrammi qTip.
3. Ühendage allalaaditud failid:
// Standardne raamatukogu jQuery // Kirjutame sellesse faili jQuery skripte
4. Tööriistaspikri toimimiseks kirjutage lihtsalt faili scripts.js:
$ (dokument) .ready (funktsioon () ($ ("a"). qtip ();));
See konstruktsioon tähendab, et kõikidele linkidele, millel on pealkirja atribuut, rakendatakse meetodit qtip ().
JQuery qTip seadistamine
1. Saate kohandada tööriistavihjeid erineval viisil. Esmalt muudame kohtspikrite kuvamise kohta.
$ ("a"). qtip ((positsioon: (minu: "alumine kese", // kursori asukoht: "ülaosas keskel", // vaateava tööriistavihje asukoht: $ (aken) // tööriistavihje ei lakkuda ekraani servad)));
2. Pärast positsiooni reguleerimist saate tegeleda tööriistavihje kuva värviskeemiga. Vaikimisi sisaldab fail jquery.qtip.min.css järgmisi värvistiile:
Qtip-vaikimisi (vaikimisi kollane stiil)
Qtip-bootstrap
Mõnele neist stiilidest saab lisada varju: qtip-shadow. Lisaks ei viitsi keegi luua oma stiili, mis sobib hästi üldisega, kuigi standardseid on rohkem kui küll.
$ ("a"). qtip ((positsioon: (minu: "alumine keskel", at: "ülemine keskel", vaateport: $ (aken)), stiil: (klassid: "qtip-green qtip-shadow")) );
Navigeerimismenüü loomine koos kohtspikritega
1. Kõigepealt loome HTML-i skeleti:
#navigeerimine (taust: rgb (132,136,206); / * Vanad brauserid * / taust: -moz-linear-gradient (ülemine, rgba (132,136,206,1) 0%, rgba (72,79,181,1) 50%, rgba (132,6,13) , 1) 100%; %, rgba (72,79,181,1)), color-stop (100%, rgba (132,136,206,1))); / * Chrome, Safari4 + * / taust: -webkit-linear-gradient (ülemine, rgba (132,136,206) , 1) 0%, rgba (72,79,181,1) 50%, rgba (132,136,206,1) 100%); / * Chrome10+, Safari5.1 + * / taust: -o-lineaarne gradient (ülemine, rgba) (132 136 206 , 1) 0%, rgba (72,79,181,1) 50%, rgba (132,136,206,1) 100%) / * Opera11.10 + * / taust: -ms-lineaarne gradient (ülemine, rgba () 132 136 206, 1) 0%, rgba (72,79,181,1) 50%, rgba (132,136,206,1) 100%) / * IE10 + * / filter: progid: DXImageTransform.Microsoft.gradient =ce (startColor488 , endColorstr = "# 8488ce", GradientType = 0); / * IE6-9 * / taust: lineaarne gradient (ülemine, rgba (132,136,206,1) 0%, rgba (72,79,181,1) 50%, rgba ( 132,136,206,1) 100%); / * W3C * / list-style-type: none; veeris: 100px 20px 20px 20px; polsterdus: 0; ülevool: peidetud; -webkit-border-raadius: 5px; -moz-border-radius: 5px; piiri raadius: 5 pikslit; ) #navigation li (veeris: 0; polsterdus: 0; ekraan: plokk; hõljumine: vasak; ääris-parem: 1px solid # 4449a8;) #navigation a (värv: #fff; ääris-parem: 1px solid # 8488ce; ekraan : plokk; polsterdus: 10px;) #navigeerimine a: hõljutage (taust: # 859900; ääris-parem-värv: # a3bb00;)
Tulemuseks peaks olema järgmine pilt:
3. Lisage failile scripts.js:
$ ("# navigation a"). qtip ((positsioon: (minu: "ülemine keskel", at: "alumine keskel", vaateava: $ (aken)), näita: (efekt: funktsioon (nihe) ($ (see ) .slideDown (300);)), peida: (efekt: funktsioon (nihe) ($ (this) .slideUp (100);)), stiil: (klassid: "qtip-green qtip-shadow"))) ;
Nüüd, kui hõljutate hiirekursorit navigeerimismenüü kohal, kuvatakse tööriistavihje (pealkirja atribuut).
Muu sisu kuvamine kohtspikris
Lisaks tavaliste siltide kuvamisele saate vihjes kuvada ka muud sisu, näiteks failist, peidetud konteinerist või andmebaasist võetud sisu, ilma Ajaxi tehnoloogia abil lehte uuesti laadimata.
See link haarab Ajaxi abil faili sisu
Atribuudi href = "tooltip.txt" väärtus tähendab, et hüperlink viitab tavalisele txt-failile.
$ (". infobox"). each (function () ($ (this) .qtip ((content: (text: "Loading ..."), // Sisu laadimise ajal kuvatakse see kirje ajax: ( url: $ (this) .attr ("href") // Kust saada sisu), pealkiri: (// Lisab kohtspikri tekstile pealkirjavälja: $ (this) .attr ("pealkiri"), nupp : true // Lisab nupu tööriistaspikri sulgemiseks)), asukoht: (minu: "ülemine keskel", at: "alumine keskel", efekt: false, // Eemaldab väljuva efekti vaateava: $ (aken)), näita : (event: "click", // Tööriistavihje kuvatakse lingile klõpsates, saate selle asendada sõnaga "hover", seejärel kuvatakse tööriistavihje hover solo: true // Võimaldab kuvada ainult ühe tööriistavihje ekraan), hide: "unfocus", // Tööriistavihje sulgub, kui klõpsate mõnel muul lehe stiili elemendil : (klassid: "qtip-green qtip-shadow")));)). bind ("klõps", funktsioon (e) (e.preventDefault ())); // Lingile klõpsates brauser URL-i ei laadi
See Ajaxi tehnika töötab ainult siis, kui server töötab. Et see toimiks kohalik arvuti peate installima, näiteks ,.
Kuni unustasin, millised on sektsioonalumiiniumradiaatorite plussid ja miinused ning milliseid radiaatoreid tarbijad tavaliselt valivad.
(Allalaadimised: 409)
