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/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) {
           
})