AUI前端框架总结
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 {
/*設置寬度*/
30%;
/*圓角*/
border-radius: 10px;
/*下邊距*/
margin-bottom: 15px;
}
/*設置后面幾張圖片 的樣式*/
img.icon {
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內容總結**
****
**<div class="close" tapmode onclick="closeWin()">關閉</div>**
注釋:**tapmode 用戶加速 按鈕的響應事件 **
****onclick 指定響應的事件****
**<div id="aui-slide">**
** <div class="aui-slide-wrap" >**
** <div class="aui-slide-node aui-slide-node-middle aui- slide-node-center">**
** <div class="aui-content aui-padded-15 aui-text- center aui-hide">**
** <img src="../image/aui-icon.png" class="logo" />**
** **
** </div>**
** </div>**
** </div>**
**</div>**
**注釋:**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:設置字體的樣式********************
**<strong> :強調 加粗字體**
****************************************
******************7.3 js事件總結******************
******************首先:要先引入aui的js框架******************
******************例如:script type="text/javascript" src="../script/aui-slide.js"******************
******************其次:js代碼寫在<script type="text/javascript"></******************script******************>中具體代碼如下:******************
******************//聲明一個類似類 的對象 是 aui-js框架 中的一個函數******************
var slide = new auiSlide({
//獲取aui-slide這個id的元素對象dom
container:document.getElementById("aui-slide"),
// "width":300,
//高度為窗口高度
"height":window.innerHeight,
//滾動速度 300
"speed":300,
//顯示頁面
"pageShow":true,
//頁面風格用點展示
"pageStyle":'dot',
//不是循環
"loop":false,
//點的位置居中
'dotPosition':'center',
//設置當前頁數的獲取函數,aui-js框架會自動調用currentFun這個函數,所以本類中要有currentFun(index)這個函數
currentPage:currentFun
})
// 獲取總頁數
var pageCount = slide.pageCount();
//獲取當前頁數的函數 aui會自動調用這個函數
function currentFun(index) {
//查詢.aui-slide-node類的dom數組對象
var slideList = document.querySelectorAll(".aui-slide-node");
// document.write('對象:'+slide+'頁數'+pageCount + '列表' + slideList + '當前頁數' + index)
//循環遍歷
for (var i = 0; i < slideList.length; i++) {
//判斷當前頁數
if(index == i){
//獲取子dom對象中的div數組
var thisDiv = slideList[i].querySelector("div");
//延時執行函數,0.3秒后調用function()函數
setTimeout(function(){
if(thisDiv.classList.contains("aui-hide")){
thisDiv.classList.remove("aui-hide");
}
thisDiv.querySelector("img").classList.add("fadeInTop");
thisDiv.querySelector(".desc").classList.add("fadeInBottom");
}, 300)
}
}
}
console.log(slide.pageCount());
function closeWin(){
api.closeWin({
name: 'lanuch_win'
});
}
8、[aui-icon 圖片的使用](http://www.auicss.com/?m=Home&c=Document#tubiao)
AUI為用戶提供了100個線型字體圖標,使用字體圖標的好處就是大小和顏色可以自由控制,同時還能方便的增加背景等效果。使用圖標是請確保字體文件和css文件在同一目錄下。
使用方法:
<span class="aui-iconfont aui-icon-menu"></span>
圖標的對應可以使用參考演示app的圖標模塊,在圖標名稱下方都有對應的名稱,修改.aui-icon-*
即可。
同時AUI也是支持自定義圖標的,但是需要避免名稱的重復。
Aui 下拉刷新 :使用
css 樣式引入
1、
2、
aui-js引入
1、
2、創建一個類
代碼如下:
// auiPullToRefresh aui中刷新的類
var pullRefresh = new auiPullToRefresh({
// 執行刷新 檢測的方法函數 函數名字隨便寫
callback: loadingCallback,
//文字
textDown:'下拉刷新'
})
//auiPullToRefresh 會自動監聽執行上面函數的具體內容
function loadingCallback(state){
if(state == 'success'){
// 是window的一個函數 ,作用:延時 1.5秒執行函數
setTimeout(function(){
//根據id獲取元素 必須。指定一個或多個匹配元素的 CSS 選擇器。 可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。對于多個選擇器,使用逗號隔開,返回一個匹配的元素。
var wrap = document.getElementById('list')
// document.write(wrap)
//**注意:**querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素,請使用 querySelectorAll() 方法替代。
var lis = wrap.querySelectorAll('li')
// document.write(lis)
//循環當前所有元素
for(var i = lis.length, length = i +10; i < length; i++){
// 創建一個cell 的html代碼
var html = '<li class="aui-list-view-cell"> 下拉刷新加載' + (i+1) +'</li>'
// 在當前元素中插入 html代碼
wrap.insertAdjacentHTML('afterbegin',html)
}
pullRefresh.cancelLoading();//刷新成功后調用此方法隱藏
},1500)
// document.write(state)
}
}
總結
- 上一篇: 油茶的益处油茶的功效和作用
- 下一篇: 山药和淮山的营养区别