3

J'écris un plugin jQuery et je voudrais que mon code tire parti des fonctions jQuery UI show(effect, [options], [speed], [callback]) et hide(effect, [options], [speed], [callback]), qui vous permettent d'afficher et de masquer les éléments avec une belle animation.Comment puis-je vérifier si une fonction d'interface utilisateur jQuery particulière est disponible et utiliser une fonction différente si ce n'est pas le cas?

Cependant, je voudrais aussi que mon plugin si gracieusement l'interface utilisateur se dégrade jQuery est pas disponible, la commutation de retour à utiliser les fonctionnalités de base, non-animant show() et hide() fonctions présentes dans l'API standard jQuery.

Je vais devoir tester spécifiquement les fonctions show et hide, car même si jQuery UI est disponible il pourrait s'agir d'une version personnalisée, sans les composants Effects inclus.

Au début, je pensais que je pourrais peut-être faire quelque chose comme:

if(typeof myelement.show('blind', 'slow') == 'undefined') 
{ 
    myelement.show('blind', 'slow'); 
} 
else 
{ 
    myelement.show(); 
} 

Mais bien sûr, cela ne fonctionne pas, car même si l'interface utilisateur n'est pas présent, show() est encore une fonction, il a juste une signature différente, donc typeof renvoie object dans les deux cas. Alors, quelle est la meilleure façon de vérifier si jQuery UI est disponible pour mon plugin? Toute aide est très appréciée!

Répondre

2

Vous pouvez vérifier un effet comme celui-ci:

function hasEffect(effect) { 
    return $.effects && $.effects[effect]; 
} 

Ensuite, vous pouvez l'utiliser partout:

if(hasEffect('blind')) { 
    myelement.show('blind', 'slow'); 
} else { 
    myElement.show(); 
} 
//or, you can shorten it further: 
//$.fn.show.apply(myelement, hasEffect('blind') ? ['blind','slow'] : []);​ 

You can view a demo here, cocher/décocher jQuery UI sur la gauche et cliquez sur "Exécuter" up top pour le voir en action. Cela fonctionne parce que les effets sont déclarés comme ceci:

$.effects.blind = function(o) { ...effecty stuff... }; 

Par exemple, vous pouvez voir "blind" here. La raison pour laquelle je vérifie à la fois les codes $.effects et $.effects.effect dans le code ci-dessus est que vous ne pouvez télécharger que some of the effects when you download jQuery UI, donc cela explique cette possibilité.

+0

Super, merci-exactement ce que je cherchais. Je suis surpris que cette fonction ne fasse pas partie de jQuery; Cela doit être une exigence assez commune pour les auteurs de plugins. –

1

La fonction de Nick a parfaitement fonctionné; par souci de cohérence, je fini par l'ajouter en fonction utilitaire jQuery à partir de mon code plugin:

$.extend({ 
    hasEffect: function (effect) { 
     return $.effects && $.effects[effect]; 
    } 
}); 

Alors maintenant, je peux appeler $.hasEffect(effectname) où je veux vérifier la présence d'un effet particulier jQuery UI.