Buttons

Onyx提供了种类丰富的button。本文将介绍最常用的几类button。

onyx.Button

onyx.Button直接从enyo.button继承而来，提供同样的基本功能。

{kind: "onyx.Toolbar", components: [

{kind: "enyo.Button", content: "enyo.Button"},

{kind: "onyx.Button", content: "onyx.Button"}

]}

当点击onyx.Button时会触发ontap事件，你可以指定处理方法来处理该事件。

{kind: "onyx.Button", content: "tap me", ontap: "buttonTapped"},

...

buttonTapped: function(inSender, inEvent) {

// respond to the tap event

}

另外，你可以指定圆角、背景颜色或应用onyx的内置button样式来定制button的外形：

{kind: "onyx.Toolbar", components: [

{kind: "onyx.Button", content: "tap me"},

{kind: "onyx.Button", content: "purple", style: "background-color: purple; color: #F1F1F1;"},

{kind: "onyx.Button", content: "yes", classes: "onyx-affirmative"},

{kind: "onyx.Button", content: "no", classes: "onyx-negative"},

{kind: "onyx.Button", content: "onyx-blue", classes: "onyx-blue"}

]}

你也可以在button中放一个image，使用或省略文字，如：

{kind: "onyx.Button", ontap:"buttonTapped", components: [

{kind: "onyx.Icon", src: "https://github.com/enyojs/enyo/wiki/assets/fish_bowl.png"}

]}

{kind: "onyx.Button", ontap:"buttonTapped", components: [

{tag: "img", attributes: {src: "https://github.com/enyojs/enyo/wiki/assets/fish_bowl.png"}},

{content: "Go Fish"}

]}

onyx.IconButton

类似的效果也可以使用onyx.IconButton实现，它是onyx.Icon的一个子类。例：

{kind: "onyx.IconButton", src: "assets/my_icon.png"}

生成一个像button的icon，但是不显示和button连在一起的矩形阴影。

使用onyx.Icon生成一个既有文字又有图片的button:

{kind: "onyx.Button", ontap: "buttonTap", components: [

{kind: "onyx.Icon", src: "assets/my_icon.png"},

{content: "tap me"}

]}

onyx.IconButton和onyx.Button的一个不同点是IconButton中image的src属性假定是32*64，button的上半部分在正常状态时显示，下半部分在active时显示。(By contrast, when you activate an onyx.Button that contains an image, the state change is reflected in the button's background, but not in the image itself.)

onyx.RadioButton

In Enyo 2, an onyx.RadioButton is an enyo.Button designed to go inside an onyx.RadioGroup (a horizontally-oriented group of buttons in which tapping on one button will release any previously-tapped button).

例：

enyo.kind({

name: "RadioGroupSample",

kind: "Control",

components: [

{kind: "onyx.RadioGroup", onActivate: "radioActivated", components: [

{content: "Alpha"},

{content: "Beta"},

{content: "Gamma"}

]},

{name: "statusText", content: "Please make a selection"}

],

radioActivated: function(inSender, inEvent) {

if (inEvent.originator.getActive()) {

this.$.statusText.setContent("Current selection: " +

inEvent.originator.getContent());

}

}

});

注意有一个处理整个radio group的方法。当button tapped时，我们可以使用inEvent.originator来确定事件源。我们不需要显示声明radio button的类型。当一个control添加到onyx.RadioGroup，它的kind默认为onyx.RadioButton。（你可以设置radiogroup的defaultKind属性来改变这一默认行为）。

onyx.ToggleButton

onyx.ToggleButton看起来像两个状态的切换开关。每当点击toggle button它都会切换值并触发onChange事件。

{kind: "onyx.ToggleButton", onContent: "foo", offContent: "bar", onChange: "buttonToggle"},

...

buttonToggle: function(inSender, inEvent) {

this.log("Toggled to value " + inEvent.value);

}

你可以使用CSS设置背景颜色来定制toggle button的on状态的外观。

{kind: "onyx.ToggleButton", style: "background-color: #35A8EE;"}

最后，你可以调用getValue方法来索引button的值（返回一个boolean值）：

queryToggleValue: function() {

return this.$.toggleButton.getValue();

}