Discussion :

[Zineb1987_UNI]

Salut tous le monde
pour annimer mes proprietes Css j'ai utilisée le dojo.animateProperty
voila le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
valeur = '"'+champ.attr("value")+'"';
            		dojo.animateProperty({
            		  node:elementSelectionne,
            		  properties: {
            			proprieteCss: valeur
            		  }
            		}).play();

elementSelectionne : c'est l'element dont j'applique la propriete Css.
proprieteCss : c'est le nom de la propriete (ex : color, backgroundColor..).
valeur : c'est la valeur de la propriete (ex : "#d12f2f"..).
mais le style ne s'applique pas ???
et Merci

[vermine]

Bonjour,

Est-ce nécessaire de faire ceci ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
valeur = '"'+champ.attr("value")+'"';

Essayez plutôt ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
valeur = champ.attr("value");

Ensuite, essayez si le animateProperty fonctionne de manière ciblée avant de faire de manière générique:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
dojo.animateProperty(
{
     node:"monElement",
     properties: {
            	            width:400 //en guise de test
            	        }
}
).play();

[Zineb1987_UNI]

normalement quand je donne des proprietes statiques il marche bien, mais les variables qui marche pas

[vermine]

Que vous donniez le valeur (mais sans les " ajoutés) et le elementSelectionne, je pense que ça va. Par contre, le proprieteCss il est possible qu'il n'en veuille pas.

Faites-un test:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var valeur = "red";
var elementSelectionne = "monElement";
 
dojo.animateProperty(
{
     node:elementSelectionne ,
     properties: {
            	            color:valeur //color de façon figée, pas une variable
            	        }
}
).play();

[Zineb1987_UNI]

oui avec le nom de propriete statique il marche, alors c'est quoi la solution ??

[vermine]

Il faut poser la question sur le forum Javascript tout court. Pas l'exemple Dojo, car ils vont vous renvoyer ici. Mais cet exemple ci pourrait être similaire. On déclare une structure et on précise un des noms dynamiquement:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
var nomUn = "marque";
 
var voiture = {
nomUn:"Peugeot",
couleur:"gris metalisé"
age:2003
};
 
alert(voiture.marque);

Ca ne marche pas, bien entendu. Il faudrait trouver un moyen de préciser "nomUn" dans la structure. C'est la question qu'il faut poser.


Edit: J'ai ouvert la question sur le forum Javascript ici.

[Zineb1987_UNI]

Merci bien pour tes réponses.

[vermine]

De rien. Mais mes connaissances sont très limitées. Et mes espoirs de plus en plus maigres. Emmanuel a sans doute une réponse.

[vermine]

Je ne pense pas qu'on puisse adapter l'exemple, mais essayez tjs...
Il faut tatonner en attendant que qqun donne une autre réponse. Voici des exemples de tatonnements, faites-en un, puis l'autre mais pas les deux en même temps. J'ai mis les deux test dans le même code pour simplifier mon message. Supprimer une des deux lignes, puis essayez avec l'autre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var monAttribut = "color";
var valeur = "red";
var elementSelectionne = "monElement";
 
dojo.animateProperty(
{
     node:elementSelectionne ,
     properties: {}
 
     properties[monAttribut] = valeur; //test 1
}
properties[monAttribut] = valeur; //test 2
).play();

[Zineb1987_UNI]

Merci une autre fois,
dans les 2 cas il me donne cette erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
Erreur*: missing ) after argument list
Fichier Source*: http://localhost/MyWorkspace/....../ruban.js
Ligne*: 1351, Colonne*: 1
Code Source*:
 alert(properties.monAttribut);

[vermine]

Je n'y crois pas du tout mais qui ne tente rien n'a rien:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
dojo.animateProperty(
{
     node:elementSelectionne ,
     properties: {}
})
 
dojo.animateProperty[properties] = {monAttribut:valeur};
 
dojo.animateProperty.play();

[emmanuel.remy]

Salut,

Désolé pour la réponse tardive

+1 avec Vermine : la notation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
{width : 120 }

n'a rien à voir avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var w = "with";
...
{ w : 120 }

C'est ici la marque d'un objet dont les attributs sont les éléments à gauche du ":" et la valeur (évaluée) est située à droite.

Pour une animation, on a cette notation (enfin pas tout à fait mais ce n'est pas grave):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
dojo.animateProperty({
    node:elementSelectionne,
    properties: {
       width: "400px";
       height: "300px";
    }
}).play();

Donc si on veut passer les éléments de style par valeur, on peut utiliser le fait qu'un objet JS est en fait un tableau (pas exactement mais cela fera l'affaire ici) et faire ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
var monStyle1="width";
var monStyle2="height";

var prop ={};
prop[monStyle1]=XXXX;
prop[monStyle2]=XXXX;

dojo.animateProperty({
    node:elementSelectionne,
    properties: prop
}).play();

Ou encore plus élégant, générer une chaine de caractères au format Json et fabriquer l'objet associé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var prop = '{ "width": "400px", "height":"300px" }';

dojo.animateProperty({
    node:elementSelectionne,
    properties: dojo.fromJson(prop)
}).play();

ERE