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.
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 :
L'exemple ci-dessous permet d'appliquer une bordure rouge aux éléments sélectionnés et peut-être utilisé comme suit :
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 :
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.
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.
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" :
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 :