一、应用场景描述
应用场景描述：例如：在IDE开发环境下，在同一界面上有多个按钮，点击不同按钮可以跳转到不同的页面。那么如何在按钮使用上使用不同的方式完成按键事件的监听和控制，完成按钮点击事件的实现呢？

二、问题分析与解决方案
1、问题分析：按钮组件是一组根据AppCan 布局框架封装的HTML5代码片段，通过配合的样式和JS对象appcan.button，使开发者在界面中可以快速引用、定位按钮控件，并可以快速的完成按键事件的监听和控制。有两种方式可以实现：
（1）、根据按钮id，分别指定不同的按钮JS实现不同的按钮点击事件；
（2）、根据按钮id，使用Case0 "bttn"、Case1 "bttn1"的方式实现不同的按钮点击事件。

2、解决方案操作过程：
（1）、新建一个项目test，并创建两个页面（login.html、list.html）
（2）、在index_content.html中插入两个按钮控件，并分别指定按钮的id为btn1、btn2。如下代码：
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn umar-t uc-a" id="btn1">
按钮1
</div>

<div class="btn ub ub-ac bc-text-head ub-pc bc-btn umar-t uc-a" id="btn2">
按钮2
</div>

（3）按钮点击事件的JS代码：
方式一：
appcan.button("#btn1", "ani-act", function() {
appcan.window.open({
name : "login",
data : "login.html",
aniId : 10
});

})
appcan.button("#btn2", "ani-act", function() {
appcan.window.open({
name : "list",
data : "list.html",
aniId : 10
});

})

方式二：
如果需要执行函数，在此进行函数定义：
function dingyi1() {
...
}
function dingyi2() {
...
}

appcan.button(".btn", "btn-act1", function() {
switch(this.id){
Case0 "btn1":
openWin(login, 'login.html', '10');
dingyi1(); //如果需要执行函数，在此执行函数定义
break;
Case1 "btn2":
openWin('list', 'list.html', '10');
dingyi2(); //如果需要执行函数，在此执行函数定义
break;
}
});
使用以上两种方式可以实现相同的效果。

三、涉及知识点
1、依赖的文件：
appcan.js
appcan.control.js
appcan.control.css

2、JS对象说明：
appcan.button(selector, css, callback)
selector 按钮的选择器，例如 .btn、div或#id。可同时处理多个按钮
css 按钮点击后的效果CSS类名称。预置 ani-act和 btn-act
callback 按钮点击后的回调函数，回调函数中this代表点击的按钮