JQuery UI -vaikutusten kehys on modulaarinen, kuten widget-kehys, jonka avulla voit valita, mitkä paketin osat haluat käyttää ja vähentää koodivaatimuksia. Sinä pystyt luoda itsellesi mukautettu lataus, joka ottaa huomioon moduulien väliset riippuvuudet.
Ennen kuin tarkastelet uuden vaikutuksen luomista, sinun tulee olla tietoinen jQuery UI -tekstikehyksen jo tarjoamista muista toiminnoista, jotta voit käyttää sitä omien vaikutusten kehittämisessä.
Yksittäisten jQuery-käyttöliittymämoduulien taustalla on yleisesti käytettyjen toimintojen ydin. Nämä kyvyt toteutetaan täällä niin, että sinun ei tarvitse muuttaa niitä uudelleen ja käyttää niitä välittömästi omiin vaikutuksiinne. Yhdessä luokkaan kuuluvien ominaisuuksien animaation kanssa sekä animaation animaation lisäksi löytyy useita matalan tason toimintoja, jotka voivat olla hyödyllisiä uusien vaikutusten kehittämisessä.
Effects Core -moduuli lisää mukautettuja animaatiotukea tyylimääritteisiin, jotka sisältävät väritarvoja: etualan ja taustavärit sekä reunus- ja ääriviivat. jQuery mahdollistaa vain attribuuttien animaation, jotka ovat yksinkertaisia numeerisia arvoja, ja valinnaisten yksiköiden tunniste, kuten px, em tai%. Se ei osaa tulkita monimutkaisempia arvoja, kuten värejä, tai miten lisätä näitä arvoja oikein halutun siirtymän saavuttamiseksi, esimerkiksi sinisestä punaiseen välivärin punaisen värin kautta.
Väriarvot koostuvat kolmesta osasta: punaisesta, vihreästä ja sinisestä, joiden arvo on välillä 0 ja 255. Ne voidaan määrittää HTML- ja CSS-muodossa useilla eri tavoilla, jotka luetellaan tässä:
Punainen, vihreä ja sininen komponentit on erotettava toisistaan ja ne on animoitava yksilöllisesti alkuperäisistä arvoistaan lopullisiksi, ennen kuin ne yhdistetään välivaiheiden uusiin komposiittiväriin. jQuery-käyttöliittymä lisää animaatiotapahtumia kullekin vaikuttavalle määritteelle oikein dekoodata nykyiset ja halutut värit ja muuttaa arvoa animaation käynnissä. Edellisessä luettelossa kuvattujen väriformaattien lisäksi animaattinen puhelu voi myös hyväksyä kolme numeerista arvoa (kukin välillä 0 - 255) värin määrittämiseksi. Kun nämä toiminnot on määritetty, voit animoida värejä samalla tavalla kuin muillakin numeerisilla ominaisuuksilla:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});jQuery-käyttöliittymä sisältää laajennetun luettelon nimettyjä värejä, jotka se ymmärtää, peruspunaisesta ja vihreästä esoteeriseen darkorchidiin ja darksalmoniin. On jopa läpinäkyvä väri.
Standardi jQueryn avulla voit lisätä, poistaa tai vaihtaa luokkia tietyissä elementeissä. jQuery UI menestyy paremmin antamalla animoida siirtymän ennen ja jälkeen tilojen välillä. Se tekee tämän poimimalla kaikki attribuuttiarvot, jotka voidaan animoitua (numeeriset arvot ja värit) alkumis- ja päättävistä kokoonpanoista, ja sitten vedota normaaliin animoidun puhelun kaikkiin näihin muuttuviin ominaisuuksiin. Tämä uusi animaatio käynnistyy määrittämällä kesto, kun kutsuu addClass-, removeClass- tai changeclass-toimintoja:
$('#myDiv').addClass('highlight', 1000);jQuery UI lisää myös uuden toiminnon, switchClass, joka poistaa luokan ja lisää luokan, kun valinnaiset siirtymät kahden valtion välillä (kun kestoa annetaan):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);JQuery-käyttöliittymän erilaisten vaikutusten tukemiseksi Effects Core -moduuli tarjoaa useita toimintoja, jotka ovat käyttökelpoisia näihin vaikutuksiin ja ehkä omalle. Seuraavassa luettelossa on esitetty diaefektin tärkeät osat, jotta voidaan havainnollistaa kuinka monta näistä toiminnoista on käytetty.
$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};Voit käyttää setMode-funktiota muuttamaan vaihtamismuoto sopivaan näyttämään tai piilottamaan arvoa elementin nykyisen näkyvyyden perusteella. Jos toimitettu tila näkyy tai piilotetaan, se säilyttää arvon, ja tässä tapauksessa oletusarvoisesti näytetään, jos sitä ei anneta lainkaan.
Ennen animaation käynnistämistä, voit halutessasi käyttää tallennustoimintoa muistiin useiden attribuuttien alkuperäiset arvot (elementtien nimistä), jotta ne voidaan palauttaa valmiiksi. Arvot tallennetaan elementtiin, joka käyttää jQuery data -toimintoa.
Voit helpottaa elementin liikkumista vaikutukselle, joten voit kierrätä säiliötä kyseisen elementin ympärille luomalla luovaa funktiota liikkeen viitearvoksi. Paikkatiedot kopioidaan määritetystä elementistä kääreelle niin, että se näkyy suoraan alkuperäisen elementin huipulta. Elementti sijoitetaan sen jälkeen uuteen säiliöön sen vasemmassa yläkulmassa, jolloin käyttäjä ei havaitse kokonaisvaikutusta. Toiminto palauttaa viittauksen kääreeseen.
Alkuperäisen elementin vasemmalle / oikealle / ylä- / alareunalle tehdyt muutokset ovat nyt suhteessa alkuperäiseen asentoonsa vaikuttamatta ympäröivään elementtiin. Kun olet tallentanut tiettyjä attribuuttiarvoja aikaisemmin, käytä palautustoimintoa animaation loppuun palauttaessasi alkuperäiset asetukset. Samaan aikaan sinun on poistettava kaikki sellaiset kääreet, jotka olet luonut aiemmin Poista-kääri -toiminnolla. Tämä toiminto palauttaa viittauksen kääreeseen, jos se on poistettu, tai itse elementtiin, jos kääriä ei ollut.
JQuery UI Effects Core -moduulissa on joitain muita toimintoja, jotka voivat olla käyttökelpoisia:
getBaseline (originaali, alkuperäinen) Tämä funktio normalisoi alkuperäisen määrityksen (kaksielementtinen ryhmä vertikaalisia ja vaakasuuntaisia positioita) murtoarvoiksi ( 0.0 - 1.0) alkuperäisen koon mukaan (objekti, jonka korkeus ja leveysominaisuudet). Se muuntaa nimetyt paikat (ylhäältä, vasemmalta, keskustasta jne.) Arvoihin 0,0, 0,5 tai 1,0 ja muuntaa numeeriset arvot asianomaisen ulottuvuuden osuuteen. Palautetulla esityksellä on attribuutit x ja y, jotka pitävät murtoarvot vastaavissa suunnissa. Esimerkiksi,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (elementti, luettelo, tekijä, arvo) Käytä skaalauskerrointa useisiin attribuuttiarvoja kerralla käyttämällä tätä toimintoa. Jokaisen luettelossa olevan attribuutin nimen osalta hakee sen nykyinen arvo elementille ja päivitä se kertomalla se kertoimella. Aseta tulos arvotyyppeihin määritteen nimen alla ja palauta kyseinen objekti toiminnosta. Jos haluat esimerkiksi vähentää tiettyjä arvoja puoleen, voit tehdä tämän seuraavasti:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (avain) Voit erottaa nimetty CSS-attribuutti (avain) sen määrään ja yksiköihin (em, pt, px tai%). Jos yksiköt eivät ole yksi näistä tunnetuista tyypistä, palautetaan tyhjä ryhmä. Esimerkiksi,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']Tässä osiossa esitettyjä toimintoja käytetään useissa jQuery UI: n tarjoamissa tehosteissa. Näitä vaikutuksia tarkastellaan seuraavassa jaksossa.
JQuery UI tarjoaa lukuisia tehosteita. Suurin osa niistä on suunniteltu parantamaan elementin näyttämistä tai katoamista (kuten sokea ja pudota), kun taas toiset auttavat kiinnittämään huomiota elementtiin (kuten kohokohta ja ravistelu):
Näitä tehosteita voidaan käyttää yhdessä parannetun jQuery UI -näytön kanssa, piilottaa ja vaihtaa toimintoja antamalla halutun vaikutuksen nimen ensimmäiseksi parametriksi. Voit myös tarjota lisäasetuksia, jotka muuttavat vaikutuksen käyttäytymistä, animaation kestoa ja takaisinkytkentätoimintoa, joka käynnistyy loppuun.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);JQuery UI -moduulit sisältävät joitain perusapuuntatoimintoja, matalan tason käyttäytymisiä (kuten vedä ja pudota), korkeatasoisia komponentteja tai widgetejä (kuten Tabs and Datepicker) ja lukuisia visuaalisia tehosteita. Voit käyttää näitä tehosteita parantaaksesi elementtien esitystä verkkosivustollasi tai tuomaan tietyn elementin käyttäjän huomion piiriin. Auttaa sinua luomaan omia vaikutuksiasi, ja käytettävissä on yleisesti käytettyjä toimintoja.
Oletko käyttänyt jQuery UI -vaikutusten kehystä? Kuinka se on verrattavissa alkuperäisiin CSS-tweeniin? Kerro meille mielipiteesi kommentteihin.