Appcan Basic Press Kit (Button/switch/listview) for introductory learning

Some examples of controls

First, BUTTON

Appcan.button (SELECTOR,CSS, callback)

selector the selector for the button, such as. btn, Div, or #id. Multiple buttons can be processed simultaneously

CSS the effect of the button click after the CSS class name. Preset ani-act and Btn-act

Callback button click on the callback function, the callback function in this represents the clicked button

Example: adding two controls to handle an event individually

<divclass= "BTN UB ub-ac bc-text-head ub-pc bc-btn umar-a" id= "BTN1" > Inbound visitors Login </div><divclass= "BT N UB ub-ac bc-text-head ub-pc bc-btn uc-a "id=" btn2 "> Admin login </div>

Event handling

Appcan.button ("#btn1", "Ani-act", function () {appcan.window.open (' login ', ' login.html ', 10); })//Note two different ways of writing Appcan.button ("#btn2", "Ani-act", function () {Appcan.window.open ({name: ' We Lcome ', data: ' Welcome.html ', Aniid:8});})

Second, switch button

JS Object

APPCAN.SWITCHBTN (SELECTOR,CSS, callback)

selector the selector for the button, such as. btn, Div, or #id. Multiple buttons can be processed simultaneously

Cssswitch the background CSS class name after opening. Preset Bc-head. Optional Parameters

Callbackswitch callback function after state change

Cases

<!--switch control--><divclass= "switch Uba bc-border" data-checked= "false" >appcan.switchbtn (". Switch",        function (obj, value) {if (true = = value) {//switch on//alert (' AAAA ');    Equipment Vibration 10 seconds appcan.device.vibrate (10000); }else{//Cancel Vibration appcan.deviec.cancelVibrate ();}

Three, ListView list components

A list component is a JS object that encapsulates a list of data based on the Appcan layout framework, allowing developers to quickly complete the development of a list control in the interface by using a matching style.

Function

Appcan.listview ({ parameter})

selector:/* Selector */,

type:thinline or thickline/* narrow line and wide line setting */,

Hasicon:true or False/* If there is a picture */,

Hasangle:true or False/* is there a right arrow */,

Hassubtitle:true or False/* is there a sub-heading */,

Hastoucheffect:true or False/* whether there is a click effect */,

Hascheckbox:true or False/* is there a check button */,

Hasradiobox:true or False/* is there a radio button */,

align: the "left" or "right"/*checkbox and Radiobox are still on the other hand.

multiline:1 2 or 3/* The main title text occupies the maximum number of rows. Arrival line number display not used ... Replace */,

touchclass: ' sc-bg-active ' or user-defined/* list entry Click effect CSS class */,

Hascontrol:true or False/* whether the switch component is included in the list entry. */

Hasgroup:true or False/* whether the list entries are presented in a grouped form. */

Method

Set (data)
An array of Data:json objects that stores information such as the text picture displayed by the list entry.

Add (Data,dir)

Data:json an array of objects that stores information such as the text picture displayed by the list entry.

dir:0 or 1 used to set whether the data is added in the front of the list or not. 0 Add to the front section. Default is 1

Cases

<divid= "ListView"   class= "UBTBC-BORDER&NBSP;SC-BG" ></div> varlv =  Appcan.listview ({            selector :  "#listview",            type :  "ThinLine ",            hasicon : true,             hasAngle : true,             hasSubTitle : true,             multiLine : 1,         });         lv.set ([{             title :  "Shangrao Gourmet",             icon&nBSP;: "./css/images/list1.jpg",             subtitle  :  "Fun",            id :  "1"         }, {             title :  "Yingtan Cuisine",             icon : "./css/images/list2.jpg",             subTitle :  "Delicious",             id :  "2"         }, {             title :  "Nanning Cuisine",             icon :  "./css/images/list3.jpg",             subtitle :  "Good place",             id  :  "3" &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;}])          lv.on ("Click",  function (Ele,obj, curele)  {            })

Appcan Basic Press Kit (Button/switch/listview) for introductory learning