Het jQuery UI-effectraamwerk is gemoduleerd, net als het widgetraamwerk, zodat u kunt kiezen welke delen van het pakket u wilt gebruiken en de codevereisten wilt verminderen. Jij kan maak een aangepaste download voor jezelf, waarbij rekening wordt gehouden met afhankelijkheden tussen de modules.
Voordat je kijkt naar hoe je een nieuw effect kunt creëren, moet je je bewust zijn van de andere functionaliteit die al wordt aangeboden door het jQuery UI-effectraamwerk, zodat je het kunt gebruiken bij het ontwikkelen van je eigen effecten.
Onderliggend aan de individuele jQuery UI-effectmodules is een kern van veelgebruikte functionaliteit. Deze vaardigheden zijn hier geïmplementeerd, zodat je ze niet opnieuw hoeft uit te vinden en onmiddellijk kunt toepassen op je eigen effecten. Naast kleuranimatie vindt u animaties van de kenmerken van de ene klasse naar de andere en verschillende functies op een laag niveau die nuttig kunnen zijn bij het ontwikkelen van nieuwe effecten.
De Effects Core-module voegt aangepaste animatiesteun toe voor stijleigenschappen die kleurwaarden bevatten: voorgrond- en achtergrondkleuren en rand- en omtrekkleuren. jQuery zelf staat alleen de animatie toe van kenmerken die eenvoudige numerieke waarden zijn, met een optionele eenhedenaanduiding zoals px, em of%. Het weet niet hoe complexe waarden, zoals kleuren, moeten worden geïnterpreteerd, of hoe deze waarden juist moeten worden verhoogd om de gewenste overgang te bereiken, zoals van blauw naar rood via een tussenliggende paarse kleur.
Kleurwaarden bestaan uit drie componenten: de rode, groene en blauwe bijdragen, elk met een waarde tussen 0 en 255. Ze kunnen op verschillende manieren in HTML en CSS worden opgegeven, zoals hier weergegeven:
De rode, groene en blauwe componenten moeten worden gescheiden en afzonderlijk worden geanimeerd van hun beginwaarden tot hun uiteindelijke waarden, voordat ze worden gecombineerd tot de nieuwe samengestelde kleur voor de tussenstappen. jQuery UI voegt animatiestappen toe voor elk beïnvloed attribuut om de huidige en gewenste kleuren correct te decoderen en om de waarde te veranderen terwijl de animatie wordt uitgevoerd. Naast de kleurindelingen die in de vorige lijst zijn beschreven, kan de animatie-oproep ook een reeks van drie numerieke waarden accepteren (elk tussen 0 en 255) om de kleur op te geven. Nadat deze functies zijn gedefinieerd, kunt u kleuren op dezelfde manier animeren als voor andere numerieke kenmerken:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});jQuery UI bevat een uitgebreide lijst met benoemde kleuren die het begrijpt, van de basis rood en groen tot de meer esoterische darkorchid en darksalmon. Er is zelfs een transparante kleur.
Met standaard jQuery kun je klassen aan geselecteerde elementen toevoegen, verwijderen of schakelen. jQuery UI gaat nog een stapje verder door je toe te staan de transitie tussen de voor- en na-staten te animeren. Dit gebeurt door alle attribuutwaarden die kunnen worden geanimeerd (numerieke waarden en kleuren) te extraheren uit de begin- en eindconfiguraties en vervolgens een standaard animatieverzoek in te roepen met al deze eigenschappen als te wijzigen eigenschappen. Deze nieuwe animatie wordt geactiveerd door een duur op te geven bij het aanroepen van de functies addClass, removeClass of toggleClass:
$('#myDiv').addClass('highlight', 1000);jQuery UI voegt ook een nieuwe functie toe, switchClass, die een klasse verwijdert en een klasse toevoegt, met de optionele overgang tussen de twee toestanden (wanneer een duur wordt geboden):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);Om de verschillende effecten van jQuery UI beter te ondersteunen, biedt de module Effecten Core verschillende functies die nuttig zijn voor deze effecten, en misschien voor de uwe. Om te illustreren hoe verschillende van deze functies worden gebruikt, toont de volgende lijst de relevante delen van het dia-effect.
$.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();}});};U kunt de functie setMode gebruiken om een modus om te zetten naar de juiste show of waarde verbergen op basis van de huidige zichtbaarheid van het element. Als de opgegeven modus wordt weergegeven of verborgen, behoudt deze die waarde en wordt in dit geval standaard weergegeven als deze helemaal niet wordt weergegeven.
Voordat u de animatie voor het effect start, kunt u de opslagfunctie gebruiken om de oorspronkelijke waarden van verschillende attributen (van de namen in rekwisieten) op het element te onthouden, zodat ze kunnen worden hersteld als u klaar bent. De waarden worden opgeslagen tegen het element met behulp van de jQuery-gegevensfunctie.
Om de beweging van een element voor een effect te vergemakkelijken, kunt u een container rond dat element wikkelen met de createWrapper-functie om te gebruiken als referentiepunt voor de beweging. Positiegegevens worden gekopieerd van het opgegeven element naar de verpakking, zodat deze direct boven op het oorspronkelijke element wordt weergegeven. Het element wordt vervolgens linksboven in de nieuwe container geplaatst, zodat het totale effect door de gebruiker niet wordt opgemerkt. De functie retourneert een verwijzing naar de wrapper.
Wijzigingen in de instellingen links / rechts / boven / onder voor het oorspronkelijke element zijn nu relatief ten opzichte van de oorspronkelijke positie, zonder de omliggende elementen te beïnvloeden. Nadat u bepaalde attribuutwaarden eerder had opgeslagen, zou u de terugzetfunctie gebruiken bij het voltooien van de animatie om ze terug te brengen naar hun oorspronkelijke instellingen. Tegelijkertijd moet u elke wrapper verwijderen die u eerder hebt gemaakt met de functie remove-Wrapper. Deze functie retourneert een verwijzing naar de wrapper als deze is verwijderd, of naar het element zelf als er geen wrapper was.
Er zijn enkele andere functies die worden geboden door de jQuery UI Effects Core-module die van pas kan komen:
getBaseline (oorsprong, origineel) Deze functie normaliseert een oorsprongspecificatie (een array met twee elementen met verticale en horizontale posities) in fractionele waarden (0,0 tot 1,0) bij een oorspronkelijke grootte (een object met kenmerken voor hoogte en breedte). Het converteert benoemde posities (boven, links, midden, enzovoort) naar de waarden 0,0, 0,5 of 1,0 en converteert numerieke waarden naar de verhouding van de relevante dimensie. Het geretourneerde object heeft de kenmerken x en y om de fractionele waarden in de overeenkomstige richtingen te houden. Bijvoorbeeld,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (element, lijst, factor, waarde) Gebruik deze functie om een schaalfactor toe te passen op meerdere kenmerkwaarden tegelijk. Voor elke attribuutnaam in de lijst haalt u de huidige waarde voor het element op en werkt u dit bij door het met factor te vermenigvuldigen. Stel het resultaat in het waardeobject onder de naam van het attribuut in en retourneer dat object uit de functie. Als u bijvoorbeeld bepaalde waarden met de helft wilt verlagen, doet u het volgende:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (key) Gebruik deze functie om een benoemd CSS-kenmerk (sleutel) te scheiden in de hoeveelheid en eenheden (em, pt, px of%), geretourneerd als een array van twee waarden. Als de eenheden niet een van deze bekende typen zijn, wordt een lege array geretourneerd. Bijvoorbeeld,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']De functies in dit gedeelte worden gebruikt door veel van de effecten die door de gebruikersinterface van jQuery worden geboden. Deze effecten worden in de volgende sectie besproken.
Talrijke effecten worden geboden door de gebruikersinterface van jQuery. De meeste van deze zijn ontworpen om te verbeteren hoe een element verschijnt of verdwijnt (zoals blind en laten vallen), terwijl andere dienen om uw aandacht te vestigen op een element (zoals highlight en schudden):
Deze effecten kunnen worden gebruikt in combinatie met de uitgebreide jQuery UI show-, hide- en toggle-functies door de naam van het gewenste effect als eerste parameter op te geven. U kunt ook aanvullende opties opgeven die het gedrag van het effect, de duur van de animatie en een callback-functie wijzigen die bij voltooiing wordt geactiveerd.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);Inbegrepen in de jQuery UI-modules zijn enkele eenvoudige hulpprogramma-functies, gedrag op laag niveau (zoals slepen en neerzetten), hoogwaardige componenten of widgets (zoals Tabs en Datepicker) en tal van visuele effecten. U kunt deze effecten gebruiken om de presentatie van elementen op uw webpagina te verbeteren of om een bepaald element onder de aandacht van de gebruiker te brengen. Om u te helpen bij het maken van uw eigen effecten, is er een kern van veelgebruikte functies beschikbaar.
Heb je het jQuery UI-effectraamwerk gebruikt? Hoe verhoudt het zich tot native CSS-tweens? Laat ons je mening weten in de reacties.