06 AppCan入门学习之基本按件（BUTTON/SWITCH/LISTVIEW）
一些控件举例
一、BUTTON
appcan.button(selector,css, callback)
selector按钮的选择器，例如.btn、div或#id。可同时处理多个按钮
css按钮点击后的效果CSS类名称。预置 ani-act和 btn-act
callback按钮点击后的回调函数，回调函数中this代表点击的按钮
例：添加两个控件分别处理事件
<divclass="btn ub ub-ac bc-text-head ub-pc bc-btn umar-a" id="btn1"> 外来访问者登录 </div> <divclass="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a" id="btn2"> 管理员登录 </div>
事件处理
appcan.button("#btn1","ani-act", function() {
appcan.window.open('login','login.html', 10);
})
//注意两种不同的写法
appcan.button("#btn2","ani-act", function() {
appcan.window.open({
name:'welcome',
data:'welcome.html',
aniId:8});
})
二、switch按钮
JS对象
appcan.switchBtn(selector,css, callback)
selector 按钮的选择器，例如 .btn、div或#id。可同时处理多个按钮
cssSwitch 开启后的背景CSS类名称。预置bc-head。可选参数
callbackswitch 状态变更后的回调函数
例
<!--switch控件-->
<divclass="switch uba bc-border" data-checked="false">
appcan.switchBtn(".switch",function(obj, value) {
if(true == value){ //开关开启
//alert('aaaa');
//设备震动10秒
appcan.device.vibrate(10000);
}else{
//取消震动
appcan.deviec.cancelVibrate();
}
三、Listview列表组件
列表组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成列表控件的开发
函数
appcan.listview({参数})
selector: /*选择器*/,
type: thinLine or thickLine /*窄行和宽行设定*/,
hasIcon: true or false /*是否有图片*/,
hasAngle: true or false /*是否有右侧箭头*/,
hasSubTitle: true or false /*是否有子标题*/,
hasTouchEffect: true or false /*是否有点击效果*/,
hasCheckbox: true or false /*是否有复选按钮*/,
hasRadiobox: true or false /*是否有单选按钮*/,
align: “left” or “right” /*checkbox和radiobox居左还是居右*/,
multiline: 1 2 or 3 /*主标题文字占用最大行数。到达行数显示不全使用…替换*/,
touchClass: 'sc-bg-active' or 用户自定义 /*列表条目点击效果CSS类*/,
hasControl: true or false /*列表条目中是否包含switch组件。*/
hasGroup: true or false /*列表条目是否以分组的形式展示。*/
方法
set(data)
data:JSON 对象数组，用于存储列表条目显示的文字图片等信息。
add(data,dir)
data:JSON 对象数组，用于存储列表条目显示的文字图片等信息。
dir:0 or 1 用于设定数据是在列表前部添加还是后不。0为前部添加。默认为1
例
<divid="listview" class="ubtbc-border sc-bg"></div>
varlv = appcan.listview({
selector : "#listview",
type : "thinLine",
hasIcon : true,
hasAngle : true,
hasSubTitle : true,
multiLine : 1,
});
lv.set([{
title : "上饶美食",
icon :"./css/images/list1.jpg",
subTitle : "好玩",
id : "1"
}, {
title : "鹰潭美食",
icon :"./css/images/list2.jpg",
subTitle : "好吃",
id : "2"
}, {
title : "南宁美食",
icon : "./css/images/list3.jpg",
subTitle : "好地方",
id : "3"
}])
lv.on("click", function(ele,obj, curEle) {
})