Hallo,
konnte im Forum leider nichts brauchbares finden..
Gibt es eine Möglichkeit, wenn ich einen Text vor einem Icon habe, dass trotzdem das Icon im Hintergrund klickbar ist? Momentan ist nur der Bereich rund um den Text klickbar und den zu erwischen ist mit den Fingern schon recht schwer...
Das Ganze ist ein Pagebutton (siehe Code) über den ich einen Text gelegt habe.
Danke. Bernhard
<div class="page" id="1_raffstores">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="pagebutton" data-url="#2_raffstores_etage_og.html" data-load="#raffstores_etage_og" data-background-icon="" data-on-color="orange" data-active-pattern="(.*/||.*#2_raffstores_etage_og.html)" data-icon="fg-raffst" class="prefetch display-center bigger"></div>
<div data-type="label" class="display-center bigger">OG</div>
</li>
In Javascript kann man den Klick-Event sicher irgendwie weiterreichen, aber das scheint sehr kompliziert. Könntest du dir nicht eigene Icons aus dem Text (ggf. plus Hintergrund) erstellen und die dann einbinden?
Naja die Icons sind ja nur einfärbig, als font, weswegen das nicht gehen dürfte. Eine Grafik kommt wohl auch nicht in Frage, da man sonst keine Farbwechsel bei klick hinbekommt, bzw. diese nicht skalierbar ist.
Zitat von: der Bernhard am 16 November 2018, 12:18:58
Naja die Icons sind ja nur einfärbig, als font, weswegen das nicht gehen dürfte. Eine Grafik kommt wohl auch nicht in Frage, da man sonst keine Farbwechsel bei klick hinbekommt, bzw. diese nicht skalierbar ist.
Ich meinte tatsächlich echte Image Icons, nicht Icon Fonts. Diese lassen sich dann auch skalieren. Farbwechsel müssten dann über mehrere Images realisiert werden.
Die Einbindung von (beliebig vielen) eigenen Images erfolgt über entsprechende CSS-Klassen, da gibt es einige Beispiele hier im Forum.
Der Vorteil ist, dass "echte" Icons mehrfarbig sind. Der Nachteil ist, dass sich die CSS-Definition aufbläht.
Viele Grüße,
Holger
Denke schon dass das so geht, dachte nur das vlt. einen einfacheren Weg gibt ;)
Ohne das jetzt getestet zu haben, probiere mal bitte
<div data-type="pagebutton" data-url="#2_raffstores_etage_og.html" data-load="#raffstores_etage_og" data-background-icon="" data-on-color="orange" data-active-pattern="(.*/||.*#2_raffstores_etage_og.html)" data-icon="fg-raffst" class="prefetch display-center bigger">
<div data-type="label" class="display-center bigger">OG</div>
</div>
Dort ist die Label-Struktur eine Strukturebene unterhalb von pagebutton und erbt dessen Eigenschaften.
Der andere Weg ist Pagelink (den nutze ich):
Ersetze testweise "label" durch "link". Hier muss möglicherweise noch "data-parent="index" der Struktur zugefügt werden - zumindest schadet es nicht.
Pagelink funktioniert in Pagebutton-Konstrukten. Lass uns hoffen und beten, dass das auch nach dem nächsten FTUI-Update so ist ... @setstate
P.S: https://wiki.fhem.de/wiki/FTUI_Widget_Link
Hi curt,
danke du bist genial... hab nur noch die class auf mini setzen müssen weil er mir jetzt 2x bigger gemacht hat und somit die schrift riesig war.
jetzt ist es aber top...
<div data-type="pagebutton" data-url="#2_raffstores_etage_og.html" data-load="#raffstores_etage_og" data-background-icon="" data-on-color="orange" data-active-pattern="(.*/||.*#2_raffstores_etage_og.html)" data-icon="fg-raffst" class="prefetch display-center bigger">
<div data-type="label" class="mini">OG</div>