Est-il possible de modifier dynamiquement la classe CSS d'un bouton?

Question

Je travaille sur une application web basée Wicket. Dans l'application il y a des boutons qui ne chaque utilisateur est autorisé à utiliser. Ces boutons sont en fait des liens simples, par exemple.

<a wicket:id="publishButton" title="Publish" class="rightPanel_publish"><wicket:message key="publish"/></a>

avec une classe CSS (à partir d'un fichier CSS externe) qui définit leur aspect visuel, par exemple.

a.rightPanel_publish {
    display: block;
    width: 90px;
    height: 27px;
    background: url( ../imgs/right_panel_icon03.gif ) left top repeat-y;
    text-decoration: none;
    color: black;
    padding: 12px 0px 0px 35px;
}

Lorsque l'utilisateur est pas autorisé à utiliser le bouton, le lien est désactivé (en Java) et le CSS, pour une raison quelconque, n'est plus utilisé.

Ma question est la suivante: est-il un moyen d'identifier que le lien est désactivé lors de l'exécution et changer la classe CSS? Je préfère éviter d'utiliser javascript (réussi à garder l'ensemble du projet libre JS-à ce jour ...), et préfèrent quelque chose qui fonctionnerait avec tous les navigateurs.

Merci un groupe,

Yuval = 8 -)

Answer 1

Malheureusement, je ne sais pas d'un moyen de changer la page d'un bouton sans JS. CSS, Java et tout fonctionne autre pendant le chargement, après que la page a chargé la seule façon d'interagir avec la page est via JS.

Mais voici la JS qui fonctionne dans un navigateur (IE 6+, Safari, Opera, FF, etc),

  if(document.getElementById('foo'))
  {
    document.getElementById('foo').className='bar';
  }

Answer 2

Il n'y a aucun moyen de le faire sans script de quelque sorte. Le "D" dans "DHTML" signifie "Javascript": P

---

Edit: En fait, puisque vous dites que quelque chose est désactiver le lien / bouton, que quelque chose pourrait / devrait également ajouter une classe « handicapée » (la seule façon x-navigateur pour obtenir CSS à remarquer) au même élément. commutation d'exécution ne vient pas en elle -. si une chose est en train de changer l'état qu'il doit le faire à fond

Answer 3

liens Wicket remplacent la balise avec un lorsque désactivé.

Gardez cela à l'esprit lors de l'application CSS, par exemple:.

.rightPanel_publish_button {
  display: block;
  width: 90px;
  height: 27px;
  background: url( ../imgs/right_panel_icon03.gif ) left top repeat-y;
  text-decoration: none;
  color: black;
  padding: 12px 0px 0px 35px;
}

Answer 4

Vous pouvez également modifier l'apparence du bouton (à savoir la classe css) avec un AttributeModifier, en fonction de l'état d'authentification de l'utilisateur:

myButton.add(new AttributeModifier("class", new AbstractReadOnlyModel<String>() {

        private static final long serialVersionUID= 1L;

        @Override
        public String getObject () {
            if (!isAuthorized()) {
                return "rightPanel_unauthorized";
            }
            return "rightPanel_publishbutton";
        }
    }));

Dans votre CSS, vous définissez ensuite le style ".rightPanel_unauthorized" comme vous en avez besoin.

Answer 5

J'utilise le *.setVisible(Boolean boolean)

Il est disponible pour les modèles WebMarkupContainer à Wicket. Le setVisible () peut être affecté ailleurs dans la classe en fonction des rôles des utilisateurs. de sorte que vous pourriez avoir à chercher ...