App Can UI框架实例讲解.pptVIP

弹性盒子 弹性盒子模型布局例子5 子元素采用纵向布局， 父元素使用ub-ver div class=ub ub-ver uba umh6 div class=ub-f1 uba AAA/div div class=ub-f1 uba BBB/div /div 分配率适配 分辨率适配 为了使手机应用能够根据访问设备的不同分辨率自动调整页面效果。 AppCan UI框架设计原理是为不同的分辨率，选取人直观感受最舒适的字体大小作为参考量，再用相对长度单位em进行页面布局。 如：页面中设置font-size:1em;在320x480分辨率下显示字体大小为16px，在480x800分辨率下显示字体大小为24px。目前参照Andorid屏幕密度划分为低密度、普通密度、高密度、超高密度、超超高密度，分别定义字体为14px 16px 24px 32px 48px。 UI 控件 -- Button 按钮 JS对象 ??appcan.button(selector, css, callback) ????selector 按钮的选择器，例如 .btn、div或#id。可同时处理多个按钮? ????css 按钮点击后的效果CSS类名称。预置 ani-act和 btn-act? ????callback 按钮点击后的回调函数，回调函数中this代表点击的按钮? JS 代码 appcan.button(.btn, ani-act, function() { }) div class=btn ub ub-ac bc-text-head ub-pc bc-btn id=btn 无图片按钮 /div UI 控件 -- Button 按钮 div class=btn ub ub-ac bc-text-head ub-pc bc-btn uc-a id=btn1 按钮1 /div div class=btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba id=btn2 按钮2 /div div class=btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba ulev1 id=btn3 按钮3 /div div class=btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba ulev-4 id=btn4 按钮4 /div div class=btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba ulev-4 uts id=btn5 按钮5 /div UI 控件 --图片滑块 UI 控件 --图片滑块 JS对象 函数： appcan.slider({参数}) selector: /*选择器*/, hasLabel: true or false /*是否有标签文字栏*/, aspectRatio: 6/16 /*是否控制纵横比, index: 0 or 0 /*默认选择项*/ 方法： set(data) data:JSON 对象数组，用于存储显示的图片、提示文字信息 clickItem事件 data:JSON 点击条目时触发，告知点击的索引和索引对应的数据对象 UI 控件 --列表 列表组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成列表控件的开发。 UI 控件 --列表 JS对象 ??函数： ?? appcan.listview({参数}) ????selector: ? /*选择器*/,? ????type: ? thinLine or thickLine /*窄行和宽行设定*/, ? ????hasIcon: ? true or false /*是否有图片*/,? ????hasAngle: ? true or false /*是否有右侧箭头*/,? ????hasSubTitle: ? t