Forums : Xul, Xbl, JS...

Pour mes menuitem de Context Menu et de Menu classique, je fais du class="menuitem-iconic bt-del" mais apparemment ça ne marche pas pour des menulist ?

Désolé, je sèche.

Salut Christophe,

as-tu fait le test suivant ?

class="menuitem-iconic ods"

puis:

.ods {
  list-style-image:url(css/ods.gif);
}

Chez moi ça marche alors...

Fabrice

Merci Fabrice pour la réponse. Je sais que je ne suis pas particulièrement fin, mais je pense avoir fait exactement ce que tu dis et que dalle !!! J'ai rajouté une menulist dans la fenêtre accessible ici (dernière ligne de la page)

Bah oui, c'est ce que j'avais dit au post précédent non ? XD

Raphael a écrit:

Bah oui, c'est ce que j'avais dit au post
précédent non ? XD

Oui, mais Fabrice dit que cela fonctionne chez lui ... donc peut-être il y a t'il un espoir ??

Hello

J'ai été confronté au même problème, les menulist n'affiche pas les icônes.

Après une recherche sur le net infructeuse (enfin presque, j'ai juste trouvé un xbl qui permettait de rajouter l'icône), je me suis dis que cela devait provenir d'un xbl de firefox.... et donc qu'en le récupérant et le modifiant ca devrai pouvoir fonctionné....

Là encore, choux blanc.... le xbl générant le menuitem.menuitem-iconic est indépendant de menulist....

Mais j'ai persisté dans le code de firefox.... et j'ai fini par trouver. En fait, dans le xbl de menuitem-iconic, l'icône du menuitem à comme class : menu-iconic-left.... et dans le fichier chrome://global/skin/menu.css il y a une ligne qui est :

  .menulist-menupopup > menuitem > .menu-iconic-left,
  menulist > menupopup > menuitem > .menu-iconic-left,
  .menulist-menupopup > menu > .menu-iconic-left,
  menulist > menupopup > menu > .menu-iconic-left {
     display: none;
  }

En clair, dans le cas d'un menulist, l'icône (portant la class menu-iconic-left)n'est pas affiché (display: none;).... Je me suis donc atteler à remplacer cette valeur Css en ajoutant dans le css de mon fichier :

  menulist > menupopup > menuitem > .menu-iconic-left {
     display: block;
  }

Et magique, les icônes apparaissent dans les menuitem de mon menulist....

La solution pour ressoudre ce problème est donc de rajouter dans le css de ta page : (Oups.... petite correction pour éviter d'afficher toujours l'icone ;-) )

• pour l'icone sur le menuitem-iconic

  menulist > menupopup > menuitem.menuitem-iconic > .menu-iconic-left {
     display: block;
  }

• pour l'icone sur le menu-iconic

  menulist > menupopup > menu.menu-iconic > .menu-iconic-left {
     display: block;
  }

Petite question qui me taraude: pourquoi les icônes sont-elles caché (en plus en dur dans le code) dans les menulist sous Firefox ?

Heu ... chapeau bas Môssieur !!!! Simple bémol, il faut utiliser en parallèle de la classe l'attribut src pour avoir l'icone associée sur la ligne sélectionnée ... tu n'aurais pas encore une manip de la mort pour cela ?

Christophe Charron a écrit:

Heu ... chapeau bas Môssieur !!!!

Tout le monde pouvait le trouver.... Enfin fallait juste être assez tarré pour aller dans les chrome de firefox :-p

Christophe Charron a écrit:

Simple bémol, il faut utiliser en parallèle de la
classe l'attribut src pour avoir l'icone associée
sur la ligne sélectionnée ... tu n'aurais pas
encore une manip de la mort pour cela ?

C'est ce que je viens de voir.... je suis justement entrain d'essayer de touver d'où ca provient.... Je sais pas si je vais trouver une manip de la mort mais en tout cas je vais essayer :-D

Christophe Charron a écrit:

tu n'aurais pas encore une manip de la mort pour cela ?

Après avoir cherché un moment, je n'ai pas trouvé de manip de la mort....

Je vois donc seulement deux solutions possibles

La solution que tu as cité : l'attribut src en parallèle de la classe
=> Avantage: simple à mettre en place et léger
=> Défaut: ca ne reprend que l'icone, donc si il y a d'autre traitement css de mise en forme, ils sont perdu

La deuxième solution est de mettre en place un petit JS qui, à chaque sélection d'un menuitem, remplace la class de la menulist par celle du menuitem. Et dans le css définir la même chose pour le menuitem et pour le menulist.
=> Avantage: le style peut-être complétement appliqué
=> Défaut: pas très simple à mettre en place (pas très compliqué non plus)

Si je suis pas clair, je peux mettre un exemple pour la 2ème solution ;-)

cokinou a écrit:

Christophe Charron a écrit:
> tu n'aurais pas encore une manip de la mort pour
cela ?

Après avoir cherché un moment, je n'ai pas trouvé
de manip de la mort....

Snif ...

Je vois donc seulement deux solutions possibles

La solution que tu as cité : l'attribut src en
parallèle de la classe

=> Avantage: simple à mettre en place et
léger

=> Défaut: ca ne reprend que l'icone, donc
si il y a d'autre traitement css de mise en forme,
ils sont perdu

et si comme moi, les classes, dans la vraie vie sont du style extraction d'un icone à partir d'une grande image

treechildren::-moz-tree-image(aj14),.aj14 { list-style-image: url(_graal_icones.png); -moz-image-region: rect( 172px  265px  189px  248px); }

je ne peux pas utiliser le src

La deuxième solution est de mettre en place un
petit JS qui, à chaque sélection d'un menuitem,
remplace la class de la menulist par celle du
menuitem. Et dans le css définir la même chose
pour le menuitem et pour le menulist.

=> Avantage: le style peut-être
complétement appliqué

=> Défaut: pas très simple à mettre en
place (pas très compliqué non plus)

Si je suis pas clair, je peux mettre un exemple
pour la 2ème solution ;-)

Ben je vais essayer tout seul, tu as quand même déjà sacrément déblayé le terrain

Christophe Charron a écrit:

et si comme moi, les classes, dans la vraie vie
sont du style extraction d'un icone à partir d'une
grande image
treechildren::-moz-tree-image(aj14),.aj14 {
list-style-image: url(_graal_icones.png);
-moz-image-region: rect( 172px 265px 189px
248px); }
je ne peux pas utiliser le src

Arf, exactement la même chose de mon côté, c'est pour ca que j'ai cherché cette deuxième solution

Je suis étonné quand même qu'il n'y ai pas d'autre moyen....

Donc voila le ch'ti bout de code :

function pf_init() {
document.getElementById('ml_unite_stock_bis').addEventListener("ValueChange",   pf_change_menu, false);
pf_change_menu();
}
function pf_change_menu() {
  var vo_list = document.getElementById("ml_unite_stock_bis");
  var vo_item = vo_list.selectedItem;
  vo_list.setAttribute("class",vo_item.getAttribute("class"));
}

On peut voir le résultat http://test03.christophe-charron.org/public/xul/2006_12_23/2007_03_02_menuitems_00.xul sur la menulist précédée de "Fonctionne du feu de dieu!!!"

Merci infiniment

Si on veux vraiment chipoter : comment faire pour que l'icone excel reste à doite sur la ligne sélectionnée ?

Christophe Charron a écrit:

Si on veux vraiment chipoter : comment faire pour
que l'icone excel reste à doite sur la ligne
sélectionnée ?

Je pense qu'il suffit que tu ajoute dans ta fonction un :

  vo_list.setAttribute("dir",vo_item.getAttribute("dir"));

pour récupérer le dir="reverse"

même pas vrai !