Rámec efektů rozhraní jQuery UI je modularizován, stejně jako modul widget, který umožňuje vybrat si, které části balíku chcete použít, a snížit požadavky na kód. Můžeš vytvořit si vlastní sami, který bere v úvahu závislosti mezi moduly.
Než se podíváte na to, jak vytvořit nový efekt, měli byste si být vědom ostatních funkcí, které již nabízí jQuery UI efektový rámec, abyste jej mohli použít při vývoji vlastních efektů.
Základem jednotlivých jQuery UI efektových modulů je jádro běžně používaných funkcí. Tyto schopnosti jsou zde implementovány, takže je nemusíte znovu vynalezit a můžete je okamžitě aplikovat na své vlastní efekty. Spolu s barevnou animací naleznete animaci z atributů jedné třídy do jiné a několik funkcí na nízké úrovni, které mohou být užitečné při vývoji nových efektů.
Modul Efekty Core přidává vlastní podporu animací pro atributy stylů, které obsahují hodnoty barvy: barvy popředí a pozadí a barvy okrajů a obrysů. jQuery sám umožňuje pouze animaci atributů, které jsou jednoduché číselné hodnoty, s volitelným označením jednotek, jako jsou px, em nebo%. Neví, jak interpretovat složitější hodnoty, jako jsou barvy, nebo jak tyto hodnoty správně zvýšit, aby se dosáhlo požadovaného přechodu, např. Z modré na červenou přes střední purpurovou barvu.
Hodnoty barev se skládají ze tří složek: příspěvky červené, zelené a modré, každá s hodnotou mezi 0 a 255. Mohou být zadány v HTML a CSS různými způsoby, jak je uvedeno zde:
Červené, zelené a modré komponenty musí být odděleny a individuálně animovány od jejich počátečních hodnot až po jejich konečné, předtím, než budou sloučeny do nové kompozitní barvy pro mezistupně. jQuery UI přidává animační kroky pro každý ovlivněný atribut, aby správně dekódoval aktuální a požadované barvy a změnil hodnotu při spuštění animace. Kromě barevných formátů popsaných v předchozím seznamu může animovaný hovor také přijmout pole tří číselných hodnot (každý mezi 0 a 255) pro zadání barvy. Jakmile jsou tyto funkce definovány, můžete animovat barvy stejně jako u jiných číselných atributů:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});jQuery UI obsahuje rozšířený seznam pojmenovaných barev, které rozumí, od základní červené a zelené až po esoterické tmavé a tmavé slunce. Je dokonce průhledná barva.
Standard jQuery umožňuje přidávat, odstraňovat nebo přepínat třídy na vybraných prvcích. jQuery UI jde lépe tím, že umožňuje animovat přechod mezi stavem před a po. To dělá tím, že extrahuje všechny hodnoty atributů, které mohou být animovány (číselné hodnoty a barvy) od počáteční a koncové konfigurace a poté vyvolá standardní animovaný hovor se všemi těmito vlastnostmi, které se mají změnit. Tato nová animace je spuštěna zadáním trvání při volání funkcí addClass, removeClass nebo toggleClass:
$('#myDiv').addClass('highlight', 1000);jQuery UI také přidává novou funkci switchClass, která odebere třídu a přidá třídu s volitelným přechodem mezi těmito dvěma stavy (při poskytnutí trvání):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);Chcete-li lépe podporovat různé efekty jQuery UI, modul Effects Core nabízí několik funkcí, které jsou k těmto účinkům užitečné a snad i pro vaše vlastní. Chcete-li ukázat, jak se používají některé z těchto funkcí, zobrazí se následující seznam příslušných částí snímacího efektu.
$.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();}});};Funkci setMode můžete použít k převodu režimu přepnutí na příslušnou ukázku nebo skrytí hodnoty na základě aktuální viditelnosti prvku. Pokud je zobrazený nebo skrytý zobrazený režim, zůstane tato hodnota zachována a v tomto případě se výchozí hodnota zobrazí, pokud vůbec není daná.
Než začnete animaci efektu, můžete použít funkci uložit, abyste si pamatovali původní hodnoty několika atributů (z názvů v rekvizitách) na elementu, takže je lze po dokončení obnovit. Hodnoty jsou uloženy proti prvku pomocí funkce dat jQuery.
Chcete-li usnadnit pohyb prvku pro efekt, můžete zabalit kontejner kolem tohoto prvku pomocí funkce createWrapper, která se použije jako referenční bod pro pohyb. Polohovací informace se kopíruje z určeného prvku na obal tak, aby se objevil přímo na původním prvku. Element je pak umístěn v novém kontejneru v levém horním rohu, takže celkový efekt je uživatel nepozorovatelný. Funkce vrátí odkaz na obal.
Jakékoli změny v levém / pravém / horním / dolním nastavení pro původní prvek budou nyní relativní vzhledem k původní poloze, aniž by to ovlivnilo okolní prvky. Po uložení určitých hodnot atributů dříve použijte funkci obnovení na konci animace, abyste je vrátili zpět do původního nastavení. Současně byste měli odstranit veškerý obal, který jste dříve vytvořili pomocí funkce odebrání-Obnovit. Tato funkce vrátí odkaz na obal, pokud byl odstraněn, nebo na samotný prvek, pokud nebyl žádný obal.
JQuery UI Effects Core obsahuje několik dalších funkcí, které mohou být užitečné:
getBaseline (původ, originál) Tato funkce normalizuje specifikaci původu ( dvouzákladové pole vertikální a vodorovné polohy) do zlomkových hodnot (0.0 až 1.0) daných původní velikosti (objekt s atributy výšky a šířky). Převede pojmenované pozice (horní, levý, středový, atd.) Na hodnoty 0.0, 0.5 nebo 1.0 a převede číselné hodnoty na poměr příslušné dimenze. Vrácený objekt má atributy x a y, aby držely zlomkové hodnoty v odpovídajících směrech. Například,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (prvek, seznam, faktor, hodnota) Chcete-li použít faktor měřítka pro více hodnot atributů najednou, použijte tuto funkci. Pro každý název atributu v seznamu získáte jeho aktuální hodnotu pro element a aktualizujte ho vynásobením faktoru. Nastavte výsledek do objektu hodnot pod názvem atributu a vraťte tento objekt z funkce. Chcete-li například snížit některé hodnoty o polovinu, můžete to provést takto:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (klíč) Chcete-li oddělit pojmenovaný atribut (klíč) CSS do jeho množství a jednotek (em, pt, px nebo%) vrácených jako pole dvou hodnot, použijte tuto funkci. Pokud jednotky nejsou jedním z těchto známých typů, vrátí se prázdné pole. Například,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']Funkce uvedené v této části jsou využívány mnoha efekty poskytovanými jQuery UI. Tyto účinky jsou přezkoumány v následující části.
Četné efekty poskytuje jQuery UI. Většina z nich je navržena tak, aby vylepšovala, jak se objevuje nebo zmizí prvek (například nevidomé a kapky), zatímco jiné slouží k tomu, aby upoutaly vaši pozornost na prvek (například zvýraznění a chvění):
Tyto efekty mohou být použity ve spojení s rozšířenými funkcemi zobrazování, skrytí a přepínání jQuery UI tím, že se jako první parametr uvede název požadovaného efektu. Můžete také dodat další možnosti, které změní chování efektu, dobu trvání animace a funkci zpětného volání, která se spustí po dokončení.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);Do modulů jQuery UI jsou zahrnuty některé základní funkce, nízkoúrovňové chování (např. Drag and drop), komponenty nebo widgety na vysoké úrovni (například Tabs a Datepicker) a mnoho vizuálních efektů. Pomocí těchto efektů můžete zvýšit prezentaci prvků na vaší webové stránce nebo přinést určitý prvek pozornosti uživatele. Chcete-li pomoci při vytváření vlastních efektů, je k dispozici jádro běžně používaných funkcí.
Používali jste prostředí jQuery UI? Jak se to porovná s nativními CSS tweeny? Dejte nám vědět své myšlenky v komentářích.