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.图片滑块

appcan.slider({selector:'',     //选择器hasIndicator:'', //true or false,是否有位置提示条hasLable:'',     //true or false,是否有标签文字栏aspectRatio:'',  //0 or !=0,是否控制纵横比，0为使用控件高度，>0使用纵横比index:''         //0 or >0,
})

3.列表

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,列表条目是否以分组的形式展示
})

4.下拉框控件

HTML代码

<div class="select uba bc-border bc-text"><div class="text">请选择</div><div class="icon"></div><select selectedindex="0"><option value=0>选项一</option><option value=1>选项二</option><option value=2>选项三</option><option value=3>选项四</option></select>
</div>

JS控制部分

appcan.select(selector,   //select的选择器，例如 .select、div或#id。可同时处理多个下拉按钮  callback    //Select点击后的回调函数，告知select标签对应dom对象和选中的状态和选中的option的value
)

5.Input/Textarea文本输入控件

登陆表单HTML代码：

<form method="get" action=""><div class="umar-a uba bc-border"><div class="ub ub-ac ubb umh5 bc-border "><div class=" uinput ub ub-f1"><div class="uinn fa fa-user sc-text"></div><input placeholder="请输入登录账号" type="text" class="ub-f1"></div></div>   ……..</div><div class="uinn"><div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a1"  id="submit"><div class="uinn3 fa fa-shield umh1 umw1"></div>登录</div></div><button type="submit"class="uinvisible"></button>
</form>

JS代码：

$("form").on('submit', function() {appcan.request.postForm($("form"), function() {appcan.window.alert({title : "提醒",content : "您已经成功提交了表单:)",buttons : '确定',callback : function(err, data, dataType, optId) {}});},function(err){});return false;
});

6.开关按钮

HTML 代码：

<div class="switch uba bc-border switch-mini" data-checked="false">

JS代码

appcan.switch(selector, //按钮的选择器，例如 .btn、div或#id。可同时处理多个按钮 css,      //开启后的背景CSS类名称。预置 bc-head。可选参数  callback  //状态变更后的回调函数
)
//例子
appcan.switch(".switch", function(obj, value) {  })

7.单选框

HTML代码

<div class="radiobox umar-r" name=""><input type="radio" class="uabs ub-con" name="lv_radio">
</div>

js代码

$('.radiobox').find('input').on('change',function(evt){/*添加Radio变更处理代码*/
});

8.复选框

HTML代码

<div class="checkbox umar-r"><input type="checkbox" class="uabs ub-con" >
</div>

js代码

$('.checkbox').find('input').on('change',function(evt){/*添加Checkbox变更处理代码*/
});

9.导航

HTML代码

<div id="header" class="uh bc-text-head ub bc-head"><div class="nav-btn" id="nav-left"><div class="fa fa-angle-left fa-2x"></div></div><h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">标题</h1><div class="nav-btn" id="nav-right"></div>
</div>

js代码

appcan.button(".nav-btn", "btn-act", function() {appcan.window.close(-1);
})

10.tab选项卡组件

js代码

 appcan.tab({ selector: '',     //选择器  hasIcon : '',     //true or false，是否有图标  hasAnim : '',     //true or false，切换时是否有动画hasLabel : '',    //true or false，是否有文字 hasBadge : '',    //false or false，是否有badge  data :[{ /*选项卡数据*/ label : "全部", /*显示文字*/ icon: "fa-home" /*显示Font Awesome 图标*/ }, { label : "待办", icon: "icon-edit ub-img",/*显示图片图标*/ }, { label : "已办", icon: "fa-home", badge: 1 /*显示badge数字*/ }]
})

11.折叠列表

js代码

appcan.treeview({selector: '',            //选择器type:'',                 //thinLine or thickLine,窄行和宽行设定*/,   hasIcon:'',              //true or false,是否有图片  hasAngle:'',             //true or false,是否有右侧箭头 hasTouchEffect:'',       //true or false,是否有点击效果  touchClass:'' ,          // ‘sc-bg-active’ or 用户自定义,列表条目点击效果CSS类  defaultOpen:'',         //1 2 or 3,默认打开第几项，必须包含数据 isCloseOther: ''           //true or false,是否关闭其他组
})

AppCan学习笔记（2）-UI控件相关推荐

vs2010 学习Silverlight学习笔记(7)：控件样式与模板
概要: 终于知道Silverlight--App.xaml是干什么用的了,不仅可以用来封装样式(类似css),还可以制定控件模版...好强大的功能啊. 封装: 继续学习<一步一步学Silverl ...
JavaFX 学习笔记——窗口与控件
前言如今比较流行的桌面gui框架有WPF.WinForm.Qt.javafx等.其中WPF和WinForm目前还只能在运行Winsows上.Qt(widget)是一个很强大的跨平台C++框架(不只是 ...
vb.net listview 删除选定行_VBA学习笔记59-1: listview控件
学习资源:<Excel VBA从入门到进阶>第59集 by兰色幻想本节学习Listview控件,它可以用多种视图方式显示项目的控件.由于其外形美观而且非常实用,所以使用频率很高. Lis ...
ASP.NET 学习笔记_01 广告控件的使用
广告控件的使用: 广告文件是一个XML文件,广告文件中所有的标签属性被分析后放到adProperties字典中,用以属性编辑. ads.xml 1 <?xml version="1.0 ...
Android开发学习笔记-自定义组合控件
为了能让代码能够更多的复用,故使用组合控件.下面是我正在写的项目中用到的方法. 1.先写要组合的一些需要的控件,将其封装到一个布局xml布局文件中. <?xml version="1. ...
kendo treeview 修改节点显示值_VBA学习笔记60-1: Treeview控件
学习资源:<Excel VBA从入门到进阶>第60集 by兰色幻想本节讲Treeview控件. TreeView控件是以树形结构显示数据的控件.利用TreeView控件,可以设计出树形结 ...
Win32 学习笔记_列表控件(ListBox)
ListBox控件 1. 创建控件 // 创建ListBox控件 HWND hListBox = CreateWindowEx(0, TEXT("ListBox"), NULL, ...
Qt学习笔记之常用控件QlistWidget
一.QListWidget Class The QListWidget class provides an item-based list widget. More... Header: #inclu ...
LVGL v8学习笔记 | 06 - label控件的使用方法
文章目录一.label控件 1. 创建label对象 2. 设置label的文本 3. 获取label文本 4. label的大小 5. label的样式 6. label的事件二.label控件 ...
【MFC】学习笔记：常用控件之组合框（Combo Box）
01.目录目录 01.目录 02.控件介绍 03.控件的消息通知函数 04.创建组合框控件及成员函数介绍 4.1 组合框的创建 4.2 CComboBox类的主要成员函数 05.应用实例 06.总结 ...

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

一、盒模型css属性

二、基础框架Base的css属性

三、UI框架的js控件

1.Button 按钮

2.图片滑块

3.列表

4.下拉框控件

5.Input/Textarea文本输入控件

6.开关按钮

7.单选框

8.复选框

9.导航

10.tab选项卡组件

11.折叠列表

AppCan学习笔记（2）-UI控件相关推荐

最新文章

热门文章