Welches Widget für einfachen Button

[coyote]

Hi Leute,

irgendwie steh ich gerade auf dem Schlauch.

Ich bräuchte einen einfachen Button wie im Screenshot zu sehen, der mir true/false schaltet und die Anzeige AN/AUS wechselt. Wenn möglich in diesem Stil und wenn der Text "An" ist sollte der Hintergrund eine andere Farbe haben.

Eine Möglichkeit wäre das HQWidget im jQuery Stil, aber wie bekomme ich da den Radius der Ränder kleiner??

Oder vielleicht jqui-control-icon-State, aber wie trage ich einen Wert dort ein der true/false togglen kann :?:
536_button.png

[pix]

Hallo,

auch, wenn das schon ein wenig her ist. Hier ein Widget mit passenden CSS Einstellungen. Datenpunkt eintragen, wird getoggelt (true/false). Bei true grün, bei false rot. Schrift im Label vergrößert und manuell zentriert. Zur Veranschaulichung Rahmen zugefügt.

[{"tpl":"tplMetroTileBool","data":{"oid":"","visibility-cond":"==","visibility-val":1,"hover":"true","label_false":"Aus","label_true":"An","bg_class_false":"bg-red","bg_class_true":"bg-green","icon_class_false":"","icon_class_true":"","icon_badge_false":"","icon_badge_true":"","badge_bg_class_false":"","badge_bg_class_true":"","badge_top":"0","badge_left":"0","brand_bg_class_false":"","brand_bg_class_true":"","gestures-offsetX":0,"gestures-offsetY":0,"class":"button_coyote","name":"Toggle Button mit Custom CSS"},"style":{"left":"364px","top":"731px","z-index":"20","width":"134px","height":"86px","text-align":"center"},"widgetSet":"metro"}]

CSS (in Reiter CSS kopieren und nach Bedarf anpassen). Die Farben sind extra kräftig, damit man sieht, welche Parameter zu ändern sind.

.button_coyote .metro {
    border: 6px solid yellow;
    text-align: center;

}

.button_coyote .metro .badge {
    display: none;
}

.button_coyote .metro .label {
    border: 2px solid blue;
    height: 30px;
    padding-bottom: 23px;
    padding-left: 25px;
    font-size: 40px !important;
}

Gruß

Pix

[coyote]

Hi Pix,

damit bin ich schon fast zufrieden und kann damit arbeiten.

Wenn du mir jetzt noch sagst wie ich, wie in meinem ersten Post, den Verlauf vom Hintergrund so hinbekomme und wenn möglich bei "An/Aus" ein leichtes grün oder rot, wäre echt Top
536_an.png
536_aus.png