appframework3.0--初識

appframework3.0–初識

---

作者：木塵2015-02-05
交流羣：333492644

以前項目一直用的2.0也寫過一些博客，後來因爲項目比較忙所以落下了，現在項目即將上線，對於2.0我的項目雖然完成了，但是效果的確有些差強人意，有時間了，所以就開始研究3.0了，雖然3.0還沒有發佈，但是他的確比2.0要好的多，不管是從速度上還是從結構上都有了很大的突破

• 官網地址：http://app-framework-software.intel.com/30/
• github地址：https://github.com/01org/appframework/tree/3.0beta

---

版本介紹

1. Query selector library - 用 jQuery* or Zepto* 代替
2. 只支持 Android* 4+ , iOS* 6+ , WP* 8 , FF* OS ， Blackberry* 10
3. 不再提供“Touchlayer”，使Fastclick（https://github.com/ftlabs/fastclick）代替
4. 僅使用自然滾動。如果你需要一個JS滾動，有以下兩個選擇
   1) FTScroller（https://github.com/ftlabs/ftscroller）
   2) iScroll（http://cubiq.org/iscroll-5）

---

支持MVC

1. Backbone.js
2. angular.js
3. react.js
4. …

頁面結構

• view：一個view只能有一個header和一個footer,可以有多個page
• header：頭部，多個page公用一個header
• page：一個page可以有多個panel
• panel：panel則是要顯示給我們的內容
• footer：底部，多個page公用一個footer
  

  例子：(Hello World~!)

<div class="view" id="mainView">
    <header><h1>My Header</h1></header>
    <div class="pages">
        <div class="panel" data-title="main" id="main" selected="true">
            Hello World~!
        </div>
    </div>
    <footer>
        <a href="#main" class="icon home">Home</a>
    </footer>
</div>

view

每一個都有一個history記錄着歷史跳轉路徑，並生成返回按鈕 跳轉方式：

<a href="#login" class="button" data-transition="up-reveal">Login</a>

過度動畫：可以使用消失動畫如：up-reveal:dismiss

• up-reveal
• down-reveal
• slide
• popup
• ….

panel

屬性：

• selected=”true” 初始化後顯示的panel
• data- -include=”filename.html” 頁面分離，或遠程獲取頁面
• data-tab=”anchor_id” panel的id，可以通過id跳轉至該panel
  例子：

<div class="panel" id="login" selected="true"> </div> <!-- Default loaded panel -->

<div class="panel" id="login" data-tab="settings"> </div> <!-- Change the selected tab to settings -->

<div class="panel" id="login" data-defer="app/login"> </div> <!-- Load the login content from the HTTP request of app/login -->