AppCan学习笔记（2）-UI控件

一、盒模型css属性

box架构	class为ub…	所控制属性
box子元素分配比例	ub-f…	子元素的box-flex
元素垂直方向位置排列	ub-ac，ub-ae	box-align
元素水平方向位置排列	ub-pc,ub-pe,ub-pj	box-pack
元素垂直排列	ub-ver	box-orient
元素反向排列	ub-rev	box-direction
横向滑动效果	ub-fh…	width:100%
纵向滑动效果	ub-fv…	height:100%
背景图片类别	ub-img	background(css3)的属性

二、基础框架Base的css属性

元素	class	所控制属性
圆角类别	uc-……	border-radius，background-clip
外阴影类别	us	box-shadow
内阴影类别	us-i	box-shadow
文字阴影	uts	text-shadow
字体大小类别	ulev	font-size
边框类别	ub	border
外边框类别	umar-	margin
内边框类别	uinn	padding
文字对齐方向	tx-	text-align

以上css3的新属性在此不描述。

示例代码，效果图如下：

<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a"  id="btn">
按钮1
</div>
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba"  id="btn">
按钮2
</div>
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba ulev1"  id="btn">
按钮3
</div>
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba ulev-4"  id="btn">
按钮4
</div>
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba ulev-4 uts"  id="btn">
按钮5
</div>

三、UI框架的js控件

插入内置的元素模板后，每个元素都有对应的js控制代码一并插入，下面是控制函数的介绍。

1.Button 按钮

appcan.button(
    selector,    //按钮的选择器,可同时处理多个按钮 
    css,         //按钮点击后的效果CSS类名称。预置 ani-act和 btn-act 
    callback     //按钮点击后的回调函数，回调函数中this代表点击的按钮 
) 
//示例
appcan.button(".btn", "ani-act", function() {
   

})

2.图片滑块