OpenLayers.Control.Button mit displayClass

Communities Deutschland (Germany)
1

Hallo Entwickler,

ist vielleicht eine einfache Frage, aber ich hab dazu nichts gefunden, weshalb ich mal anfang:

Ich habe einen Button mit eigener Funktion erzeugt:


new OpenLayers.Control.Button({ 
              trigger: function() {  
                  if(this.box == null) {
                      this.box = new OpenLayers.Handler.Box(control, {"done": notice}); 
                  }
                  if(!activated) {
                      activated = this.box.activate();
                  } else {
                      this.box.deactivate();
                      activated = false;
                  }
              },
               displayClass: "MyTest"
         })

Aber wenn ich auf den Button (in der toolbar) klicke, wird er aktiviert, und führt den code aus, aber er ändert sein Aussehen nicht von aktiv zu inaktiv.
Beim laden zeigt er allerding völlig korrekt das inaktiv symbol an.

Wenn ich Diese Methode nutze um ein Drawfeature anzupassen, funktioniert das tadellos:


new OpenLayers.Control.DrawFeature(layer,
        OpenLayers.Handler.Path,
        {'displayClass': 'MyTest'}),

Meine Frage: Funktioniert das vllt. einfach nicht mit Buttons, oder mache ich irgendwas falsch?

Wenn der wechsel von inaktiv zu aktiv bei buttons garnicht geht, wie funktioniert soetwas dann? Gibt es soetwas wie einen toggle button, oder kann ich irgendwie in dem code oben (DrawFeature path) eine eigene Funktion definieren, die NACH dem zeichnen aufgerufen wird?

Vielen Dank schonmal für eure Hilfe!

Grüße

Michael

2

Hi,

das Ändern musst von Hand machen, glaube ich…

Erst legst Du zwei Stile für aktivierte und deaktivierte Knöpfe an, rot und grün z.B.:

.KnopfItemActive         {background: red;   width:100%;height:100%}
.KnopfItemInactive       {background: green; width:100%;height:100%}

Diesen Stil (ohne das dranhängende ItemActive/ItemInactive) gibts Du dann dem Button als displayClass an und in der trigger-Funktion schaltest Du mit activate() und deactivate() zwischen den roten und den grünen Knöpfen hin- und her.

          var button=new OpenLayers.Control.Button({
                trigger: function() {  
                           if(this.active){alert("Hast geklickt, jetzt werd ich gruen!");this.deactivate();}  
                           else           {alert("Hast geklickt, jetzt werd ich rot!");  this.activate();}    
                         },displayClass: "Knopf"
               })

Das da wäre ein Beispiel, die “Buttons” sind die oben rechts rumhängenden grünen oder roten Feld.

Grüße, Max