Jquery-laajennus. Erinomainen ajax-chat jQueryllä ja CSS3:lla. Liitännäisvaatimukset

Laajenna jQuery-kirjastoa omalla koodillasi

jQuery-kirjasto nopeuttaa ohjelmointia JavaScriptissä. Sen avulla voit kirjoittaa vähemmän koodia, mikä yksinkertaistaa ohjelmointiprosessia. Joskus jQuery-kirjastoa käyttäessäsi saatat joutua kirjoittamaan uudelleen samaa koodia usein käytetyille funktioille yhä uudelleen ja uudelleen. Tässä tapauksessa on järkevää kirjoittaa oma mukautettu jQuery-laajennus.

jQuery-laajennusten avulla voit lisätä oman koodisi jQuery-kirjastoon; niitä voidaan käyttää mihin tahansa toistuvaan toimintoon. Saatavilla on esimerkiksi monia laajennuksia diaesitysten näyttämiseen ja pudotusluetteloiden tai haitarivalikkojen luomiseen. Jos etsit jQuery-laajennuksia, voit löytää monia esimerkkejä, joita voidaan käyttää omia projekteja(ja katso kuinka ne rakennetaan).

Yleisesti käytetyt lyhenteet

• CSS: CSS-tyylisivu / Kaskadipöytä tyylejä
• HTML: Hypertext Markup Language

Tämä artikkeli opettaa sinulle, kuinka nopeasti luodaan mukautettu jQuery-laajennus. Käyttämällä esimerkkikoodia kanssa vaiheittaiset ohjeet esittelee jQuery harmonikkalaajennuksen luomisprosessia. Tämä artikkeli on tarkoitettu niille, jotka tuntevat jQueryn ja ovat valmiita viemään taitonsa seuraavalle tasolle.

Aloitetaan

jQuery on kirjasto, joka laajenee JavaScript-kieli. Luodaan uusi laajennus, olet olennaisesti laajentamassa jQuery-kirjastoa, joka puolestaan ​​laajentaa JavaScriptiä. Jotta ymmärrät tarkalleen, kuinka laajennuksesi laajentaa jQuery-kirjastoa, sinun on ymmärrettävä JavaScript-prototyyppiominaisuus. Tätä ominaisuutta ei käytetä eksplisiittisesti, vaan piilotettuna - jQuery fn -ominaisuuden kautta, joka on jQueryn alias JavaScriptin omalle prototyyppiomaisuudelle.

Jos haluat luoda uuden jQuery-laajennuksen fn-ominaisuuden avulla, anna sen nimi fn-ominaisuuteen ja osoita se uusi ominaisuus, joka toimii rakentajafunktiona, aivan kuten tavallisessa JavaScriptissä. Listauksen 1 koodi näyttää, kuinka määritellään uusi jQuery-laajennus nimeltä accordion jQuery-objektin ja fn-ominaisuuden avulla ja määritetään sille sitten uusi konstruktorifunktio.

Listaus 1. Uuden jQuery-laajennuksen määrittäminen nimeltä accordion jQuery.fn.accordion = function() ( // Lisää laajennuskoodi tähän );

Luettelo 1 näyttää yhden tavan luoda jQuery-laajennus; tässä esimerkissä ei ole mitään toiminnallista vikaa. On kuitenkin suositeltavaa, että luot ensin käärefunktion, jonka avulla voit käyttää dollarimerkkiä ($). Oletusdollarimerkki voi aiheuttaa ristiriitoja muiden JavaScript-rakenteiden kanssa. Jos pakkaat laajennuksen funktioon, ristiriitoja ei synny ja dollarimerkkiä voidaan käyttää. Listauksen 2 koodiesimerkki osoittaa, kuinka kääretoimintoa käytetään jQuery-laajennuksen määritelmään.

Listaus 2. Uuden jQuery-liitännäisen, nimeltään accordion, pakkaaminen käärefunktioon (function($) ( $.fn.accordion = function() ( // Lisää laajennuskoodi tähän ); ))(jQuery);

Listaus 2 käyttää jQuery-avainsanaa kääretoimintoon, jolloin dollarimerkkiä voidaan käyttää laajennuksessa aivan kuten fn-ominaisuuden kanssa. Kääritystoiminnon avulla voit käyttää dollarimerkkiä jQuery-avainsanan sijasta koko laajennuksessa häiritsemättä muita laajennuksia. Näin voit kirjoittaa vähemmän koodia ja auttaa pitämään laajennuskoodisi puhtaana ja helposti ylläpidettävänä.

Ketjuttavuuden säilyttäminen

jQueryn etuna on kyky käyttää mitä tahansa valitsinta. Sinun on kuitenkin pidettävä mielessä, että laajennus voi toimia useiden erityyppisten elementtien kanssa. Käyttämällä tätä avainsanaa voit käyttää toisiinsa liittyviä toimintoja käyttämällä silmukan jokaista elementtiä elementin tyypistä riippumatta. Jos return-avainsana edeltää jokaista silmukkaa, voit säilyttää laajennuksen ketjuttavuusominaisuuden. Lista 3 näyttää jokaisen silmukan, joka on määritetty funktion käsittelijälle ja yhdistettynä return-avainsanaan.

Listaus 3. Return-avainsanan käyttäminen ennen jokaista silmukkaa (function($) ( $.fn.accordion = function() ( return this.each(function() ( // Return käyttö säilyttää ketjuttavuuden )); )) jQuery);

Listauksen 3 koodin ansiosta harmonikkaesimerkkilaajennusta voidaan käyttää menetelmäkutsujen ketjussa. Ketjutettavuus on toinen tärkeä ominaisuus jQuery - voit käyttää laajennusta menetelmäkutsujen ketjussa. Esimerkiksi seuraava koodi näyttää, kuinka HTML-elementti sammutetaan asteittain ja poistetaan sitten asiakirjaobjektimallista (DOM) yhdessä menetelmäkutsujen ketjussa.

$("#oma-div").fadeOut().remove(); "Haitarin" jäsentäminen

Tyypillinen harmonikkasuunnittelu sisältää otsikkorivit ja vierekkäiset alueet, joissa on sisältöä. "Haitarit" sopivat mainiosti luetteloiden HTML-rakenteeseen; Otsikot käyttävät dt-elementtejä ja sisältöalueet dd-elementtejä. Listauksen 4 HTML-rakenne on luettelon määritelmä, jossa on neljä otsikkoa ja vastaavat sisältöalueet.

Listaus 4. Yksi menetelmäkutsujen ketju Osa 1 Osa 2 Osa 3 Osa 4

Listauksen 4 luettelomäärityksessä on myös CSS-luokka nimeltä harmonikka. Ilman CSS:ää tämä harmonikkarakenne vastaa kuvan 1 raakarakennetta.

Kuva 1. Harmonikkarakenne ilman CSS:ää

Harmonikkaluokkaa käytetään soveltamaan tyylejä luettelon yleiseen määrittelyyn, otsikoihin ja sisältöalueeseen. Listauksen 5 esimerkissä harmonikkaluokka itse määrittää leveyden, reunuksen, fontin ja fontin koon. Mikä tahansa esimerkeistä CSS:n käyttäminen voidaan muokata valitsemalla omia tyylejä, kuten väriä, fonttia, kokoa ja väliä.

Listaus 5. CSS harmonikkaluokka, jota käytetään tyylien asettamiseen yleinen määritelmä lista .accordion (leveys: 500px; reunus: 1px kiinteä #cc; reunus-ala: ei mitään; fonttiperhe: Arial, Helvetica, sans-serif; font-koko: 12px; )

CSS-haitariluokkaa käytetään sitten otsikoiden (dt) ja sisällön dd tyyliin. Sekä otsikot että sisältö sisältävät yleisiä tyylejä, jotka määrittävät alareunuksen ja asettavat marginaaliksi 0, mikä mahdollistaa otsikko- ja sisältöalueiden vierekkäin, kuten listassa 6 näkyy.

Listaus 6. Yleiset harmonikka-otsikko- ja sisältöaluetyylit .accordion dt, .accordion dd (reunus-ala: 1px kiinteä #cc; marginaali: 0px; )

Jotta dt-elementistä tulisi enemmän otsikkoa, asetamme taustavärin ja lisäämme kohdistimen, joka antaa vaikutelman aktiivisesta otsikosta. Tässä luokassa on muitakin tyylejä, kuten täyte tai kirjasinkoko ja paino. dd-elementti lisää täyttöä erottamaan kuvauksen otsikosta. Esimerkki on listassa 7.

Listaus 7. CSS-tyylit otsikoille ja sisältöalueille "accordion" .accordion dt ( tausta: #eaeaea; kohdistin: osoitin; täyttö: 8px 4px; kirjasimen koko: 13px; fontin paino: lihavoitu; ) .accordion dd ( täyttö: 12px 8px; )

Kun kaikki CSS-luokat Lisätty, visuaalinen tulos muistuttaa enemmän haitaria, kuten kuvassa 2.

Kuva 2. Harmonikkarakenne CSS:llä
Plugin ohjelmointi

Jotta harmonikka toimisi, sinun on koodattava jQuery-liitännäiset toiminnot, joita aloitimme luomaan edellisessä osiossa. Haitarilaajennus alkaa kiertämällä kaikki määritellyt "haitarinäppäimet". "Haitarin" määrittämiseen käytetään seuraavaa jQuery-kutsua HTML-dokumentissa tai ulkoisesti upotetussa JavaScript-tiedostossa.

$("dl#oma-haitari"). accordion();

Jokaiselle "avaimelle" kutsutaan vastaavat määritelmät käyttämällä jQuery menetelmä children , joka palauttaa joukon dt-elementtejä. Sovelletaan napsautustapahtumaa dt-elementteihin ja sitten jokaiseen dt:hen menetelmä nimeltä reset. Nollausmenetelmän avulla voit tiivistää kaikki dd-elementit, kun haitari ladataan ensimmäisen kerran. klikkaa tapahtumaa Kutsuu erikoismenetelmää nimeltä onClick, kun dt-elementtiä tai otsikkoa napsautetaan. OnClick-menetelmä etsii kaikki dt-elementit "haitarista". Se kutsuu erityistä piilotusmenetelmää, joka piilottaa jokaisen vastaavan dd-elementin käyttämällä seuraavaa menetelmää löytääkseen dd-elementin dt-elementin vieressä ja liu'uttaa sen sitten ylös sulkemisprosessin animoimiseksi.

Kun kaikki dd-elementit on piilotettu, napsautettuun dt-elementtiin liittyvä dd-elementti tulee näkyviin slideDown-menetelmän ansiosta ja luo laajennus- ja supistusanimaation, kuten luettelossa 8 on esitetty. OnClick-menetelmän viimeinen koodirivi on false. rivillä, mikä varmistaa, että klikattu otsikko ei toimi normaalisti. Esimerkiksi, kun käytät ankkurielementtiä otsikkona, tarvitset palauttamismenetelmän false, jotta käyttäjä ei ohjata toiselle sivulle tai olemassa olevan sivun toiselle osalle.

Listaus 8. Lisäominaisuudet accordion, jota käytetään luomaan jQuery-laajennus (function($) ( $.fn.accordion = function(options) ( return this.each(function() ( var dts = $(this).children("dt"); dts . click(onClick); dts.each(reset)); ; return false; ) function hide() ( $(this).next().slideUp("fast"); ) function reset() ( $(this).next().hide(; ) )) jQuery);

Jos haitarilaajennus liittyy HTML-määrittelyluettelorakenteeseen, kuten aiemmin loimme, käytetään harmonikkatoimintoa. Haitaritoiminnoissa yhden otsikon tai dt-elementin napsauttaminen avaa vastaavan sisältöalueen ja sulkee muut avoimet sisältöalueet. Toisin sanoen vain yksi sisältöalue voi olla avoinna kerrallaan.

Oletukset ja asetukset

JQuery-laajennus voi sisältää oletusarvoja ja mukautusasetuksia. Asetusvaihtoehdot- Nämä ovat pohjimmiltaan argumentteja, jotka välitetään laajennukselle. Sen sijaan, että välität useita argumentteja asetusvaihtoehdoilla, voit välittää yhden argumentin nimellä kirjaimellinen objekti, mikä on jQueryn vakiokäytäntö. Jos laajennus sallii parametrit, sinun tulee määrittää niille oletusarvot käyttämällä oletusobjektia. Kuten parametrit, oletusarvot edustavat objektiliteraalia, jonka täytyy sisältää laajennukselle välitetyt ominaisuudet.

Jos esimerkiksi sallit ominaisuuden, jota voidaan käyttää haitarin ensimmäisen sisältöalueen avaamiseen, kun se ladataan ensimmäisen kerran, laajennuksen tulee antaa tälle ominaisuudelle oletusarvo. Käytä oletusarvoja määrittääksesi ominaisuuksien oletustilan ja asetuksia ohittaaksesi oletusarvot. Kun laajennus vastaanottaa parametreja, $.extend-menetelmää voidaan käyttää varsinaisen ohituksen tekemiseen. $.extend jQuery -menetelmä yhdistää kaksi tai useampia objekteja. Listauksen 9 esimerkki osoittaa yleisen käytännön käyttää $.extend-menetelmää käyttäjän määrittämien parametrien yhdistämiseen oletusarvoihin jQuery-laajennuksessa.

Listaus 9. Asetusten ja oletusarvojen lisääminen jQuery-liitännäiseen (function($) ( $.fn.accordion = function(options) ( var settings = $.extend((),), (avoin: false), asetukset); return this.each(function() ( var dts = $(this).children("dt"); dts.click(onClick); dts.each(reset); if(settings.open) $(this).children ( "dt:first-child").seuraava().näytä());funktio onClick() ( $(this).siblings("dt").each(piilota); $(this).next() . slideDown("fast"); return false; ) function hide() ( $(this).next().slideUp("fast"); ) function reset() ( $(this).next().hide( ) ) ))(jQuery);

$.extend-menetelmän argumentit ovat kohdeobjekti ja kaksi tai useampi yhdistettävä objekti. Tässä esimerkissä kohdeobjekti on tyhjä objektiliteraali, joka toimii säiliönä yhdistettäville objekteille. Kohteesta tulee yksi objekti, joka sisältää yhdistettävien objektien arvot – tässä tapauksessa asetusmuuttujan. Toinen argumentti on objektiliteraali, joka sisältää laajennuksen oletusominaisuudet. Kolmas argumentti on käyttäjän määrittämät asetukset. Jotta voit välittää mukautusasetuksia käyttämällä harmonikkalaajennusta HTML-elementissä, sinun on tiedettävä, mitä ominaisuuksia laajennus sulkee pois, jotta ne voidaan välittää objektiliteraalina alla olevan kuvan mukaisesti.

$("dl#my-accordion"). accordion((open:true));

Listauksen 9 esimerkissä laajennukselle välitetyt parametrit ohittavat oletusarvot käyttämällä $.extend-menetelmää. Jos parametreja ei välitetä, käytetään oletusarvoja. Esimerkkilaajennus käyttää open-ominaisuutta määrittääkseen, pitäisikö ensimmäisen sisältöalueen avautua, kun se latautuu.

Uudelleenkäytettävä

Haitarilaajennusesimerkkiä voidaan käyttää uudelleen missä tahansa HTML-asiakirjassa, myös samassa. Luomallamme uudella haitarilaajennuksella voimme sisällyttää useita näistä harmonikkarakenteista ja määritellä jokaisen erikseen jQuery-haitariksi. Jos haluat lisätä HTML-dokumenttiin useita haitaroita, lisää vain tarvittava määrä harmonikkarakenteita. Listauksen 10 koodi sisältää kaksi harmonikkarakennetta, jotka on erotettu kappalemerkillä.

Listaus 10. Useiden harmonikkaiden käyttö samassa HTML-dokumentti 1 § Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Osa 2 Vestibulum a velit eu ante scelerisque vulputate. Osa 3 Nam mi. Proin viverra leo ut odio. Curabitur malesuada. 4 § Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. 1 § Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Osa 2 Vestibulum a velit eu ante scelerisque vulputate.

Listauksen 10 kaksi harmonikkarakennetta ovat lähes identtisiä, lukuun ottamatta niiden sisältöä ja mikä tärkeintä, niiden tunnistearvoja. Ensimmäinen rakenne sisältää tunnisteen my-accordion arvon. Toinen rakenne sisältää tunnistearvon my-accordion2 . Nyt näihin rakenteisiin pääsee käsiksi toisistaan ​​riippumatta. Esimerkiksi seuraava jQuery-skripti määrittää kunkin harmonikkarakenteen käyttämällä uutta luomamme laajennusta.

$("dl#my-accordion"). accordion((open:true)); $("dl#oma-haitari2"). accordion((open:true));

Molemmat harmonikkarakenteet määritellään siten, että ensimmäinen paneeli on oletusarvoisesti auki. Kuvassa 3 on esimerkki useiden harmonikkalaajennusten käyttämisestä samassa HTML-dokumentissa.

Kuva 3. Useita harmonikkarakenteita samassa HTML-dokumentissa
Laittamalla kaikki yhteen

Luomalla uusi mukautettu jQuery harmonikkalaajennus, kirjoittamalla CSS ja lähettämällä HTML-merkintä, voit koota kaiken lopulliselle Web-sivulle. Jotta jQuery accordion -laajennus toimisi, sinun on otettava käyttöön jQuery-kirjasto. Käytän mieluummin sisällönjakeluverkkoa (CDN), joka toimittaa kirjastot käyttäjän maantieteellisen sijainnin perusteella ja tarjoaa siten nopeimman mahdollisen tiedostojen latausnopeuden. jQuery-kirjasto on saatavilla Googlen CDN:ssä, ja se voidaan upottaa verkkosivulle käyttämällä URL-osoitetta https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js.

Kirjastosta on muitakin versioita. Katso linkit Google Developer -sivuston Kirjastot-osiossa. Ainoat lisätiedostoja, jotka on määritettävä HTML-dokumentissa, ovat CSS-tiedosto, joka määrittelee "harmonikan" tyylit, ja jQuery accordion plugin. Varsinaisten harmonikkarakenteiden HTML-merkintä muuttuu sitten. Esimerkki on listassa 11.

Listaus 11. Kahden harmonikkarakenteen määrittäminen jQuery-haitariksi Mukautetun jQuery-laajennuksen luominen $(document).ready(function() ( $("dl#my-accordion").accordion((open:true)); $ ("dl" #oma-harmonika2"). accordion((avoin:true)); 1 § Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Osa 2 Vestibulum a velit eu ante scelerisque vulputate. Osa 3 Nam mi. Proin viverra leo ut odio. Curabitur malesuada. 4 § Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1 § Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Osa 2 Vestibulum a velit eu ante scelerisque vulputate. Johtopäätös

Tämä artikkeli näyttää, kuinka helppoa on luoda mukautettu jQuery-laajennus. Kaikki luomasi toistuvat toiminnot voidaan nopeasti muuntaa laajennuksiksi nopeampaa ja tehokkaampaa kehitystä varten. Avain mihin tahansa laajennukseen on uudelleenkäyttö, ja uudelleenkäyttö on avain suorituskyvyn parantamiseen.

Kuten jo tiedät, yksi jQuery-kirjaston tärkeimmistä ominaisuuksista on, että se on erittäin kätevä haku elementtejä ja mahdollisuutta käsitellä niitä edelleen. Joten näiden manipulaatioiden luetteloa voidaan laajentaa järjestämällä uusia menetelmiä jQuery-objektille. Erilliseen tiedostoon sijoitetut laajennukset muodostavat laajennuksia jQuery-kirjastoon.

Lisäksi omien lisäosien luomissäännöt kuvailemalla toteutamme erillisen täysimittaisen laajennuksen esimerkkinä. Sen toimintona on lisätä valituille elementeille uusi toimintatapa - värin vaihtaminen hiiren päällä. Kutsutaan laajennusta responsiveBlockiksi (responsive block element).

Tiedoston luominen laajennuksella ja liittäminen

Tyypillisesti javascript-laajennukset sijaitsevat erilliset tiedostot. Tiedostoille, joissa on jQuery-laajennuksia, on olemassa käytäntö nimen suhteen - sen on noudatettava muotoa jquery.plaginName.js. Näin ollen liitännäistiedoston sisältävän tiedoston nimi on oltava jquery.responsiveBlock.js.

Jotta lisäosamme olisi saatavilla sivulla, sinun on yhdistettävä tiedosto jQuery-kirjastoon ja sitten js-tiedosto laajennuslaajennukseen:

~lt~script src="jquery.min.js"~gt~~lt~/script~gt~ ~lt~script src="jquery.responsiveBlock.js"~gt~~lt~/script~gt~

Pluginin perusta

Tämä muuttuja menetelmän rungossa sisältää aina nykyisen jQuery-objektin (sen, jolla menetelmää kutsuttiin). Jotta voimme iteroida kaikkia valittuja elementtejä yksitellen, käytämme .each()-metodia. Ja jotta menetelmäketjua voidaan jatkaa, menetelmämme on palautettava nykyinen jQuery-objekti:

(funktio ($) ( jQuery.fn . responsiveBlock = funktio () ( var make = funktio () ( ) ; ) ) (jQuery) ;

Ominaisuuksien lisääminen laajennukseen

Useimmat laajennukset vaativat asetuksia. Esimerkiksi laajennuksessamme on erittäin hyödyllistä pystyä määrittämään elementin väri, kun osoitin ei ole sen päällä, ja väri sen jälkeen. Asetusten järjestämiseen on yksi yksinkertainen vaihtoehto jQuery-laajennus. Sen avulla voit asettaa luettelon ominaisuuksista sekä niiden oletusarvoista. Tässä tapauksessa voit asettaa omat arvosi näille ominaisuuksille, kun asennat laajennuksen elementtiin, ensimmäisessä parametrissa:

(funktio ($) ( jQuery.fn .responsiveBlock = toiminto (valinnat) ( // Aseta ominaisuuksien luettelo ja määritä niille oletusarvot. // Jos kutsuttaessa menetelmää, mukautetut // asetukset joillekin niistä on määritetty, ne korvaavat automaattisesti // vastaavat oletusarvot asetukset = $.extend (( defColor: "white" , hoverColor: "red" ) , options) var make = function () ( // menetelmän toteutus erillisellä sivuelementillä ) palauttaa tämän kunkin (make) // lopulta responsiveBlock-menetelmä palauttaa nykyisen jQuery-objektin ) ) (jQuery) ; // nyt voit asettaa laajennuksen oletusasetuksilla: $("div:first" ) .responsiveBlock () ; // tai määritä omat arvosi joillekin tai kaikille asetuksille $("div:last" ) .responsiveBlock (( defColor: "#bbbbbb" ) ) ; $("ul" ) .responsiveBlock (( defColor: "#aaaaaa" , hoverColor: "green" ) ) ;

(Sillä parempi ymmärrys tämä esimerkki Kannattaa tutustua $.extend-funktion tarkoitukseen).

Yllä saatu malli on yleisin mallivaihtoehto jQuery-laajennuksille. Siksi, jos päätät kirjoittaa oman laajennuksen, voit turvallisesti aloittaa sillä (luonnollisesti laajennuksen nimellä ja asetusluettelollasi).

Jatkototeutus

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.min.js"~gt ~~lt~/script~gt~ ~lt~tyyli~gt~ div(täyttö:10px; marginaali:5px;reunus:3px tasainen punainen) ~lt~/tyyli~gt~ ~lt~/head~gt~ ~lt ~body~gt~ ~lt~div~gt~Block sivulla~lt~/div~gt~ ~lt~script~gt~ (function($)( jQuery.fn.responsiveBlock = function(options)( options = $ .extend(( defColor:"valkoinen", //elementin väri, jonka päällä ei ole kohdistinta hoverColor:"punainen" //elementin väri, jonka päällä kohdistin on), valinnat var make = function() )( // tässä tämä muuttuja sisältää erillisen // DOM-elementin, johon sinun tulee käyttää // lisäosan $(this).css("background-color",options.defColor) .mouseenter( function())( $(this).css("taustaväri",optiot.hoverColor); )).mouseleave(function())( $(this).css("background-color",options.defColor) )) palauttaa tämän. $("div").responsiveBlock(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Tapahtuman sukupolvi

jQuery-kirjaston avulla voit järjestää omia tapahtumia elementeille ja asentaa sen jälkeen niiden käsittelijät (kuten onClick- tai onMousemove-tapahtumissa). Luodaksesi omia tapahtumia valituille elementeille, sinun on käytettävä .trigger()-metodia, ja voit asentaa niiden käsittelijät .on() -komennolla. Näin ollen laajennukset voivat tarjota paitsi uusia toimintoja myös niihin liittyvän tapahtumajärjestelmän, jota kuka tahansa laajennuksen käyttäjä voi käyttää.

Käytä nimiavaruuksia, jotta laajennuksesi tapahtumanimet eivät häiritse muiden ihmisten tapahtumien nimiä. Tätä varten on kätevintä käyttää itse laajennuksen nimeä.

Pluginissamme voit järjestää stateChange-tapahtuman, joka tapahtuu, kun elementin tila muuttuu (osoitin pidetään tai ei):

(funktio ($) ( jQuery.fn .responsiveBlock = toiminto (valinnat) ( options = $.extend (( defColor: "valkoinen" , //elementin väri, jonka päällä ei ole kohdistinta hoverColor: "punainen" //väri) elementistä, jonka päällä kohdistin on viety kohdistin ) , valinnat) var make = function () ( // tässä tämä muuttuja sisältää erillisen // DOM-elementin, johon // liitännäisen tehosteet on käytettävä $(); this ) .css ("background-color" , options.defColor ) .mouseenter ( function () ( $(this ) .css ( "background-color" , options.hoverColor ) .trigger ( "responsiveBlock.stateChange" ) ; / /-tapahtumakutsu ) .mouseleave (funktio ( ) ( $(this) .css ("background-color" , options.defColor ) .trigger ("responsiveBlock.stateChange" ) ; //-tapahtumakutsu ) ) ; .each (make) ) (jQuery) ; // nyt on mahdollista sitoa stateChange-tapahtumakäsittelijät sivuelementteihin: $("div" ) .on ("responsiveBlock.stateChange" , käsittelijä) ;

10 vuotta sitten, kun jQuery oli vasta lapsenkengissään, selainekosysteemi oli hyvin monipuolinen, ja jokainen tuolloin olemassa oleva tuote kamppaili DOM-elementtien hallinnan monimutkaisuuden kanssa. Kunnianhimoinen tehtävä, jonka asetamme itsellemme jQuery-kehittäjät, kehitystä tapahtui universaali lähestymistapa ratkaista nämä ongelmat ja luoda API, joka toimisi yhtä hyvin kaikissa tilanteissa.

Sikäli kuin he pystyivät arvioimaan, mutta 10 vuoden olemassaolon jälkeen jQuery on edelleen yksi suosituimmista JavaScript-kirjastoista.

JavaScript itsessään on nyt täysin kypsä tuote, joka on hyvin dokumentoitu ja jota kaikki nykyaikaiset selaimet tukevat. Nykyaikainen selainyhteisö on myös tiiviimpi ja useimmissa tapauksissa voit olla varma, että jos esimerkiksi sivu näkyy oikein Cromessa, se näyttää samalta Firefoxissa. Lähes kaikki nykyaikaiset selaimet tukevat myös querySelectorsia.

Vaikuttaa siltä, ​​että jQuery-kehityksen historia on menossa kohti auringonlaskua - miksi ylikuormittaa sivuja ja tuhlata ylimääräisiä prosessorijaksoja, jos useimmat ongelmat voidaan ratkaista tavallisilla kielityökaluilla? Toisaalta niin pitkän ajanjakson aikana tietokoneteollisuudelle on kehitetty valtava määrä ratkaisuja, jotka voidaan yksinkertaisesti ottaa ja käyttää, tässä ja nyt.

Mielestäni kehittäjän tulee tehdä tämä valinta kussakin erityistilanteessa, eikä keskittyä muotiin ja trendeihin, vaan terveeseen järkeen ja luomuksensa kehitysnäkymiin.

Tässä katsauksessa olen kerännyt kaikki tietämäni tiedot ilmaisia ​​laajennuksia jQuery, joita kehitetään parhaillaan tai jotka on päivitetty vähintään kerran kuluneen vuoden aikana. Joitakin käytin aktiivisesti ja käytän käytännössä, osan tunnen vain pintapuolisesti, mutta ne tekivät minuun vaikutuksen kyvyillään. Niiden joukossa on poikkeuksellisen erikoisia, suurella mielikuvituksella tehtyjä. Ja vaikka et löydä tapaa käyttää niitä projekteissasi, ne saattavat innostaa sinua luomaan omia, vieläkin uskomattomimpia ratkaisujasi.

multiscroll.jsMielenkiintoinen ratkaisu vierailijan huomion kiinnittämiseen - sivun vieritys tapahtuu kahden paneelin muodossa, joista toinen liukuu ylös ja toinen alas, avautuu seuraava lohko. Toimii myös loistavasti kaikille, jopa erittäin vanhentuneet selaimet.

jquery.email-autocomplete.jsSähköpostiosoitteita on syötettävä hyvin usein, ja huolimatta siitä, että tämä on vain tusina merkkiä, tätä prosessia halutaan usein nopeuttaa. jquery.email-autocomplete.js:llä on oma luettelo suosituista verkkotunnuksista postipalvelut jonka perusteella se tarjoaa osoitteen automaattisen täydennyksen. Käyttäjä voi hyväksyä tämän kehotteen painamalla sarkainnäppäintä tai oikeaa nuolinäppäintä tai jatkaa kirjoittamista manuaalisesti. Laajennus toimii hyvin myös sivuston mobiiliversioissa. Sinun on kuitenkin muokattava laajennusta hieman, jotta se alkaa toimia kotimaisten sähköpostipalvelujen kanssa.

tinyDatePicker Tämä laajennus pakkaa paljon tehoa 5 kilotavuun. Kalenterit, suunnittelijat, tavaroiden ja palveluiden varaus - kaukana täydellinen lista, jossa voit käyttää tinyDatePickeriä. Nopea, kevyt, skaalautuva - se voidaan helposti integroida Bootstrapiin tai mihin tahansa muuhun kehykseen.

ReadRemaining.js Monilla meistä on aina kova pula ajasta. Olen aina kadehtinut ihmisiä, jotka osaavat hoitaa sen oikein. Luultavasti ReadRemaining.js-laajennuksen kirjoittaja on yksi näistä. Kuka muu olisi voinut ajatella tekstin viereen näyttävän tietoja siitä, kuinka kauan sen lukeminen kestää? Ja kun selaat tekstiä, laske tämä aika uudelleen tietyn käyttäjän lukunopeuden perusteella.

Erittäin omaperäinen laajennus, josta uskon vierailijoiden pitävän, jos sinulla on paljon pitkää tekstimateriaalia.

TooltipsterClassic työkaluvihje iso setti toimintoja ja vaihtoehtoja. Itse elementti voi sijaita missä tahansa suhteessa emoelementtiin ja sisältää mitä tahansa elementtiä. Tärkeintä ei ole liioitella sen käytössä, käytä sitä vain siellä, missä se on todella tarpeen.

Addel Samanlaisesta nimestä huolimatta tällä laajennuksella ei ole mitään tekemistä laulaja Adelen kanssa. Sen nimi tulee englannin sanoista ADd-DELete (lisää ja poista) ja kuvastaa sen tarkoitusta - lisätä tai piilottaa dynaamisesti HTML-elementtejä, pääasiassa lomakeelementtejä. Säätimet ovat joustavia ja intuitiivisia.

Chart.jsAktiivisesti kehittyvä laajennus, jonka avulla voit näyttää Erilaisia ​​tyyppejä kaavioita (yhteensä 8 tyyppiä, mukaan lukien sekalaiset). Toimii loistavasti kaikilla nykyaikaiset selaimet ja siinä on sujuva ja söpö animaatio tietojen muuttuessa.

jQuery Flip-Quote Erittäin mielenkiintoinen laajennus, joka tekee kaksi asiaa. Ensinnäkin se pyörittää sivulla olevia lainauslohkoja sillä hetkellä, kun lohko tulee näkyviin (sopii huomion herättämiseen). Toiseksi, kun napsautat tätä lohkoa, tekstin lainaus korostuu, minkä avulla voit löytää sen nopeasti yleisestä materiaalivirrasta. Osoittautuu, että myös lainauksista voidaan tehdä viihdyttäviä!

Algolia PlacesNopea haku, joka täydentää automaattisesti postiosoitteita, kaupunkeja, reittejä ja kaikkea, mikä liittyy paikkoihin ympäri maailmaa integroinnin ansiosta OpenStreetMap-tietokantaan. Erittäin hyödyllinen laajennus verkkokauppoihin.

HideSeek Yksinkertainen mutta toimiva live-hakulaajennus. Pystyy hakemaan eri kriteerien perusteella, suorittamaan tiettyjä toimia kun olet löytänyt tarvittavat tiedot ja paljon muuta.

TimedropperOn valtava määrä käteviä ratkaisuja syöttääksesi tietyn ajankohdan. Timedropper erottuu kuitenkin joukosta yksinkertaisuutensa ja helpot säätimet. Tuntien ja minuuttien vaihtaminen tällä hauskalla pienellä välilehdellä on todella kätevää. Siinä on useita mukautusvaihtoehtoja, kuten: ajan muoto (12 tai 24 tuntia), kellotaulun väri, testi, tausta ja kyky muuttaa tunteja ja minuutteja hiiren rullalla. Muuten, päivämäärän asettamiseen on samanlainen laajennus.

LorySlider kirjoitettu puhtaalla JavaScriptillä. Minimalistinen, mutta tukee eleohjausta, kiinteän elementin asettamista, painikesäätimien näyttämistä ja useiden kuvien samanaikaista näyttöä, mukaan lukien erileveydet.

CurrencyFormatter.js Erittäin yksinkertainen ja pieni skripti, joka näyttää numeroarvot rahamuodossa. Lisää pisteitä, välilyöntejä erillisiin numeroihin ja valuuttasymbolin. Tukee 155 maailman valuuttaa.

Shave.jsJavascript, joka leikkaa siististi tekstin, joka ei mahdu tietyn korkeuden säilöön. Se vie vain 1,5 kt, eikä vaadi kolmannen osapuolen kirjastoja.

jQuery LinechartLibrary kaavioiden piirtämiseen erilaisia ​​tyyppejä ja melko suuri määrä alkutietoja. Kirjoitettu HTML/CSS/JS-kielellä, mutta olemassa on myös Angular.js-pohjainen versio

FreewallIncredible kaunis jQuery laajennus laatoitettujen käyttöliittymien luomiseen eri tyyleissä: Windows Metro, Pinterest, tavallinen litteä tai hierarkkinen, vedettäviä ja dynaamisesti lisättyjä elementtejä. Toimii loistavasti mm mobiiliselaimet, ja työpöydällä, mukaan lukien IE8. Todella monipuolinen työkalu!

rowGrid.js Pieni laajennus, joka järjestää kuvat tai muut elementit tasaisille samankorkeuksisille riveille säätämällä niiden kokoa ja väliä siten, että jokainen rivi sopii täydellisesti ikkunan leveyteen. Totta, kaikkien esineiden on oltava samankorkuisia.

SlidebarsSlidebars lisää verkkosivuston sivulle valikon tai sivupalkin, joka tulee näkyviin tai piiloutuu liukuvalla liikkeellä, kun napsautat ohjauspainiketta kohdistimella. Tämän laajennuksen versio 2 on kirjoitettu kokonaan uudelleen ja se voi nyt sisältää rajattoman määrän erilaisia ​​elementtejä. Siinä on täysi sovellusliittymä, mahdollisuus yhdistää omat takaisinsoittotoiminnot ja tilata tapahtumia.

pagePiling.js on hyvin samanlainen kuin artikkelissa käsitelty tämä arvostelu multiscroll.js-laajennus, mutta sivua ei ole jaettu kahteen paneeliin, vaan se on siirretty kokonaan. Voit muuttaa siirtymän suuntaa ja nopeutta. Hyvä valinta yksisivuiselle sivustolle, joka näyttää yhtä hyvältä mobiililaitteet ja isoilla näytöillä.

AnimitionAnimitionin päätavoite on toteuttaa suuri ja monipuolinen joukko erilaisia ​​transitiivisia tehosteita yhdessä laajennuksessa. Näitä ovat häivytys ja kehitys, pyöritys, heijastus, zoomaus jne. (yhteensä 58 kpl).

ZooMove En pidä kuvien dynaamisesta zoomauksesta leijuessa – tämä tehoste on mielestäni liian ärsyttävä. Mutta jos todella haluat käyttää sitä, on parempi käyttää ZooMovea tähän tarkoitukseen. Mikään muu liitännäinen ei tarjoa näin sujuvaa ja sujuvaa skaalaus- ja vieritystä.

Rippleria Kevyt laajennus, joka luo aaltoefektin (samanlainen kuin aaltoilu veden pinnalla) mihin tahansa DOM-elementtiin: painike, DIV-elementti, kuva. Erittäin helppo asentaa ja hallita.

FlickityFast, reagoiva ja eleohjattu liukusäädin. Ulkoisesti - melko tavallinen, mutta uskomattoman huolellisesti kirjoitetulla ja jäsennellyllä dokumentaatiolla. Täydellinen ja hyvin harkittu API.

Unslider Erittäin pieni ja yksinkertainen liukusäädin, jossa on useita parametreja, joiden avulla voit monipuolistaa sen toimintaa: eri liikesuunnat (vaaka- ja pystysuora), syklinen (loputon) vieritys, automaattinen toisto.

Lightcase.js Erinomainen lightbox CSS3-animaatiolla. Toimii DIV:ien, kuvien, tekstin, flash-objektien, videon ja iframen kanssa. Se ei vielä tue jQuery 3:a, mutta kehittäjät lupaavat korjata tämän tulevissa julkaisuissa.

PhotoSwipeUpea kuvagalleria, jossa ohjataan sekä näppäimistöä työpöytäselaimissa että eleitä mobiililaitteella. On mahdollista asettaa viive kuvien lataamiseen, kunnes itse sivu on latautunut kokonaan. Ja kaikki tämä hauska on vain 14 kilotavua.

StripStrip on valolaatikko, joka vie osan sivusta jättäen itse sivun paitsi osittain näkyväksi, myös käytettävissä vuorovaikutusta varten. Lisäksi se voi toimia samanaikaisesti liukusäätimenä. Lisäksi se tukee kuvien ohella myös videosisältöä Youtubesta ja Vimeosta.

Turntable.js Uskomattoman vaikuttava tapa esitellä tuotetta, varsinkin jos se on fyysinen esine. Itse asiassa laajennus on hyvin yksinkertainen ja näyttää vain joukon kuvia. Kuitenkin, koska prosessia voidaan ohjata hiiren rullalla tai näytöllä olevilla eleillä, mikäli sarja edustaa kuvia yhdestä kohteesta, jotka on otettu eri näkökulmista, katsojalla on täydellinen illuusio sen pyörimisestä.

Vide.jsEhkä helpoin tapa lisätä taustavideo verkkosivuston sivulle on käyttää Vide.js-laajennusta. Se toimii kaikissa nykyaikaisissa selaimissa IE9+:sta alkaen. iOS- ja Android-laitteissa, jotka eivät aina toista taustavideota, näytetään pysäytyskehys.

TrianglifyJos et halua ladata sivua taustavideo, ja staattinen kuva näyttää banaalilta, kokeile kolmiomaisuutta! Nämä ovat ainutlaatuisia geometrisia kolmiomaisia ​​kuvioita, jotka lisäävät persoonallisuutta suunnitteluusi. Laajennuksella voit muuttaa väriä, solukokoa ja hajontaa. Voit jopa kirjoittaa oman algoritmin toteutuksen ja käyttää sitä Trianglifyssa.

LazeeMenuJos verkkosivustollasi on suuri hierarkkinen valikko, jonka haluat pitää yksinkertaisena ja selkeänä, LazeeMenu on epäilemättä hyödyllinen sinulle. Se muuntaa sisäkkäiset järjestämättömät luettelot käteväksi avattavaksi valikoksi.

Web-ticker Juokseva rivi, samanlainen kuin ne, joita usein voi nähdä television ruudulta uutistiedotteissa - viimeisimmät tapahtumat, pörssikurssit, sää... Koskaan ei tiedä mitä sinne voi laittaa! Joten jos pidät tästä tavasta esittää tietoa, ota Web-ticker huomioon.

InputmaskUser kokemus toiminnassa. Muistatko ne ajat, jolloin jouduit syöttämään tiedot uudelleen lomakkeelle virheen vuoksi. Lisäksi virhe havaittiin vasta palvelimen vastauksen jälkeen. Unohda! Inputmask ei vain ohjaa ja näyttää visuaalisesti syötettyjen tietojen oikeellisuutta, se myös estää virheellisten tietojen syöttämisen. Kokeile esimerkiksi kirjoittaa päivämääräkenttään 13. kuukausi. Maskit voivat olla hyvin erilaisia ​​- päivämäärät, puhelinnumerot, sähköpostit ja jopa säännölliset lausekkeet.

Lisäosat projekteihin integroimiseksi. Muistiinpano sisältää monia gallerioita, liukusäätimiä, valikkoja ja muita laajennuksia.

1. Yksinkertainen jQuery liukusäädin "Twirlie"

Kompakti, siisti liukusäädin.

2. jQuery-salkku zoomauksella

Mielenkiintoinen toteutus portfoliosta, joka on luotu yhdistämällä kaksi jQuery-laajennusta: Cloud Zoom ja Fancybox. Kun siirrät hiiren pikkukuvan päälle, näkyviin tulee suurennettu kopio kohdistimen alla olevasta alueesta. Pikkukuvaa napsauttamalla avautuu Fancybox-galleria, jossa voit tarkastella useita täysikokoisia kuvia Tämä projekti portfoliossa.

3. Sivustoopas jQueryllä

Tämän avulla mielenkiintoinen plugin Voit esitellä kävijälle sivustosi päätoiminnot, jos hän vierailee sivustolla ensimmäistä kertaa. Kun sivu latautuu, oikeaan yläkulmaan ilmestyy lohko, joka pyytää sinua tutustumaan sivustoon. Jos vierailija vierailee sivustollasi ensimmäistä kertaa, hän voi tutustua pääominaisuuksiin lyhyen oppaan avulla. Tämä tummentaa sivua ja tarvittavat lohkot on merkitty jokaisessa vaiheessa. Jos vierailija on jo käynyt sivustollasi aiemmin, hän voi yksinkertaisesti sulkea ikkunan, joka tarjoaa esittelyn sivustolla.

4. Minigalleria jQuerylla

Kuva suurenee, kun siirrät hiiren osoittimen sen päälle.

5. Söpö jQuery-liukusäädin"Esityssykli"

jQuery-liukusäädin, jossa on kuvan latausilmaisin. Edellyttäen automaattinen muutos dioja.

6. Hämmästyttävä jQuery-liukusäädin volumetrisellä taustatehosteella "Parallax Slider"

Kuvan liukusäädin jQueryn avulla. Tämän liukusäätimen kohokohta on taustan liike, joka koostuu useista kerroksista, joista jokainen vierii eri nopeudella. Tuloksena on tilavuusvaikutelman jäljitelmä. Se näyttää erittäin kauniilta, voit nähdä itse. Vaikutus näkyy tasaisemmin selaimissa, kuten Opera, Google Chrome,IE.

7. Muuta taustan ja tekstin väriä jQuerylla

Väri muuttuu, kun viet hiiren sen päälle. Voit muuttaa värin satunnaisesti.

8. Tyylikäs valolaatikko galleria "ppGallery"

9. jQuery-diaesitys

Skaalautuva diaesitys jQuerylla. Voit määrittää itsellesi parhaiten sopivat diaesityksen koot.

10. Ostoskori jQueryllä ja PHP:llä

Alkuperäinen ratkaisu ostoskorin myyntiin verkkokaupassa.

11. Minigalleria jQuery "Touch-Gallery"

12. Lähtevä jQuery-valikko kuvien kanssa

Jotta valikko tulee näkyviin, sinun on napsautettava oikealla olevaa nuolta yläkulma näyttö. Voit piilottaa sivulla olevan valikon napsauttamalla samaa nuolta.

13. jQuery-laajennus "MobilyBlocks" radiaalisen valikon näyttämiseen

14. jQuery-laajennus "MobilyNotes"

jQuery-laajennus kuvien tai muun sisällön epätavalliseen näyttämiseen.

15. jQuery-liukusäädin

Kuvien välillä liikkuminen onnistuu "Eteenpäin"- ja "Takaisin"-painikkeilla ja käyttämällä linkkejä kuvan numeroon, kun taas kuvien vaihtaminen tapahtuu erilaisilla animoiduilla tehosteilla. Linkkien tyyli voidaan määrittää tiedostossa.

16. jQuery-kuvan liukusäädin, "slideJS"-laajennus

Tyylikäs jQuery-liukusäädin voi varmasti koristella projektiasi.

17. jQuery-sisällön liukusäädin, "slideJS"-laajennus

jQuery-sisällön liukusäädin: yksi vaihtoehdoista "slideJS"-laajennuksen käyttämiseen.

Lähes 10 vuotta on kulunut jQueryn ilmestymisestä ja nykyään se on suosituin JavaScript-kirjasto. Kymmenen vuotta sitten pääsy Internetiin oli mahdollista rajoitettu määrä selaimet, jotka on suunniteltu minimoimaan mahdollisuus manipuloida HTML DOM:ia (Document Object Model). JQuery on osoittautunut hengenpelastajaksi monille kehittäjille, jotka pyrkivät näyttämään verkkosivuston sisällön samalla tavalla kaikissa olemassa olevissa selaimissa. jQueryn kehittäneet harrastajat pyrkivät yhdistämään selainten ominaisuudet ja siten luomaan kaikille yhteisen käyttöliittymän, joka toimisi selaimen tyypistä ja versiosta riippumatta. Kehittäjien tärkein ansio on se, että he loivat uusia API-rajapintoja, jotka olivat parempia kuin "alkuperäiset" selaimet ja ottivat käyttöön toimintoja, joita ei tuettu ohjelmiston käyttöliittymä selain. Jotkut kehittäjät eivät kuitenkaan ole taipuvaisia ​​yliarvioimaan jQueryn roolia selainongelmien ratkaisemisessa ja väittävät, että kirjastosta on tullut niin suosittu querySelectors-sovelluksen ansiosta. Kuten tavallista, totuus on jossain puolivälissä.

Nykyään selainekosysteemi ei ole niin monimutkainen kuin 10 vuotta sitten. Vaikka jotkin selaimet eivät ehkä pysty toteuttamaan kaikkea, mitä HTML5 API tarjoaa, kehittäjillä on nykyään paljon vähemmän ongelmia selainten välisen yhteensopivuuden ja erilaisten ominaisuuksien käyttöönoton kanssa. Jos jokin toimii hyvin Chromessa tänään, se toimii todennäköisesti myös Firefoxissa tai Edgessä. JavaScriptin ydinelementit sekä querySelectors ovat hyvin dokumentoituja, ja kaikki selaintoimittajat tukevat niitä. Siksi ensi silmäyksellä saattaa vaikuttaa siltä, ​​että jQueryn ratkaisemia ongelmia ei enää ole. Puhdas JavaScript on aina nopeampi kuin kirjastoa hyödyntävä ratkaisu, joten herää kysymys: onko nykyään tarpeen käyttää jo hieman vanhentunutta tekniikkaa? CPU-sykli on hyödyke, mutta aika ei. Onko 30 KB:n säästäminen perusteltua, jos joudut kirjoittamaan koodin ja testaamaan sitä, jos siihen on jo valmis ratkaisu?

Kaikki on valinnasta kiinni. Jotkut pyrkivät täydelliseen koodiin, toiset käyttävät muiden kehittäjien luomia koodinpätkiä. jQuery-kirjastossa on tuhansia hyvin toimivia, hyvin dokumentoituja laajennuksia, jotka parantavat tuottavuutta ja mahdollistavat rohkeiden ideoiden toteuttamisen. Monet näistä laajennuksista ovat myös täysin ilmaisia. Esittelemme huomiollesi 10 parasta jQuery-laajennusta, joita niiden tekijät tukevat aktiivisesti ja päivittävät säännöllisesti.

Palomuuri on erittäin mielenkiintoinen moniselaimen jQuery-laajennus, joka on suunniteltu toimimaan ruudukkopohjaisten asettelujen kanssa. Sen avulla voit luoda vaikuttavia animaatiotehosteita käyttämällä SCC3:n ominaisuuksia ja se toimii hyvin takaisinsoittotapahtumien kanssa. Jos sinun on luotava joustavia asetteluja, joissa on paljon kuvia, kuten Pinterest, Firewall on paras ratkaisu luomista varten dynaamiset ruudukot. Freewall toimii lähes kaikissa nykyaikaisissa selaimissa ja jopa muinaisessa IE8:ssa, mikä tekee tästä laajennuksesta todella universaalin työkalun.

Multiscroll.js-laajennuksen avulla voit lisätä verkkosivustosi suunnitteluelementtien monisuuntaisen vierityksen. Tämä helpottaa usean vierityksen luomista sivustoille, joissa on kaksi saraketta tai paneelia. Laajennuksen päätarkoitus on kiinnittää käyttäjän huomio pääsisältöön vaarantamatta käyttökokemusta. Laajennus toimii erinomaisesti sekä moderneissa että vanhoissa selaimissa ja tietysti mobiiliympäristössä.

RowGrid.js on yksinkertainen laajennus, jonka avulla voit järjestää verkkosivustolla olevia kuvia tasaisille riveille, aivan kuten hakukoneessa. Google kuvat. Se on muodikas, kaunis eikä liian häiritsevä. RowGrid.js järjestää kuvat riveiksi pääelementin koon perusteella: se valitsee kuvat niin, että ne näyttävät harmonisilta määritetyissä rajoissa, kun taas jotkin elementit skaalataan. Tämän laajennuksen kanssa työskennellessäsi on kuitenkin muistettava, että kaikkien kuvien on oltava samankorkuisia, muuten laajennus ei toimi ja kaunis satunnainen ruudukko ei toimi.

Slidebars jQuery -laajennus, kuten nimestä voi päätellä, auttaa sinua lisäämään sivustollesi liukuvia elementtejä, kuten sivupaneelit tai piilotetut valikot. Plugin toinen versio on kirjoitettu kokonaan uudelleen ottaen huomioon kaikki aiemmat puutteet ja antaa sinun käyttää rajoittamatonta määrää päänäytön ulkopuolella olevia elementtejä.

PagePilings.js-laajennuksen avulla voit toteuttaa erittäin mielenkiintoisia vieritystehosteita, jotka näyttävät erityisen vaikuttavilta yksittäisillä sivuilla. Käyttäjä tarkastelee sisältöä, joka liikkuu ylös ja alas, ja skripti katkaisee sisällön ylimmät kerrokset ja toteuttaa siten liukusäätimen. Laajennuksen käyttö auttaa luomaan unohtumattoman käyttökokemuksen. Vierityssuuntaa ja nopeutta voidaan helposti säätää - tässä suhteessa laajennuksella on erittäin suuret ominaisuudet. PagePilings.js on täysin reagoiva, toimii erinomaisesti kaikilla näytöillä ja näkyy hyvin useimmissa nykyaikaisissa selaimissa.

jQuery-laajennuksen päätarkoitus on luoda sujuvat siirtymät sivujen välillä, mikä parantaa käyttökokemusta. Tämän pienen laajennuksen avulla voit luoda sileitä ja kauniita CSS-animaatioita, jotka seuraavat sivumuutoksia. Pluginilla on yli 60 erilaista tehostetta, mukaan lukien yleiset tehosteet kuten häivytys, häivytys, kehystason kiertäminen, käännös, zoomaus ja paljon muuta.

Tehoste, kuten kuvan zoomaus hiiren osoitinta liikutettaessa, on joillekin ärsyttävää, mutta joskus se on erittäin tarpeellista. Joten jos sinun on käytettävä tällaista animaatiota projektissasi, sinun tulee kiinnittää huomiota ZooMovie jQuery -laajennukseen. Laajennus ei vain skaalaa kuvaa, vaan antaa sinun myös tarkastella kuvan yksityiskohtia liikuttamalla kohdistinta. Kaikki toimii hyvin yksinkertaisesti ja ennustettavasti.

Rippleria perustuu konseptiin Materiaalisuunnittelu laajennus, joka luo aaltovaikutelman, kun hiiri napsauttaa elementtiä. Tehostetta voidaan soveltaa erilaisiin objekteihin, kuten painikkeisiin, kuvakkeisiin tai kuviin. Laajennusta on helppo muokata ja se toimii hyvin kaikissa nykyaikaisissa selaimissa.

Flickity-laajennuksella on erittäin yksityiskohtainen dokumentaatio. Kaikki toiminnot on kuvattu selkeästi ja loogisesti jäsennelty. Tämä on yksi hienostuneimmista jQuery-laajennuksista karuselliefektin toteuttamiseen. Flickity tekee responsiivisten liukusäätimien luomisesta helppoa kevyttä työtä, koska laajennuksessa on kaikki työkalut minkä tahansa idean toteuttamiseen. Plugin on shareware, mutta käyttääksesi sitä kaupallisissa projekteissa sinun on ostettava maksullinen versio.

Jos sinun on asennettava liukusäädin nopeasti ja helposti verkkosivustollesi, voit käyttää jQuery-laajennusta Unslyder. Plugin on pieni mutta melko joustava, joten kehittäjä voi muuttaa skriptejä käyttämällä erilaisia ​​parametreja ja vaihtoehtoja, menetelmiä ja takaisinsoittotapahtumia.