enyo.kind({ name: "Highlightable", handlers: { ondown: "highlight", onleave: "unhighlight" }, classes:"hl-text", highlight: function(inSender, inEvent) { if(enyo.platform.firefoxOS && inEvent.srcEvent.type !== "mousedown") { this.addClass("pressed"); } }, unhighlight: function(inSender, inEvent) { if(enyo.platform.firefoxOS && inEvent.srcEvent.type !== "mouseout") { this.removeClass("pressed"); } } }); enyo.kind({ name: "App", classes: "enyo-unselectable", components: [ {kind: "onyx.Toolbar", content:":active:hover Workaround Demo"}, {style:"margin:25px;", components:[ //can use inline content in a highlightable {kind:"Highlightable", content:"This is a simple example of text that highlights when clicked/tapped on."}, {tag:"br"}, //can even use components enclosed within a highlightable {kind:"Highlightable", components:[ {kind: "onyx.Groupbox", components: [ {kind: "onyx.GroupboxHeader", content: "Components inside a Highlightable"}, {content:"This is what happens when components are within a Highlightable component.", style:"padding:10px;"} ]} ]} ]} ] }); // render two, they're small new App().renderInto(document.body);
.hl-text.pressed, .hl-text:active:hover { background-color:yellow; }