一些控件举例

一、BUTTON

appcan.button(selector,css, callback)

selector按钮的选择器，例如.btn、div或#id。可同时处理多个按钮

css按钮点击后的效果CSS类名称。预置 ani-act和 btn-act

callback按钮点击后的回调函数，回调函数中this代表点击的按钮

例：添加两个控件分别处理事件

<divclass="btnubub-acbc-text-headub-pcbc-btnumar-a"id="btn1">外来访问者登录</div><divclass="btnubub-acbc-text-headub-pcbc-btnuc-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="switchubabc-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-bordersc-bg"></div>varlv=appcan.listview({selector:"#listview",type:"thinLine",hasIcon:true,hasAngle:true,hasSubTitle:true,multiLine:1,});lv.set([{title:"上饶美食",icon:"./css/p_w_picpaths/list1.jpg",subTitle:"好玩",id:"1"},{title:"鹰潭美食",icon:"./css/p_w_picpaths/list2.jpg",subTitle:"好吃",id:"2"},{title:"南宁美食",icon:"./css/p_w_picpaths/list3.jpg",subTitle:"好地方",id:"3"}])lv.on("click",function(ele,obj,curEle){})