JSB

Créez ou proposez une amélioration

Si vous avez une idée, faites-nous en part grâce au formulaire ci-dessous. Si l'idée est retenue, nous développerons un plug-in ou intégrerons directement la fonctionnalité dans le code principal.

Il est possible de joindre un fichier ou une archive de fichiers à votre demande. Par exemple un code JavaScript que nous pourrons alors convertir en plug-in JSB.

Vous pouvez également développer vous-même le plug-in et l'ajouter en pièce jointe dans le formulaire. Pour plus d'informations à ce sujet, lisez notre tutoriel Créer un plug-in JSB.

Créer un plug-in JSB

Pour coder un plug-in, vous pouvez utiliser du JavaScript et/ou des syntaxes JSB.

Pour créer une nouvelle fonction utilisable sur une sélection, suivez l'exemple suivant :

$0.bordure_rouge=function ()
{
    $(this).css('border:2px solid red');
};

L'exemple ci-dessous permet d'appliquer une bordure rouge aux éléments sélectionnés et peut-être utilisé comme suit :

$('img').bordure_rouge();

Notez que par défaut JSB va automatiquement créer deux alias de cette fonction : bordurerouge et bordureRouge.
Pour que les alias soient correctement créés, il faut donc utiliser des minuscules et séparer les mots par des tirets bas.

Nous vous suggérons la structure suivante pour développer vos plugins :

<html>
  <body>
    <div>Du contenu HTML éventuel</div>
    <script type="text/javascript" src="jsb.js"></script>
    <script type="text/javascript" src="plugin.js"></script>
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>

Ici les balises de scripts sont chargées après le contenu de la page, ce qui vous permet de faire des sélections et manipuler le document directement dans vos scripts.

Le fichier jsb.js doit contenir le script JSB de base, plugin.js contiendra le code de votre plug-in (par exemple $0.bordure_rouge=function...) et test.js vous permettra de tester les modifications apportées par votre plug-in, il contiendra par exemple : $('div').bordure_rouge();

L'avantage de cette méthode est qu'une fois fonctionnel, votre plug-in sera prêt à être déposé sans aucun traitement supplémentaire.

Ci-dessous, nous avons publié le code complet et commenté du plug-in Color afin que vous puissiez en étudier le fonctionnement.

Les plug-in d'animation

La fonction $.assign_animate() permet de compléter le système d'animation avec une fonction. $.assign_animate() prend 2 paramètres. Le premier est le nom de la fonction plug-in (pour $O.abc=function... le nom est "abc"), le second est la liste des propriétés pour lesquelles la fonction doit être utilisée à la place du système d'animation normal.

La fonction doit contenir 4 paramètres, le premier recevra la propriété à animer. Le second un ratio (de 0 à 1) de la durée écoulée de l'animation sur la durée totale. Le troisième contient la valeur de départ de la propriété. Le dernier contient la valeur d'arrivée de la propriété.

Cas spécial : si ratio vaut -1, la fonction doit retourner la valeur actuelle de la propriété et n'effectuer aucune action d'animation.

$0.ma_fonction=function (property, ratio, start, end)
{
        if(ratio<0)
                return this.css(property);
        var valeur = start*(1-ratio) + end*ratio;
        this.css(property, valeur);
};
$.assign_animate('ma_fonction','propriete1,proriete2');

Ici ma_fonction est assignée aux propriétés : propriete1 et proriete2. Dans une animation lancée par exemple par $('div').a('propriete1:200') la fonction ci-dessus sera utilisée à la place de l'animation normale. Avec le code ci-dessus, le résultat sera le même puisque la fonction utilise le ratio de façon linéaire pour interpoler la valeur intermédiaire en fonction de l'initiale et de la finale.

Dans un cas plus concret, voici comme procéder pour obtenir une animation de déplacer de type "case-à-case" :

$0.case_a_case=function (property, ratio, start, end)
{
        if(ratio<0)
                return this.css(property);
        var valeur = start*(1-ratio) + end*ratio;
        valeur = (Math.round( valeur/20 ) * 20) + 'px';
        this.css(property, valeur);
};
$.assign_animate('case_a_case','top,left'); // case_a_case sera utilisée pour les propriétés top et left, on pourrait par exemple rajouter margin-top et margin-left

Dans l'exemple ci-dessous $.option.duration.normal vaut 10 secondes pour permettre de bien voir l'effet du code :

 

Note importante : la ou les propriétés fournies dans $.assign_animate() et utilisées ensuite avec a/animate ne doivent pas nécessairement être valide. Dans l'exemple précédent, on aurait pu assigner case_a_case aux propriétés "xtop" et "xleft" par exemple et dans la fonction case_a_case déterminer que si property vaut xtop, qu'on modifie top et s'il vaut xleft, qu'on modifie left. Ce qui permet alors d'animer un bloc normalement en faisant par exemple $('#bloc').a('left:120,top:230') et de l'animer en case-à-case en faisant $('#bloc').a('xleft:120,xtop:230')

Il est également possible d'exécuter l'animation normale en plus de la fonction assignée. Pour cela, il suffit que la fonction retourne la constante true.

Enfin, une assignation pour une fonction donnée annule l'assignation précédente sur cette même fonction :

$.assign_animate('case_a_case','top,left'); // Assignation de top et left
$.assign_animate('case_a_case','width'); // Désassignation de top et left et assignation de width
$.assign_animate('autre_fonction','height'); // Assignation de height sur autre_fonction
// La fonction étant différente, width n'est pas désassignée de case_a_case
$.assign_animate('case_a_case'); // Désassignation de toutes les propriété associées à case_a_case
© Bastien Miclo | www.selfbuild.fr