Adaptiivne või kui soovite, siis responsive veebidisain ei ole nüüd lihtsalt järjekordne disainitrend, see on juba kindel standard veebilehtede arenduses, tagades veebilehtede mitmekülgsuse ja harmoonilise visuaalse taju erinevate kasutajaseadmete ekraanidel. Hiljuti tuli responsiivse malli väljatöötamisel tegeleda erinevate raskustega teatud liugurite ja pildigaleriide integreerimisel ilma üldist disainistiili häirimata. Tänapäeval on kõik palju lihtsam, internetis on tohutult palju valmislahendusi ja eriti rõõmustav on see, et enamik neist on vabalt kättesaadavad, avatud lähtekoodiga.
Pakutavate tööriistade mitmekesisuse tõttu olen koostanud lühikese ülevaate viimasel ajal ilmunud ja piiranguteta levitatavatest responsive jQuery pildiliugurite silmapaistvamatest arendustest, s.t. täiesti tasuta.
WOW liugurResponsiivne jQuery pildiliugur suure hulga visuaalsete efektidega (pööramine, väljalend, hägusus, spiraalid, rulood jne...) ja paljude valmismallidega. WOW Slideri sisseehitatud lehe sisestamise viisardiga saate lihtsalt ja vaevata luua hämmastavaid slaidiseansse minutitega. Arendaja veebisait sisaldab kogu vajalikku dokumentatsiooni pistikprogrammi seadistamiseks ja kasutamiseks vene keeles, samuti suurepäraseid reaalajas näiteid pistikprogrammi toimimise kohta. Allalaadimiseks on saadaval ka eraldi Wordpressi plugin ja Joomla moodul. Olen kindel, et see imeline liugur meeldib paljudele, nii algajatele kui ka kogenud veebimeistritele.
HiSliderHiSlider – HTML5, Jquery liugur ja pildigalerii, täiesti tasuta pistikprogramm isiklikuks kasutamiseks populaarsetel süsteemidel – WordPress, Joomla, Drupal. Selle lihtsa, kuid üsna funktsionaalse tööriista abil saate hõlpsasti luua oma veebisaitide lehtedel hämmastavaid ja elavaid slaidiesitusi, suurejoonelisi esitlusi ja teadaandeid uutest sõnumitest. Mitmed valmis mallid ja nahad liuguri jaoks, hämmastavad sisu ülemineku (muutmise) efektid, mitmesuguse multimeediumisisu väljund: videod YouTube'ist ja Vimeost, paindlikud kasutajaseaded jne...
Nivo Slider on vana hea, kõigile asjatundjatele hästi tuntud, üks ilusamaid ja hõlpsamini kasutatavaid pildiliugureid. JQuery Nivo Slider pistikprogrammi saab tasuta alla laadida ja kasutada ning see on litsentsitud MIT-i litsentsi alusel. WordPressi jaoks on olemas ka eraldi plugin, kuid kahjuks on see juba tasuline ja ühe litsentsi eest tuleb välja käia 29 dollarit. Parem on WP teemafailidega veidi maagiat teha ja lisada oma ajaveebi Nivo Slideri pistikprogrammi tasuta jQuery versioon, kuna Internetis on palju teavet selle kohta, kuidas seda teha.
Funktsionaalsuse osas on sellega kõik korras. See kasutab jQuery v1.7+ teeki, kauneid üleminekuefekte, lihtsaid ja väga paindlikke sätteid, adaptiivset 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, HTML-i märgistuse täielikku paigutust, CSS-i reeglite komplekti ja käivitatava jQuery pistikprogrammi, samuti imelist reaalajas näidet liuguri kasutamisest.
Täisekraani pildiliugur JQuery ja CSS3 abil + üksikasjalik õpetus pistikprogrammi integreerimiseks veebisaidi lehtedele. Idee on järgmisele või eelmisele sisule liikumisel viilutada avatud praegune slaid konkreetse sisuga. JQuery ja CSS-animatsiooni abil saate luua ainulaadseid üleminekuid slaidide vahel. Liuguri tundlik paigutus tagab, et see näeb võrdselt hea välja erinevat tüüpi kasutajaseadmetes.
Sisu liugur, mis reguleerib automaatselt laiust ja kõrgust olenevalt põhikonteineri suurusest, milles see asub. Üsna lihtsalt rakendatav ja seadistustes paindlik, liugur töötab JQuery peal, ekraani suuruse muutmisel allapoole navigeerimine kuvatakse ikoonidena. Väga detailne dokumentatsioon (loomisõpetus) ja reaalsed kasutusnäited.
Liuguri eksperimentaalne versioon, mis demonstreerib 3D-tasandilt üleminekutega pilte. Pildid on jagatud kaheks horisontaalseks virnaks, kasutades navigeerimisnooli, et muuta ja üle viia iga järgnevat pilti vaatamisolekusse. Üldiselt ei midagi erilist, aga idee ise ja teostustehnika on päris huvitav.
Väga lihtne, 100% tundlik ja täisekraanil jQuery pildiliugur. Liuguri töö põhineb CSS-i üleminekutel (ülemineku omadus) koos jQuery võluga. Maksimaalse laiuse väärtuseks on vaikimisi seatud 100%, nii et piltide suurus muutub sõltuvalt ekraani suuruse muutustest. Kujunduses pole erilisi animatsiooniefekte ega vingerpussi, kõik on lihtne ja loodud tõrgeteta töötamiseks.
Nimi räägib enda eest, see on võib-olla üks kergemaid ja minimalistlikumaid jQuery pildiliugureid, mida olen kohanud (1 kb plugin). ResponsiveSlides.js on väike JQuery pistikprogramm, mis loob konteineris olevate elementide abil slaidiesitlusi. Töötab paljude brauseritega, sealhulgas kõigi IE versioonidega – kuulus pidurdaja edenemist alates IE6-st ja uuematest versioonidest. Töös kasutatakse usaldusväärsuse huvides koos javascriptiga CSS3 üleminekuid. Lihtne paigutus järjestamata loendi abil, üleminekute ja ajavahemike kohandamine, slaidide vahetamise automaatne ja käsitsi juhtimine, samuti mitme slaidiseansi korraga tugi. See on selline mänguline "beebi".
Kaamera on tasuta JQuery pistikprogramm veebisaitide lehtedel slaidiseansside korraldamiseks, paljude üleminekuefektidega kerge liugur, 100% reageeriv paigutus ja väga lihtsad seaded. Sobib suurepäraselt kõigi kasutajaseadmete ekraanidele (arvutimonitorid, tahvelarvutid, nutitelefonid ja mobiiltelefonid). Manustatud video demonstreerimise võimalus. Automaatne slaidivahetus ja käsitsi juhtimine nuppude ja pildi pisipiltide ploki abil. Peaaegu täielik kompaktse disainiga piltide galerii.
Veel üks üsna lihtne tundlik liugur jQuerys. Saate oma slaididele paigutada mis tahes sisu, videoid, pilte, teksti ja muid elemente. Laiendatud tugi puutetundlikele ekraanidele. CSS-i üleminekuanimatsioonide kasutamine. Suur hulk erinevaid slaidiesitusi ja kompaktseid pildigaleriisid. Automaatne ja käsitsi juhtimine. Slaidide vahetamiseks kasutage nuppe ja valides pisipilte. Väike lähtefaili suurus, väga lihtne konfigureerida ja rakendada.
FlexSlider 2 – samanimelise liuguri uuendatud versioon, millel on täiustatud reageerimisvõime, skripti minimeerimine ja ümbervoolamise/ü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 sätted (üleminekud, kujundus, ajavahemik), täielikult adaptiivne paigutus.
Tuntud ja üsna populaarne tundlik jQuery pistikprogramm kvaliteetsete pildigaleriide ja liugurite loomiseks. Liuguri liides meenutab tänu oma juhtpaneelile visuaalselt tuttavat videopleierit, mis sisaldab mitmeid erinevaid kujundusteemasid. Manustatud videote ja piltide tugi populaarsetest teenustest: Flickr, Vimeo, YouTube ja teised. Üksikasjalik dokumentatsioon seadistamise ja kasutamise kohta.
Lihtne, lihtne ja tasuta jQuery pildiliugur, mis on loodud spetsiaalselt tundliku veebidisaini jaoks. Blueberry on eksperimentaalne avatud lähtekoodiga jQuery pistikprogramm. Minimalistlik disain, ilma efektideta, ainult sujuvalt hüpikpildid, mis teatud aja möödudes üksteist asendavad. Kõik on väga lihtne, installige, ühendage ja minge ...
Väga kompaktne jQuery pildiliugur valguskasti elementidega. Tänu paindlikele mõõtmetele on seda väga lihtne integreerida igasse konteinerisse, pisipiltide kujul üheks sisestuseks, hiirekursorit hõljutades või neile klõpsates aktiveerub suurendatud pildi ja juhtnuppudega valguskast. Sellist liugurit on mugav paigutada külgpaneelidele toodete või uudisteadete esitlemiseks. Suurepärane lahendus suure hulga teabega saitidele.
Tasuta reageeriv liugur koos täiustatud CSS3 üleminekutega. Minimalistlik stiil, 3 kujundusteemat, iga kaader libiseb horisontaalselt, ilmudes keskele, pilt läheb vasakule, signatuur paremale, pisipildid dubleeritakse paremas alanurgas. Igas kaadris kuvatavate tootevaadete leheküljed. Juhtnuppude hulgas on ka tagasi ja edasi nupud. Toetavad kõik kaasaegsed brauserid.
Väga lihtne pildiliugur nii funktsionaalsuse kui ka seadistuste osas on slaidide vahetamise kiiruse muutus, manuaalrežiimi aktiveerimine (juhtnupud on aktiveeritud), pidev slaidiseanss; Sellel liuguril on õigus eksisteerida ja see tõmbas mind ainult sellepärast, et see on olemas, ma ei leidnud selles arenduses midagi eriti huvitavat, võib-olla ma ei otsinud seda hästi)))
Selline ilus kohanduv pildiliugur Vladimir Kudinovilt, seltsimehed. Tugev, hästi läbimõeldud tööriist, mis on varustatud illustreerivate näidete ja üksikasjalike juhistega loomiseks, paigaldamiseks ja kasutamiseks. Adaptiivne disain, kenad nupud ja rohelised nooled, kõik on üsna kena ja rahulik, ilma surveta.
Tasuta parallaksiefektiga JQuery liugurplugin piltide ja tekstislaidide jaoks. Slaidianimatsioonidel on mitu kuvamisväärtust ning iga ajastuse ja animatsiooni seadistus on täielikult juhitav. Võimalus animeerida slaidil korraga mitut elementi. Saate määrata erinevaid animatsioonimeetodeid, slaidide tuhmumisi või üleminekuid kindlast suunast. Automaatne kuva ja käsitsi juhtimine navigeerimisnoolte abil, mis kuvatakse, kui hõljutate kursorit pildi kohal. 10 tüüpi slaidi animatsiooniefekte ja palju muud...
Ülevaade osutus üsna mahukaks, kuid mitte piisavalt informatiivseks vaadeldavate toodete suure hulga tõttu. Kõik üksikasjad ja konkreetse pistikprogrammi funktsionaalsuse üksikasjalikud kirjeldused leiate otse arendajate lehtedelt. Jään vaid loota, et olen teinud kellegi jaoks lihtsamaks selle väga vajaliku tööriista leidmise oma veebisaitide lehtedelt värviliste pildiliugurite loomiseks.
Kas olete kunagi mõelnud, et oleks tore, kui saaksite töötada venekeelsete mallidega? Mõelge sellele üks hetk. Ingliskeelsete mallidega töötamisele ei pea te aega raiskama. Kiirustame teid rõõmustama, et leiate selle nüüd TemplateMonsteri turult. Igaühe tekst kirjutati käsitsi. Ja loomulikult on kõiki valmislahendusi uskumatult lihtne kasutada.
Kogu lugupidamisega, Andrew
Brauserid loovad automaatselt tööriistavihjeid, kui veebihaldurid lisavad pealkirja atribuudile teksti (tavaliselt rakendatakse siltidele pealkirja atribuuti Ja , st. linkidele ja piltidele). Kui kasutajad hõljutavad pealkirja atribuuti sisaldavate siltide kohal, kuvab brauser kohtspikri. Just neid hüpikakende näpunäiteid (tööriistavihje) me muudamegi.
See artikkel hõlmab järgmist:
- kuidas kasutada pistikprogrammi standardsete tööriistavihjete asendamiseks - kuidas kohandada qTip'i tööriistavihjeid - kuidas kuvada Ajaxi sisu kohtspikris Lihtsad kohandatud teksti vihjedLoodan, et pole vaja selgitada, et sellised atribuudid nagu pealkiri ja alt on sageli äärmiselt vajalikud. 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-stiilide abil muuta. Selle probleemi lahendamiseks kasutame võimalusi.
1. Loome põhilise HTML-failiraami, 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 jQuery teek // Sellesse faili kirjutame jQuery skripte
4. Tööriistaspikri toimimiseks kirjutage lihtsalt faili scripts.js:
$(dokument).ready(function())( $("a").qtip(; ));
See konstruktsioon tähendab, et kõikidele linkidele, millel on pealkirja atribuut, rakendatakse meetodit qtip().
jQuery qTip seadistamine1. Tööriistavihjeid saab konfigureerida erineval viisil. Esmalt muudame kohtspikrite kuvamise kohta.
$("a").qtip(( position: ( my: "alt keskel", //Kursori asukoht: "ülemine keskel", //Tööriistavihje asukoha vaateport: $(window) //Tööriistavihje ei laku servade ekraani ) ));
2. Pärast positsiooni määramist saate töötada tööriistaspikri kuvamise värviskeemi kallal. Vaikimisi sisaldab fail jquery.qtip.min.css järgmisi värvistiile:
Qtip-vaikestiil (kollane vaikestiil)
Qtip-bootstrap
Mõnele neist stiilidest saate varju lisada: qtip-shadow . Lisaks ei tüüta keegi luua oma stiili, mis sobib ideaalselt üldisega, kuigi standardseid on rohkem kui küll.
$("a").qtip(( asukoht: ( minu: "alumine keskel", at: "ülemine keskel", vaateava: $(aken) ), stiil: ( klassid: "qtip-green qtip-shadow" ) ) );
Navigeerimismenüü loomine koos tööriistavihjetega1. Kõigepealt loome HTML-i raamistiku:
#navigation ( taust: rgb(132,136,206); /* Vanad brauserid */ taust: -moz-linear-gradient(top, rgba(132,136,206,1) 0%, rgba(72,79,181,1) 50%, rgba(132,136,2) ,1) 100%); /* FF3.6+ */ taust: -webkit-gradient(lineaarne, vasak ülemine, vasak alumine, color-stop(0%,rgba(132,136,206,1)), color-stop(50) %,rgba(72,79,181,1)), color-stop(100%,rgba(132,136,206,1))) /* Chrome,Safari4+ */ taust: -webkit-linear-gradient(top, rgba(132,136,206, 1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%) /* Chrome10+,Safari5.1+ */ taust: -o-linear-gradient(top, rgba(132,136,206); ) ,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%) /* Opera11.10+ */ taust: -ms-linear-gradient(top, rgba(132,136,206); , 1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8488ce", endColorstr = "#8488ce",GradientType=0); /* IE6-9 */ taust: lineaarne gradient(top, 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; -veebikomplekti piiri raadius: 5 pikslit; -moz-border-radius: 5px; piiri raadius: 5 pikslit; ) #navigation li ( veeris: 0; polsterdus: 0; ekraan: plokk; hõljuk: vasak; ääris-parem: 1px ühtlane #4449a8; ) #navigation a ( värv: #fff; ääris-parem: 1px solid #8488ce; ekraan : plokk: 10px ) #navigation a:hover (taust: #859900; border-right-color: #a3bb00; )
Tulemuseks peaks olema järgmine pilt:
3. Lisage faili scripts.js:
$("#navigation a").qtip(( asukoht: ( minu: "ülemine keskel", at: "alumine keskel", vaateava: $(aken) ), näita: ( efekt: funktsioon(nihe) ( $(see ).slideDown(300); ) ), peida: ( efekt: function(offset) ( $(this).slideUp(100); ) ), stiil: ( klassid: "qtip-green qtip-shadow", ) )) ;
Nüüd, kui hõljutate kursorit navigeerimismenüü kohal, kuvatakse tööriistavihje (pealkirja atribuut).
Kuva kohtspikris muu sisuLisaks tavamärgendite 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 võtab sisu failist, kasutades Ajaxit
Atribuudi href=”tooltip.txt” väärtus tähendab, et hüperlink viitab tavalisele txt-failile.
$(".infobox").each(function())( $(this).qtip(( sisu: ( text: "Loading...", //Sisu laadimise ajal kuvatakse see ajaxi kirje: ( url: $ (this).attr("href") //Kust sisu hankida), title: ( //Lisab kohtspikri tekstile pealkirjavälja: $(this).attr("title"), nupp: true //Lisab nupu kohtspikri sulgemiseks ) ), asukoht: ( minu: "ülemine keskel", at: "alumine keskel", efekt: false, //Eemaldab hüpikakna efekti vaateava: $(aken) ), näita: ( sündmus: "klõps", // Tööriistavihje ilmub siis, kui klõpsate lingil, võite selle asendada sõnaga "hover", siis kuvatakse kohtspikker, kui liigutate kursorit soolo: true //Võimaldab kuvada ekraanil ainult üks kohtspikker ), hide: "unfocus", //Tööriistaspikker sulgub, kui klõpsate mõnel muul leheelemendi stiilil : ( classes: "qtip-green qtip-shadow" ) )).bind("klõps", function(e)(e.preventDefault())); //Lingil klõpsates ei laadi brauser URL-i
See Ajaxi tehnika töötab ainult siis, kui server töötab. Et see kohalikus arvutis töötaks, peate installima näiteks .
Enne kui unustan, millised on alumiiniumist sektsioonradiaatorite plussid ja miinused ning milliseid radiaatoreid tarbijad tavaliselt valivad.
(allalaadimisi: 409)
Ideele sattusin elektroonilise raamatupidaja “Elba” kodulehel. Sellel on kena ja kasutajasõbralik liides ning mulle väga meeldisid kõikjal esinevad vihjed.
Tahtsin lihtsalt võtta saidi lähtekoodist skriptikoodi, mis seda rakendaks, kuid see polnud nii. Seal on neil ühte hunnikusse kogutud nii palju erinevaid skripte (ma ei tea, kuidas seda erialakeeles õigesti nimetatakse), et mul oli raske sealt midagi konkreetset välja tõmmata.
Nii et ma läksin ja kirjutasin oma stsenaariumi, mis teeb umbes sama asja. Ma tean, et valmislahendusi on juba palju, kuid mulle meeldib rohkem ise nullist skripti kirjutada, et taas jQueryga harjutada.
DemonstratsioonNäete näidet nii veebisaidil Share42.com kui ka edasi, kus lähtekood sisaldab ainult seda, mis on skripti toimimiseks vajalik.
PaigaldamineSkripti kood näeb välja selline:
(function($)( $(function() ( $("span.jQtooltip").each(function() ( var el = $(this); var title = el.attr("title"); if (title && title != "") ( el.attr("pealkiri", "").append("" + pealkiri + ""); var laius = el.find("div").width(); var kõrgus = el.find("div").height(); el.hover(function() ( el.find("div") .clearQueue() .delay(200) .animate((laius: laius + 20, kõrgus: kõrgus + 20), 200).show(200).animate((width: laius, kõrgus: kõrgus), 200 function() ( el.find("div") .animate((width: laius + 20,); kõrgus: kõrgus + 20), 150) .animate((width: "hide", kõrgus: "hide"), 150 )).mouseleave(function() ( if (el.children().is( ":hidden") )) el.find("div").clearQueue());
Salvestage see .js-laiendiga faili, näiteks scripts.js, ja ühendage see saidiga enne märgendit, unustamata samal ajal ühendada jQuery raamistikku, kui seda pole veel tehtud. Need. Saidi html-koodile lisatakse järgmine kood:
JQtooltip ( asukoht: suhteline; kursor: abi; ääris-alumine: 1px punktiir; ) .jQtooltip div ( ekraan: puudub; asukoht: absoluutne; alumine: -1px; vasak: -1px; z-indeks: 1000; laius: 190px; täidis: 8px 12px, värv: #000 1px 3px #C4C4C4;
Nüüd ei jää muud üle, kui paigutada vajalik tekst jQtooltip klassi ja atribuudiga title, st. nagu nii:
tekst
Kui soovite, et teksti asemel oleks ruut, nagu näiteks, peate CSS-faili lisama järgmised stiilid:
JQtooltip.mini (kuva: tekstisisene plokk; vertikaaljoondus: alumine; fondi suurus: 11 pikslit; laius: 14 pikslit; rea kõrgus: 13 pikslit; teksti joondus: keskel; veeris vasakul: 2 pikslit; ülemine: -2 pikslit; värv : #9A4D18 ääris: 1px #FAD28F: #FFF6BD;
Ja sel juhul on html-kood järgmine:
!
Sõltuvalt teie eelistustest saate CSS-koodi muuta mis iganes teile meeldib. See tähendab, et nagu näete, saab tööriistavihje kujundada mis tahes viisil, peate lihtsalt CSS-i mõistma.
See on tegelikult kõik.
P.S. Ma ei kahtle, et stsenaariumi võiks kirjaoskamaks muuta, kuid põhimõtteliselt olen selle väljatöötamisega rahul.
Kas otsite, kus oma veebisaiti Ukrainas majutada? Valige ajaproovitud hostimine – X-HOST. Saate kvaliteetse ja usaldusväärse hostimise konkurentsivõimeliste hindadega.
jQuery pistikprogrammid on veebisaidi või isegi iga veebirakenduse loomisel üks kõige vajalikumaid komponente. Need võimaldavad teil oma funktsioone laiendada. Selles artiklis on loetletud 2012. aasta kõige kasulikumad pistikprogrammid. Otsimise hõlbustamiseks on kõik pluginad 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 plokipõhise veebisaidi struktuuri. See võimaldab teil reguleerida mis tahes elemendi kõrgust ja laiust.
Uus plugin tundlike paigutuste jaoks, Freetile, võimaldab teil luua mis tahes suurusega elemente, ilma et peaksite looma kindla suurusega ruudustiku veerge.
Gridster.JS jquery pistikprogramm pukseerimisvõrkude loomiseks. Seda saab kasutada ka elementide dünaamiliseks eemaldamiseks ja lisamiseks ruudustikust.
Zoomooz.js on hõlpsasti kasutatav jQuery pistikprogramm mis tahes veebilehe elemendi sissesuumimiseks. Saate hõlpsasti lisada suumiefekti, lisades lihtsalt suvalisele HTML-elemendile klassi "zoomTarget". Suurendust saab lehel klõpsates lähtestada. Pistikprogrammi on testitud versioonides Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera ja Chrome.
Wookmark on dünaamilise mitmeveerulise malli loomiseks mõeldud pistikprogramm.
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 liikumisel tõelise lehekülje pööramise efekti. Kasutatakse riistvaralist kiirendust. Töötab tahvelarvutites ja nutitelefonides.
Plugin tundlikuks tüpograafiaks. See võimaldab teil kasutada valijat, mis loob ideaalse fondi suuruse.
Võimaldab teil saidi ümber luua animeeritud liikumisi, sealhulgas kõiki võimalikke teisendusi
Navigeerimispluginad
HorizontalNav on jQuery pistikprogramm, mis laiendab horisontaalset menüüd, et see mahuks konteineri täislaiusele. Kui olete kunagi proovinud luua efekti, et sirutada navigeerimismenüü õigesti projekti CSS-i konteinerisse, siis teate kindlasti, kui keeruline on seda teha brauseritevahelise ühilduvuse jaoks. See pistikprogramm muudab selle lihtsaks.
stickyMojo on kerge, kiire ja paindlik jQuery kleepuva külgriba pistikprogramm. See töötab Firefoxi, Chrome'i, Safari ja IE8+ (toetab üsna hästi IE vanemaid versioone).
ddSlick on pistikprogramm, mis võimaldab luua piltide ja kirjeldustega rippmenüüd.
Plugin rippmenüü paneelide lihtsaks korraldamiseks. Plugin toetab küpsistega töötamist paneelide oleku salvestamiseks. Valikute hulgas on tagastamisfunktsioonid sektsioonide avamise ja sulgemise protsessi kohandamiseks.
Plugin kokkupandavate plokkide loomiseks, mis võivad sisaldada mis tahes andmeid piiratud ruumis.
Pluginate kujundaminePistikprogramm võimaldab teil määrata parooli keerukuse taseme.
JQuery pistikprogramm failide allalaadimise protsessi visualiseerimiseks. See toetab lohistamist ja loob fotodele kohesed eelvaated.
Plugin, mis tuvastab ja kontrollib krediitkaardinumbreid. See võimaldab teil määrata krediitkaardi tüübi.
Plugin andmete filtreerimiseks. Saate andmeid filtreerida märgendi ja mitme sildi ja kategooria vahel.
Plugin, mis kontrollib e-posti sisestamise täpsust eelnevalt koostatud loendiga (siin saate lisada populaarseimad meiliteenused mail.ru, yandrex.ru, gmail jne).
Pluginad liugurite ja karussellide loomiseks
Pistikprogramm, mis võimaldab teil juhtida üleminekuid hiire, puuteplaadi ja klaviatuuri abil. Vaikeüleminekutele saate lisada täiendavaid, mis on samuti lähtefailis.
iosSlider
iosSlider on tundliku brauseriülese liuguri pistikprogramm.
RSlider on täisekraanil kohandatav liugur. See kohandub automaatselt teie ekraani laiusega.
Fresco on tundlik valguskasti pistikprogramm. Seda saab kasutada suurepäraste ülekatete loomiseks, mis töötavad suurepäraselt igas suuruses ekraanil, kõigis brauserites ja kõigis seadmetes.
BookBlock: sisu ümberpööramise pistikprogramm
BookBlock on jQuery pistikprogramm, mida saab kasutada brošüürilaadsete komponentide loomiseks, mis võimaldavad luua lehekülje pööramise stiilis navigeerimist. Siin saate kasutada mis tahes sisu, olgu see siis pilt või tekst. Plugin muudab struktuuri ainult vajaduse korral (teisisõnu ainult lehe pööramisel) ning kasutab ülekatteid ja varje, et lisada realismi.
Adapter on kerge sisu liugur, mis pakub arendajatele lihtsat liidest kaunite 2D- või 3D-slaidi-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. Seda on lihtne kohandada ja see toetab isegi vanemaid brausereid.
Rhinoslider on üsna paindlik jQuery slaidiseansi pistikprogramm. Saadaval pole mitte ainult mitmesuguseid efekte, vaid saate liugurile lisada ka oma stiile, efekte ja funktsioone.
Sequence on jQuery pistikprogramm sisu ainulaadseks kerimiseks ja annab teile täieliku kontrolli. Kasutada saab mis tahes tüüpi sisu; see kerib lõputult. See kasutab semantilist märgistust ning toetab ka reageerivaid malle ja puutepõhiseid seadmeid.
Glisse.js on lihtne, tundlik ja hästi kohandatav jQuery fotogalerii.
Pluginad diagrammide ja graafikute jaoksMorris.js on kerge teek, mis kasutab JQueryt ja Raphaëlit aegridade jooniste joonistamise hõlbustamiseks.
jQuery Org Chart on pistikprogramm, mis võimaldab luua pesastatud elementidega puustruktuure. Andmed sisestatakse pesastatud järjestamata loendisse, mis muudab pistikprogrammi kasutamise uskumatult lihtsaks.
Tüpograafia pistikprogrammidBacon.js on jQuery pistikprogramm, mis võimaldab mähkida teksti ümber Bezieri kõvera või joone.
Textualizer – 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 jagab päised ridade kaupa enne iga rea suuruse muutmist, et täita saadaolev horisontaalne ruum.
trunk8 on JQuery teksti kärpimise pistikprogramm. Võimaldab vähendada suure tekstiploki väiksemaks osaks eelkontrolliks.
Pluginad erinevate piltide efektide loomiseksSee on jQuery pistikprogramm, mis kasutab kallutamise efekti loomiseks CSS3 filtreid.
Plugin adaptiivsete piltide efekti rakendamiseks.
jQuery pistikprogramm, mis muudab pildikaartide loomise lihtsaks. Selle tööriistaga saab esile tõsta või valida mis tahes pildikaardi ning kaarti saab mitmel viisil manipuleerida. 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.
Huvitav tekstiefekt jQuery abil hõljutamisel.
Pildi liuguri väga originaalne disain, mis meenutab ventilaatorit. Animeeritud slaidi üleminek. Piltide vahel navigeerimine toimub noolte abil. Samuti on olemas automaatne käiguvahetus, mida saab sisse ja välja lülitada ülaosas asuva Play/Pause nupu abil.
3. Lahe skeemide kujundus saidil
Animeeritud sektordiagramm, mis on loodud Raphaël JavaScripti teegi abil.
Lihtne rippmenüü CSS3 saidi jaoks.
Animeeritud jQuery liugur. Taustapildid skaleeruvad automaatselt, kui brauseriakna suurust muudetakse. Iga pildi jaoks kuvatakse kirjeldusega plokk.
6. Tausta jQuery animatsioon lehel
Animeeritud jQuery efekt kursori liigutamisel üle ekraani.
7. Blackbird plugin
Funktsionaalne lahendus on analoogne JavaScripti alert()-ga. Lisateavet Blackbirdi kasutamise kohta saate lugeda demo lehelt.
8. JSF-i komponentide Ajaxi teek "OpenFaces"
Erinevate Ajaxi komponentide komplekt JFS-i avatud lähtekoodiga raamistikus kasutajaliidese elementide loomiseks. Komponentide komplekt sisaldab enamlevinud liidese elemente: tabelite ja graafikutega töötamise komponendid, vahekaardid, hüpikaknad, filtrid, menüüd, kalendrid, vormidega töötamise komponendid ja paljud teised Ajaxi lahendused. Demolehel näete kõiki komponente töös. OpenFaces'i levitatakse kahte tüüpi litsentside alusel: tasuta ja kommertslitsentsid.
9. “Wijmo” jQuery kasutajaliidese vidinate komplekt kasutajaliidese elementide loomiseks
Professionaalsete vidinate kogumik veebiarendajatele. Wijmo komplekt sisaldab järgmisi tasuta jQuery lahendusi: akordionid, kalendrid, hüpikaknad, laiendajad, stiliseeritud vormid, erinevad loendid, menüüd, edenemisribad, vahelehed, tööriistaspikrid ja muud kasulikud vidinad. Lisaks tasuta lahendustele pakuvad Wijmo arendajad ka kvaliteetseid kommertsliku jQuery kasutajaliidese arendusi. Pärast arhiivi allalaadimist näete kõiki võimalikke vidinaid töös, need asuvad kataloogis wijmo-open/development-bundle/samples/. See komplekt säästab kindlasti teie veebiprojektide arendamisel palju aega.
10. Otsinguvälja kujundamine jQuery abil
Otsingupäringu sisestamise välja animeeritud kujundus. Efekti saab jälgida, klõpsates sisestusväljal hiirt. Pärast päringu sisestamist klaviatuuri abil ilmub nupp otsimise alustamiseks.
11. „Flux Slider” liugur, kasutades jQuery ja CSS3
Plugin skaleeritava teksti loomiseks sõltuvalt brauseriakna suurusest. Mida suurem on brauseriaken, seda suurem on tekst Pidage meeles, et seda efekti ei tohiks kasutada lõikudes tavalise teksti puhul. See sobib ainult tohutute pealdiste kuvamiseks, näiteks reklaamsaitidel. Näide on näha demo lehel. Efekti nägemiseks proovige akna suurust muuta.
13. Slaidiseanss "Ebamugav"
Funktsionaalne slaidiseanss. Slaidid võivad olla: lihtsad pildid, pildid koos pealdistega, pildid koos tööriistavihjetega, videod. Navigeerimiseks saate kasutada klaviatuuril nooli, slaidinumbrite linke ja vasakut/paremat klahve. Slaidiseanss on saadaval mitmes versioonis: pisipiltidega ja ilma. Kõigi valikute vaatamiseks järgige linke Demo #1 - Demo #6, mis asuvad demolehe ülaosas.
14. jQuery pistikprogramm "jQueryZoom"
Selle pistikprogrammiga saate lisada hõljutamisel pildi suumiefekti või lisada sellele ülekatte. Pistikprogrammi on lihtne oma vajadustele vastavaks kohandada.
15. jQuery galerii "jSwitch"
Animeeritud jQuery galerii.
16. 3D-efektiga JavaScripti galerii
Uus jQuery liugur. Slaidide vahetamisel mitu lahedat animeeritud efekti.
18. Uus Apple stiilis CSS3 menüüUus Apple stiilis menüü. Tundub tumedam kui varem, kuid mitte vähem armas.
19. Vihjete värske juurutamine jQuery "Tooltipsy" abil
Paljud erinevad hõljumise kohtspikri efektid.
20. JavaScripti galerii mobiilseadmetes vaatamiseks "PhotoSwipe"
Pildigalerii, mis on optimeeritud mobiilseadmetes (telefonides või tahvelarvutites) vaatamiseks.
21. Stiilne CSS3 menüü
Kujutise ala suurendamise mõju hõljumisel.
23. Ajaxi tellimiskorv “Easy Basket” veebipoele
Funktsionaalne ostukorv veebipoe jaoks integreeritud makseviisidega kaupade eest PayPali või Google Checkouti kaudu. Kasutatavad tehnoloogiad: HTML, CSS, jQuery, AJAX, PHP, XML, XSL. Manustatakse hõlpsalt veebilehele ja kohandatakse ostukorvi välimust.
24. jQuery pistikprogramm „Grid Navigation Effects”
Algne navigeerimine piltide pisipiltide vahel. Demolehe paremas servas efekti vaatamiseks klõpsake nuppu Üles ja Alla. See jQuery lahendus pakub efekti ka pisipildi kohal hõljutamisel.
25. Taustaefekt "Vertikaalne parallaks"5. Ploki kuva tüübiks jQuery lülitamine
Selle jQuery "Kuvavalikute vahetamise" pistikprogrammi abil saate lehel rakendada lülitit, millega külastaja lülitub teabe tabelikuvalt plokkide kirjeldusega täisvaatele. Ideaalne portfelli rakendamiseks.
26. Analoogkell koos jQueryga
Ilusa portfelli juurutamine jQuery ja HTML5 abil. Portfelli funktsioon on rakendatud filtris. Portfoolios olevad erinevad tööd kuvatakse sõltuvalt valitud kategooriast.
28. Miniatuuridega galerii “TN3 galerii”
jQyery pisipiltidega galerii. Rakendatud on kompaktaknas ja täisekraani aknas vaatamise võimalus ning automaatse slaidivahetuse keelamise/lubamise võimalus.
29. Piltide kirjeldus “Eelvaate aken”
Plugin piltide pealdisteks. Kui hõljutate hiirekursorit animeeritud efektiga, kuvatakse pildi kirjeldus. jQueryt kasutatakse animatsiooni loomiseks.
30. JavaScripti karussell
Slaidi paremas ülanurgas saate automaatse slaidivahetuse sisse/välja lülitada.
37. Rippmenüü "jbar"
Animeeritud menüü. Menüüelemendid on esitatud ikoonide ja kirjelduste kujul. Mitmed suurepärased efektid, kui hõljute kursorit menüüelemendi kohal. Seal on 8 efekti, nende kõigi nägemiseks järgige demolehel olevaid linke Näide1-Näide8.
39.jQuery slaidiseanss
Slaidiseanss piltide muutmise originaalse efektiga.
40. Animeeritud jQuery CSS3 efekt
jQuery galerii piltide pealdistega. Mitu slaidi ülemineku efekti. Piltide vahel navigeerimine toimub kas noolte abil või pisipildil klõpsates.
Taustaefekt (liikumine läbi kihtide). Efekti nägemiseks liigutage demolehel hiirt üle ekraani.
43. jPaginator CSS3 saalemisplugin
Fotodest või HTML-plokkidest unikaalsete "seinte" loomiseks, mida saab hiirega kindlas piirkonnas üle ekraani lohistada.
