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();

}

?

轉載于:https://www.cnblogs.com/waimai/archive/2013/02/25/2932780.html

總結

以上是生活随笔為你收集整理的enyo官方开发入门教程翻译一Controls之Buttons的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。