af3的變化非常大。參見[譯]Intel App Framework 3.0的變化
一、應用需要引用的js腳本：
af3中不在自己實現dom選擇器，而是選擇基於jquey或兼容jquery的庫如zepto等，touch layer也依靠fastclick。下面就是af3應用的head部分示意代碼，對比2.x變化很明顯，這里引入了jquery和fastclick，沒有了appframework.js
<head> <title>LearAF3</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="js/af3.0/af.ui.css" /> <link rel="stylesheet" type="text/css" href="js/af3.0/icons.min.css" /> <script src="js/libs/jquery/jquery-2.1.1.min.js"></script> <script src="js/libs/fastclick/fastclick-1.0.3.min.js"></script> <script src="js/af3.0/appframework.ui.js"></script> ...
</head>
二、頁面組織結構：
af3中應用視覺元素組織變化巨大，一改2.x時代panel和header，footer混亂的現象，3.0中新增加了一個頂級元素類型（除afui）view，現在header，footer和panel頁面都屬於view元素，一個view內部的panel有相同的header和footer，需要不同的footer或header需要創建新的view，竊以為這樣清爽多了:)，請看：
<body>
<div class="view" id="viewMain">
<header>
<h1 class="title">Main view</h1>
<a class="button icon menuButton" style="float:right"></a>
</header>
<div class="pages">
<div class="panel active" id="page01"> this is page in main view</div>
</div>
<footer>
<a data-transition="up-reveal" class="icon html5" onclick="$.afui.loadContent('#view2',false,false,'slide');">Next view</a>
</footer>
</div>
<div class="view active" id="view2">
<header>
<h1 class="title">view 22</h1>
<a class="button icon menuButton" style="float:right"></a>
</header>
<div class="pages">
<div class="panel active" id="page22" >
<p>this is page in view 2</p>
</div>
</div>
<footer>
<a href="#viewMain" data-transition="up-reveal:back" class="icon home">back to main view</a>
</footer>
</div>
</body>
需要注意的是，view中的panel元素，還需要包裹一層pages元素，即使只有一個panel。
代碼中同時顯示了切換view的三種方式：
- 編輯時，通過添加active 類名來指定默認view
- 運行時，通過錨定view的id來切換
- 運行時，通過js函數loadContent
三、自定義themes：
af3中默認使用系統theme，如果你需要自定義theme，需要設定useOSThemes為false
$.afui.useOSThemes=false; //This must be set before $(document).ready()
另外，還需要在view之外再包裹一層id為afui的div元素，並指定相應theme的class。af3內置的theme有：
ios，ios7，android(light,dark),win8(light dark),bb/*blackberry*/,tizen
四、總體代碼：
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>LearAF3</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="js/af3.0/af.ui.base.css" /> <link rel="stylesheet" type="text/css" href="js/af3.0/af.ui.css" /> <link rel="stylesheet" type="text/css" href="js/af3.0/icons.min.css" /> <script src="js/libs/jquery/jquery-2.1.1.min.js"></script> <script src="js/libs/fastclick/fastclick-1.0.3.min.js"></script> <script src="js/af3.0/appframework.ui.js"></script> <script> $.afui.useOSThemes=false; </script> </head> <body> <div id="afui" class="bb"> <div id="splashscreen"> <h1>Lear App Framework 3</h1> <span class="icon loading">loading...</span> </div> <div class="view" id="viewMain"> <header> <h1 class="title">Main view</h1> <a class="button icon menuButton" style="float:right"></a> </header> <div class="pages"> <div class="panel" id="page1"> <p>this is page in main view</p> </div> </div> <footer> <a data-transition="up" class="icon html5" onclick="$.afui.loadContent('#view2',false,false,'up');">Next view</a> </footer> </div> <div class="view active" id="view2"> <header> <h1 class="title">view 22</h1> <a class="button icon menuButton" style="float:right"></a> </header> <div class="pages"> <div class="panel active" id="page2" > <p>this is page in view 2</p> </div> </div> <footer> <a href="#viewMain" data-transition="up:back" class="icon home">back to main view</a> </footer> </div> </div> </body> </html>
五、導航歷史（history）：
af3為每個view，單獨記錄頁面（panel）的瀏覽記錄。
目前發現af3中每個view下面必須指出默認panel，否則不顯示默認panel。並且需要通過給panel添加active類名，而不是通過data-selected="true"
[譯]Intel App Framework 3.0的變化 [Learn AF3系列] 第二章 學習App Framework 3.0的組件一：View