Rammerne for jQuery UI-effekter er modulære, ligesom widget-rammerne, så du kan vælge, hvilke dele af pakken du vil bruge og reducere kodekravene. Du kan opret en brugerdefineret download til dig selv som tager hensyn til afhængigheder mellem modulerne.
Før du kigger på, hvordan du opretter en ny effekt, skal du være opmærksom på den anden funktionalitet, som allerede er udbydet af jQuery UI-effekterne, så du kan bruge den, når du udvikler dine egne effekter.
Underliggende de enkelte jQuery UI-effektmoduler er en kerne af almindeligt anvendt funktionalitet. Disse evner implementeres her, så du ikke behøver at genfinde dem og kan anvende dem straks på dine egne effekter. Sammen med farve animation finder du animation fra attributterne fra en klasse til en anden, og flere lavniveaufunktioner, der kan være nyttige til udvikling af nye effekter.
Effektkernemodulet tilføjer brugerdefineret animationsstøtte til stilattributter, der indeholder farveværdier: forgrunds- og baggrundsfarver og grænser og konturfarver. jQuery selv tillader kun animering af attributter, der er simple numeriske værdier, med en valgfri enhedsindikator som px, em eller%. Det ved ikke, hvordan man tolker mere komplekse værdier, som farver eller hvordan man øger disse værdier korrekt for at opnå den ønskede overgang, f.eks. Fra blå til rød via en mellemlig lilla farve.
Farveværdierne består af tre komponenter: de røde, grønne og blå bidrag, hver med en værdi mellem 0 og 255. De kan angives i HTML og CSS på en række forskellige måder som anført her:
De røde, grønne og blå komponenter skal adskilles og individuelt animeres fra deres oprindelige værdier til deres endelige, før de kombineres i den nye sammensatte farve til de mellemliggende trin. jQuery UI tilføjer animationstrin for hver berørt attribut for korrekt dekoder de nuværende og ønskede farver, og for at ændre værdien som animationen kører. Udover de farveformater, der er beskrevet i den foregående liste, kan det animerede opkald også acceptere en række af tre numeriske værdier (hver mellem 0 og 255) for at angive farven. Når disse funktioner er defineret, kan du animere farver på samme måde som du ville gøre for andre numeriske attributter:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});jQuery UI indeholder en udvidet liste over navngivne farver, som den forstår, fra den grundlæggende røde og grønne til den mere esoteriske darkorchid og darksalmon. Der er endda en gennemsigtig farve.
Standard jQuery giver dig mulighed for at tilføje, fjerne eller veksle klasser på udvalgte elementer. jQuery UI går en bedre ved at tillade dig at animere overgangen mellem før og efter stater. Det gør det ved at udvinde alle de attributværdier, der kan animeres (numeriske værdier og farver) fra start- og slutkonfigurationerne, og derefter påberåbe sig et standard animeret opkald med alle disse som egenskaber, der skal ændres. Denne nye animation udløses ved at angive en varighed, når du ringer til addClass, removeClass eller toggleClass-funktionerne:
$('#myDiv').addClass('highlight', 1000);jQuery UI tilføjer også en ny funktion, switchClass, som fjerner en klasse og tilføjer en klasse med den valgfrie overgang mellem de to stater (når der er en varighed):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);For bedre at understøtte de forskellige effekter af jQuery UI, giver Effects Core-modulet flere funktioner, der er nyttige til disse effekter, og måske til din egen. For at illustrere, hvordan flere af disse funktioner anvendes, viser følgende liste de relevante dele af dias-effekten.
$.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();}});};Du kan bruge setMode-funktionen til at konvertere en tilstand til at skifte til den relevante visning eller skjule værdi baseret på elementets aktuelle synlighed. Hvis den leverede tilstand vises eller gemmes, bevares den værdi, og i dette tilfælde vises standardindstillingerne, hvis de ikke gives overhovedet.
Før du starter animationen for effekten, vil du måske bruge gemmesfunktionen til at huske de oprindelige værdier af flere attributter (fra navnene i rekvisitter) på elementet, så de kan gendannes, når de er færdige. Værdierne gemmes mod elementet ved hjælp af jQuery-datafunktionen.
For at lette bevægelsen af et element for en effekt kan du pakke en beholder omkring det element med createWrapper-funktionen som referencepunkt for bevægelsen. Positionsoplysninger kopieres fra det angivne element til wrappen, så det vises direkte oven på det oprindelige element. Elementet placeres derefter i den nye beholder øverst til venstre, så den samlede effekt er uanmeldelig af brugeren. Funktionen returnerer en henvisning til omslaget.
Ændringer i venstre / højre / øverste / nederste indstillinger for det oprindelige element vil nu være i forhold til dets oprindelige position uden at påvirke de omgivende elementer. Når du har gemt visse attributværdier tidligere, vil du bruge genoprettelsesfunktionen ved afslutningen af animationen for at returnere dem til deres oprindelige indstillinger. Samtidig skal du fjerne enhver indpakning, du tidligere har oprettet, med fjern-Wrapper-funktionen. Denne funktion returnerer en henvisning til omslaget, hvis den blev fjernet, eller til selve elementet, hvis der ikke var nogen omslag.
Der er nogle andre funktioner, der leveres af jQuery UI Effects Core-modulet, som kan være nyttige:
getBaseline (oprindelse, original) Denne funktion normaliserer en oprindelsesspecifikation (et toelement array af lodrette og vandrette positioner) i brøkdele (0,0 til 1,0) givet en originalstørrelse (et objekt med højde og breddeattributter). Den konverterer navngivne positioner (øverste, venstre, midten og så videre) til værdierne 0,0, 0,5 eller 1,0 og konverterer numeriske værdier til andelen af den relevante dimension. Det returnerede objekt har attributter x og y for at holde de brøkdele i de tilsvarende retninger. For eksempel,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (element, liste, faktor, værdi) Brug denne funktion til at anvende en skaleringsfaktor til flere attributværdier på én gang. For hvert attributnavn i listen skal du hente den aktuelle værdi for elementet og opdatere det ved at gange det med faktor. Indstil resultatet i værdiobjektet under navnet på attributten, og returner det objekt fra funktionen. Hvis du f.eks. Reducerer visse værdier med halvdelen, kan du gøre det her:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (key) For at adskille en navngivet CSS-attribut (nøgle) i dens mængde og enheder (em, pt, px eller%), returneres som en række af to værdier, skal du bruge denne funktion. Hvis enhederne ikke er en af disse kendte typer, returneres et tomt array. For eksempel,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']Funktionerne i dette afsnit bruges af mange af de effekter, der leveres af jQuery UI. Disse effekter gennemgås i næste afsnit.
Talrige effekter leveres af jQuery UI. De fleste af disse er designet til at forbedre, hvordan et element vises eller forsvinder (som f.eks. Blind og drop), mens andre tjener til at gøre opmærksom på et element (f.eks. Fremhæv og ryste):
Disse effekter kan bruges sammen med de forbedrede jQuery UI-show, skjul og vekslefunktioner ved at give navnet på den ønskede effekt som den første parameter. Du kan også levere yderligere muligheder, der ændrer virkemådenes opførsel, animationens varighed og en tilbagekaldsfunktion, der udløses ved afslutningen.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);Inkluderet i jQuery UI-modulerne er nogle grundlæggende hjælpefunktioner, lavt niveau adfærd (såsom træk og slip), komponenter på høj niveau eller widgets (f.eks. Faner og Datepicker) og mange visuelle effekter. Du kan bruge disse effekter til at forbedre præsentationen af elementer på din webside eller at bringe et bestemt element til brugerens opmærksomhed. For at hjælpe dig med at skabe dine egne effekter er der en kerne af almindeligt anvendte funktioner.
Har du brugt rammerne for jQuery UI-effekter? Hvordan sammenligner det med native CSS tweens? Lad os vide dine tanker i kommentarerne.