mirror of
https://github.com/webOSArchive/mochi
synced 2026-11-07 03:12:32 -05:00
54 lines
2.3 KiB
JavaScript
54 lines
2.3 KiB
JavaScript
enyo.kind({
|
|
name: "mochi.sample.ToggleButtonSample",
|
|
classes: "mochi mochi-sample enyo-unselectable enyo-fit",
|
|
kind: "FittableRows",
|
|
components: [
|
|
{kind: "enyo.Scroller", fit: true, components:[
|
|
{kind: "mochi.Subheader", content: "Toggle Buttons: Default"},
|
|
{classes: "mochi-sample-tools", components: [
|
|
{kind: "mochi.ToggleButton", onChange: "toggleChanged", value: true},
|
|
{kind: "mochi.ToggleButton", onChange: "toggleChanged", value: true},
|
|
{kind: "mochi.ToggleButton", onChange: "toggleChanged"}
|
|
]},
|
|
|
|
{tag: "br"},
|
|
{kind: "mochi.Subheader", content: "Toggle Buttons: Disabled"},
|
|
{classes: "mochi-sample-tools", components: [
|
|
{kind: "mochi.ToggleButton", onChange: "toggleChanged", disabled: true},
|
|
{kind: "mochi.ToggleButton", onChange: "toggleChanged", value: true, disabled: true}
|
|
]},
|
|
{tag: "br"},
|
|
|
|
{kind: "mochi.Subheader", content: "Toggle Buttons: Custom"},
|
|
{classes: "mochi-sample-tools", components: [
|
|
{kind: "mochi.ToggleButton", onChange: "toggleChanged", colorActive: "#69cdff", colorInactive: "#ff4a4a"},
|
|
{kind: "mochi.ToggleButton", onChange: "toggleChanged", colorActive: "#69cdff", colorInactive: "#ff4a4a", value: true},
|
|
{kind: "mochi.ToggleButton", onChange: "toggleChanged", canAnimate: false, value: true},
|
|
{kind: "mochi.ToggleButton", onChange: "toggleChanged", style: "width: 200px;"}
|
|
]},
|
|
{tag: "br"},
|
|
|
|
{kind: "mochi.Subheader", content: "Toggle Buttons Group"},
|
|
{kind: "Group", classes: "mochi-sample-tools group", onActivate: "groupActivated", highlander: true, components: [
|
|
{kind: "mochi.ToggleButton"},
|
|
{kind: "mochi.ToggleButton", value: true},
|
|
{kind: "mochi.ToggleButton"}
|
|
]},
|
|
{tag: "br"},
|
|
{classes: "mochi-sample-tools", components: [
|
|
{name: "result", classes: "mochi-sample-content", content: "No button tapped yet."}
|
|
]}
|
|
]}
|
|
],
|
|
toggleChanged: function(inSender, inEvent) {
|
|
this.$.result.setContent(inSender.name + " was " + (inSender.getValue() ? " selected." : "deselected."));
|
|
},
|
|
ordinals: ["1st", "2nd", "3rd"],
|
|
groupActivated: function(inSender, inEvent) {
|
|
if (inEvent.originator.getActive()) {
|
|
var selected = inEvent.originator.indexInContainer();
|
|
this.$.result.setContent("The " + this.ordinals[selected] + " toggle button in the group is selected.");
|
|
}
|
|
}
|
|
});
|