[lear af3]af3应用程序的结构

  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.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>
       ...      </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的三种方式:

  1. 编辑时,通过添加active 类名来指定默认view
  2. 运行时,通过锚定view的id来切换
  3. 运行时,通过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"

时间: 2024-12-11 21:06:31

[lear af3]af3应用程序的结构的相关文章

Java程序基本结构(一)

先来吐槽下,算是空闲时间来继续写博客之旅,记录点点滴滴.说是开始着手写Java系列的文章,可是坑货儿的公司第二天就派我出差了,一搞就一个星期,而且更坑的是出差住的地方竟然是老板在出差地方买的房子,房子装修滴垃圾,而且连热水都没有(因为常年没人在那住),洗澡都是一个问题,最让人受不了的是晚上还要义务的做事,把我自己的时间都给占用(搞到晚上十一点才睡觉),因为老板比较的抠,他和我们(还有一个和我一起出差滴)一起过来滴,是盯着我们啊.fuck,我心里一肚子的火,可是没办法啊,如今常流行说遇到这样的老板

c语言学习之 程序基本结构

一个最基本的C程序由五个部分组成: 头文件 (Preprocessor commands) 函数 (function) 变量 (variable) 语句块 (statement 和 expression) 注释 (comments) 例如: #include <stdio.h> int main(){ /*my first c programming*/ printf("hello,world\n"); return 0; } c语言学习之 程序基本结构,码迷,mamico

一、程序基本结构

#region 导入命名空间 using System; using System.Collections.Generic; using System.Linq; using System.Text; #endregion // 声明命名空间 namespace _1.程序基本结构 {     /// <summary>     /// 声明一个类     /// </summary>     class Program     {         /*           * M

8.15 号 程序 选择结构作业的代码

/* 任意输入三个整数,按从大到小的顺序输出. */ #include <stdio.h> void main() { int num1,num2,num3,tmp; printf("输入任意3个整数:逗号分隔\n"); scanf("%d,%d,%d",&num1,&num2,&num3); if(num1 < num2) { tmp = num1; num1 = num2; num2 = tmp; } if(num1 &

8.15 号 程序 循环结构作业的代码

/*循环结构的演示题*/ #include <stdio.h> void main() { /* int i = 0; while(i < 100) { printf("第%-3d句:I LOVE You!\n",++i); } */ /* int order = 1; while(order != 0) { printf("I Love You!\n"); printf("还要我说一遍吗?(输入0结束)"); scanf(&q

可运行程序的结构

可运行程序的结构: 1.首先, 我们知道编程就是在写数据和处理数据的逻辑 2.一个应用程序编译以后, 得到可运行文件,这个文件就分为: 代码区, 常量区双击这个程序, 在宿主系统上会有一个应用程序载入器的软件.该程序会载入应用程序到内存中.载入内存中的时候, 程序中的全局变量, 常量等数据就開始载入. 3.内存划分为: 代码区(段), 常量区(段), BSS段, 堆区, 栈区 4.代码区存储的是代码相应的机器指令 5.常量区存储的是程序中全部的常量 6.BSS段, 用来存储全局的变量的值 7.堆

seci-log 1.13 发布 简化了安装和程序底层结构做了调整

日志分析软件 seci-log 1.13发布,简化了安装和程序底层结构做了调整.上篇文章1.12,有兴趣可以了解一下.本次升级合并了linux和windows版本.这两个版本都为绿色版本(需要提前安装java 1.7版本),放到任意目录下都可以,如果正式使用建议放到磁盘空间大的磁盘中. 本次升级简化了安装,只依赖java 1.7,日志数据只存储到es中,去掉了mysql数据库,这样就不用安装mysql了,同时得到另外的一个有优势数据占用空间减少了一半多,因为同样一条记录,mysql存储空间要大于

黑马程序员------C 语言学习笔记---程序基本结构

黑马程序员------<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS培训..Net培训</a>.期待与您交流! ------- 第二  程序基本结构 一 分支结构 01 单分支结构 格式: if(表达式) { 语句: } 其中,“表达式”为判断条件,只要表达式的值不为0,就认为条件成立. 02 双分支结构 格式: if(表达式) 语句1: else 语句

c++程序流程结构(顺序、选择、循环)break、continue

程序流程结构分类 从上到下就是顺序结构 选择结构 if语句.if-else语句(三目运算符 a>b?a:b).if -else if-else语句. switch语句 int main() { int a = 10; switch (a) { case 1: cout << "111"; break; case 2: cout << "222"; break; case 3: cout << "333";