一、应用场景描述
应用场景描述:例如:在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代表点击的按钮