Color-Fading bei Push bzw. Multistatebutton

[holgerm]

Hallo allerseits,

vielleicht hat ja einer von euch eine Idee:

Beim Pushbutton gibt es ja eine Colorfading-Effekt, wenn man ihn anklickt. Er wird nach dem Klick Orange und wechselt die Farbe innerhalb einer Sekunde wieder auf den Ausgangszustand.
Dieses Feature finde ich als Feedback sehr sinnvoll und möchte dieses Verhalten auch dem Multistatebutton beibringen.

Ich habe schon in den CSS-Tiefen gesucht, aber keine Stelle gefunden, welche diesen Effekt hervorruft.

Viele Grüße
Holger

[roman1528]

Hi. Coole Idee. (ich nutze den multistatebutton nicht) was kann der anders/besser als das was ftui (mittlerweile) mitbringt?

Aber ich habe da was gefunden. /lib/fa-multi-button.js bzw. fa-multi-button.min.js

Code Auswählen Erweitern


if (options['mode'] == 'push'){
        this.bind(clickEventType, function(e) {
          touch_pos_y = $(window).scrollTop();
          touch_pos_x = $(window).scrollLeft();
        }).bind(releaseEventType, function(e) {
          if(Math.abs(touch_pos_y-$(window).scrollTop())>3
                  || (Math.abs(touch_pos_x-$(window).scrollLeft())>3)) return;
          setOn();

          if(typeof options['toggleOn'] === 'function'){
              options['toggleOn'].call(this);
          }
          //e.preventDefault();
          setTimeout( function() {
              fadeOff();
              }, 200);
        });
}


Viel Spaß 

Grüße^^

[holgerm]

Hallo,

vielen Dank für die Anregung - werde ich mal am Wochenende nachschauen.

Ich benutze den Multistatebutton zur Steuerung meiner Geräte, welche über einen Harmony-Hub gesteuert werden.
Man kann mit diesem Button in Abhängigkeit z.b. der am Harmony-Hub gewählten Aktivität unterschiedliche Befehle senden, dabei kann das Aussehen des Buttons ebenfalls in Abhängigkeit der Aktivität verändert werden.

Hier die Definition eines meiner Buttons:
<div    data-type="multistatebutton" class="remote_button" data-device="harmony_hub" data-get="currentActivity"
               data-get-on='["TV Entertain","TV Kino","DVD wiedergeben","CD hören","Radio hören","PowerOff"]'
               data-set='["Record","Record","Reject","Reject","",""]'
               data-icons='["fa-circle", "fa-circle", "fa-eject", "fa-eject", "", ""]'
               data-colors='["#882222", "#882222", "#aaaaaa", "#aaaaaa", "#aaaaaa", "#aaaaaa"]'
               data-color="#888888"
               data-background-color="#333333">
</div>

Viele Grüße
Holger

[roman1528]

Verstehe...

kann das mitgelieferte Switch-Widget (mittlerweile) auch.

Code Auswählen Erweitern


data-states='["1","2","3","4"]'
data-set-states='["4","3","2","1"]'


Grüße^^