FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: der Bernhard am 30 November 2018, 14:14:48

Titel: [erledigt] Pagebutton mit :action JPG
Beitrag von: der Bernhard am 30 November 2018, 14:14:48
Hallo,
kann mir irgendwer sagen, ob es möglich ist einen Pagebutton mit Bildern darzustellen der den Inhalt (2tes Bild) wechselt sobald er selektiert wurde?

Mit :action habe ich schon probiert, das funktioniert nur solange man klickt, nicht aber sobald man loslässt.


<style type="text/css">
        .raffON { background: url(/fhem/tablet/images/u_raff_btn.jpg) no-repeat; width: 80px; height: 80px; }                                                                                                 
        .raffON:action { background: url(/fhem/tablet/images/c_raff_btn.jpg) no-repeat; width: 80px; height: 80px; }                                                                                         
</style>



...
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" style="background-color:transparent;">
  <div class="left-align prefetch">
  <div data-type="pagebutton" data-fade-duration="0" data-url="#1_raffstores.html" data-load="#1_raffstores" data-background-icon="" data-active-pattern="(.*#1_raffstores.html||.*#2_raffstores_etage_.*.html)" data-icon="raffON" class="default"></div>
  </div>
</li>
...


So wie auf den Bildern hätte ich es gern. Hat das schon jemand umgesetzt?

Danke und LG
Titel: Antw:Pagebutton mit :action JPG
Beitrag von: der Bernhard am 30 November 2018, 15:44:05
Hat sich erledigt... Hab eine ID erstellt und das icon einfach leer gelassen..


<style type="text/css">
#raffON { background: url(/fhem/tablet/images/u_raff_btn.jpg) no-repeat; width: 80px; height: 80px; }                                                                                                 
#raffON .active { background: url(/fhem/tablet/images/c_raff_btn.jpg) no-repeat; width: 80px; height: 80px; }   
</style>



...
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" style="background-color:transparent;">
  <div class="left-align prefetch">
  <div data-type="pagebutton" data-fade-duration="0" data-url="#1_raffstores.html" data-load="#1_raffstores" data-background-icon="" data-active-pattern="(.*#1_raffstores.html||.*#2_raffstores_etage_.*.html)" data-icon="" id="raffON" class="default big"></div>
  </div>
</li>
...