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)
}
}

總結

以上是生活随笔為你收集整理的AUI前端框架总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。