H5 AUI 使用总结

w3c w3school 学习网站

菜鸟教程

常见问题及完整 JS-SDK 文档地址


AUI 是Apicloud 的手机端UI第三方,需要引入Apicloud和AUI中的css样式和js框架


**首先:手机项目必须配置config.xml文件 Apicloud官网有详解
**
其次:程序会默认进入index.html页面,开始程序的加载显示


具体代码如下:


1、<meta charset="utf-8"><meta http-equiv="content-type" content="text/html; charset="utf-8">

解释:在HTML5,他们是等价的。使用更短,更容易记住和类型。浏览器支持很好,因为它是设计用来向后兼容的。

2、<meta meta http-equiv="X-UA-Compatible" content="IE=edge">
详解:  http://www.cnblogs.com/jinling/p/4719114.html

3、需要引入aui的css样式 在头文件中
例如:外联引入< link rel="stylesheet" type="text/css" href="../css/aui.css">
css 可以在head中引入 :<style type="text/css">

4、修改aui中css的样式必须要!important 
例如: .aui-iconfont {
font-size: 22px !important;
}

5、设置手机的导航视图:使用盒子div包裹起来
例如:<div class="aui-bar aui-bar-nav aui-bar-warning" id="aui-header">div>
aui-bar:头部的样式
aui-bar-nav:导航样式
aui-header:js使用

6、引入js框架,调用对应的js方法,获取页面元素位置和内容等,打开和关闭窗口

例如:<script type="text/javascript" src="./script/api.js">

apiready = function() :和js中ready()方法意思差不多,等html加载完执行该方法

api.parseTapmode();  :解析元素 tapmode 属性,优化点击事件处理 ,默认页面加载完成后,引擎会对 dom 里面的元素进行 tapmode 属性解析,若是之后用代码创建的 dom 元素,则需要调用该方法后 tapmode 属性才会生效

var header = $api.byId('aui-header');:通过id选择dom

$api.fixIos7Bar(header);* :适配系统ios7 导航和状态栏的20px

var headerPos = $api.offset(header);:描述:获取元素在页面中的位置与宽高,(此为距离页面左侧及顶端的位置,并非距离窗口的位置)

用法:. offset (el)
参数:el(类型:Element):DOM元素
返回值:该元素的位置(left,top)
及宽高(width,height),返回值是json类型的,
包括l,t,w,h属性

var body_h = $api.offset($api.dom('body')).h;
描述:选择首个匹配的DOM元素
用法:
.dom(el, selector)
从el元素开始查找
参数:
el (类型:Element):DOM元素
selector (类型:Selector):CSS 选择器
返回值: 返回首个匹配的DOM元素

api.openFrame({
  name: 'main',
  url: 'html/main.html',
  rect: {
    x:0,
    y:headerPos.h,
    w:'auto',
    h:'auto'
   }
  bounces: false,
});

注释:打开新的窗口  1、窗口名字  2、窗口路径  3、窗口位置  4、是否可以回弹,类似IOS scroll的回弹效果,默认yes

7、引导页详解

  7.1 样式总结:
/*设置首页的图片 样式*/
img.logo {
/*设置宽度*/
width: 30%;
/*圆角*/
border-radius: 10px;
/*下边距*/
margin-bottom: 15px;
}
/*设置后面几张图片 的样式*/
img.icon {
width: 50%;
border-radius: 10px;
}
/*设置 文本的整体样式*/
strong {
/*字体大小*/
font-size: 2em;
/*设置 字体 粗度*/
font-weight: 400;
}
/*第二页的背景颜色*/
.bg1 {
**/*background: #d9e2e5 !important;*/**
**background:#C0392B !important;**
**}**
/*第三个页面的背景颜色 必须引入*/
**.bg2 {**
**/*background: #eee9e0 !important;*/**
**background:#0062CC !important;**
**}**
/*webkit 浏览器的兼容*/
**@-webkit-keyframes fadeInTop {**
**from {**
**opacity: 0.2;**
**-webkit-transform: translate3d(0, -50px, 0);**
**transform: translate3d(0, -50px, 0);**
**}**
**to {**
**opacity: 1;**
**-webkit-transform: none;**
**transform: none;**
**}**
**}**
**/*设置返回按钮的样式*/**
**.close {**
/*设置背景颜色 透明度*/
**background: rgba(0,0,0,0.6);**
/*设置内间距*/
**padding: 4px 10px;**
/*设置边框的圆角*/
**border-radius: 30px;**
/*字体的颜色*/
**color: #fff;**
/*字体的大小*/
**font-size: 0.75em;**
/*绝对位置 类似float的浮动 */
**position: absolute;**
/*绝对位置的 右侧距离*/
**right: 10px;**
/*绝对位置的左侧 距离*/
**top: 30px;**
/*在z轴的位置 数字越大距离自己越近*/
**z-index: 999;**
}
**7.2 body内容总结**
****
**
关闭
**
注释:**tapmode 用户加速 按钮的响应事件  ** ****onclick 指定响应的事件**** **
** **   
** **         
** **                       
** **                                  ** **                                         ** **                         
**
**           
**
**   
**
**
**
**注释:**aui-slide : 设置滚动样式**** ******aui-slide-wrap : 承载滚动内容的容器****** ********aui-slide-node : 设置节点样式******** **********aui-slide-node-middle: 设置节点居中********** ************aui-slide-node-center:设置节点内容居中************ **************aui-content : 内容样式************** ****************aui-padded-15:内间距15px**************** ******************aui-text-center:文本居中****************** ********************aui-hide:隐藏超出div的部分******************** ********************aui-text-primary:设置字体的样式******************** ** :强调  加粗字体** **************************************** ******************7.3 js事件总结****************** ******************首先:要先引入aui的js框架****************** ******************例如:script type="text/javascript" src="../script/aui-slide.js"****************** ******************其次:js代码写在

你可能感兴趣的:(AUI)