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