Intel App Framework（原jqMobi）是用来开发hybrid app的开源免费框架，被intel收编之后发布了最新的2.1版本，最近正在学习。af的所谓程序结构，就是AF网页的架构，大家直接看代码就都清楚了（因为我加了注释：^_^）。

<!doctype html>

<!-- 肯定必须是html5页面-->

<html>

<head>

    <meta charset="utf-8">

　　<!-- 移动应用必备：自适应设备宽度，锁定页面缩放 -->

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

　　<!-- 引入af的css -->

    <link rel="stylesheet" type="text/css" href="js/af2.1/css/af.ui.min.css" />

    <link rel="stylesheet" type="text/css" href="js/af2.1/css/icons.min.css" />

　　<!-- af基础脚本文件 -->

   <script src="js/af2.1/appframework.js"></script>

　　<!-- 如果需要使用jquery，新版已经支持，可以将上面的一行换为下面两行：

　　<script src="js/jquery.js"></script>

　　<script src="js/af2.1/jq.appframework.js"></script>

　　-->

    <script src="js/af2.1/ui/appframework.ui.js"></script>

    <script src="js/af2.1/af.plugins.min.js"></script>

    <style>

    .atright{float:right;}

    .atleft{float:left;}

    </style>

</head>

<body>

    <div id="afui" class="android"><!-- 应用页面主体必须包含在id为“afui”的div或body内 -->

        <header id="headerMain" ><!--header页面上方的导航条:) 可以通过设置id="header"使之成为默认的header（panel不需要设置）。另外，可以有多个header，此时panel中需要用data-header属性指定，或者在panel中内嵌header也可以-->

            <a class="button backButton atleft">返回</a>            

            <a class="button icon settings atright">设置</a>

            <h1>First App build on AF</h1><!--内容会被 子页面（panel）的data-title属性替换 -->            

        </header>

        

        <div id="content"><!--ok，主要内容在这儿，所有的页面（panel）都应该在这个id为“content”的div里面 -->

            <!-- 页面一 data-nav设置的是左边的sidemenu data-aside设置右边的sidemenu-->

　　　　　　　<div id="pageSettings" class="panel upage" data-nav="leftMenu" data-aside="rightMenu2" data-title="Settings" data-header="headerMain" >

                <p>这是设置页面</p>

                <footer id="footer3">

                    <a class="icon home" href="#pageMain"></a>            

                    <a class="icon error" href="#">Footer3</a>

                </footer>  

            </div>

　　　　　　　<!-- 页面二，这才是主页面，注意selected属性 -->

            <div id="pageMain" class="panel upage" data-nav="leftMenu" data-aside="rightMenu"  data-title="AppAF" selected="true" data-header="headerMain"data-footer="footerMain">

                <p>这是主页面</p>

            </div>

            

        </div>

        <footer id="footerMain"><!--footer页面下方的导航条:) 如同header一样，你可以通过设置id="navbar"来声明为默认的footer导航条（panel不需要设置）。同样 可以有多个footer，panel中需要用data-footer属性指定，或者在panel中内嵌footer-->           

            <a class="icon settings" href="#pageSettings"></a>

        </footer>        

        <footer id="footer2">

            <a class="icon home" href="#pageMain"></a>            

        </footer>        

        <nav id="leftMenu">

            <h1>Left Menu</h1>

        </nav>

        <aside id="rightMenu">

            <h1>Right Menu</h1>

        </aside>

        <aside id="rightMenu2">

            <h1>2nd Right Menu</h1>

        </aside>

    </div>

    <script>

        $.ui.ready(function(){

            /* 由于af在宽度大于一定值得设备上（768）会默认总是显示左边的sidemenu，如果要禁止需要禁止splitView设置*/

            $.ui.splitView=false;//不起作用，要在ui.lanuch被调用之前才行，此时应该调用下面的方法

            $.ui.disableSplitView();

        });

    </script>

</body>

</html>

 

下一节学习af中的page，也就是panel。

【Intel AF 2.1 学习笔记一】AF程序结构的更多相关文章

  1. C#学习笔记二:C#程序结构

    从最简单的HelloWorld开始入手,这是一个最低限度的C#程序结构. C# Hello World 示例 一个C#程序主要由以下几部分组成: 命名空间声明 一个类 类方法 类属性 一个Main方法 ...

  2. Objective-C 学习笔记(一) 语言程序结构

    Objective-C语言程序结构 “Hello World”简单示例 #import <Foundation/Foundation.h> //预处理命令,它告诉Objective-C语言 ...

  3. WP8 学习笔记(002_应用程序结构)

    下图是微软官方给出的WP8应用程序执行顺序: 在App.XAML.CS中,有程序主要步骤的函数 // 应用程序启动(例如,从“开始”菜单启动)时执行的代码 // 此代码在重新激活应用程序时不执行 pr ...

  4. java之jvm学习笔记十三(jvm基本结构)

    java之jvm学习笔记十三(jvm基本结构) 这一节,主要来学习jvm的基本结构,也就是概述.说是概述,内容很多,而且概念量也很大,不过关于概念方面,你不用担心,我完全有信心,让概念在你的脑子里变成 ...

  5. DeepLearning.ai学习笔记（三）结构化机器学习项目--week2机器学习策略(2)

    一.进行误差分析 很多时候我们发现训练出来的模型有误差后,就会一股脑的想着法子去减少误差.想法固然好,但是有点headlong~ 这节视频中吴大大介绍了一个比较科学的方法,具体的看下面的例子 还是以猫 ...

  6. muduo学习笔记(二)Reactor关键结构

    目录 muduo学习笔记(二)Reactor关键结构 Reactor简述 什么是Reactor Reactor模型的优缺点 poll简述 poll使用样例 muduo Reactor关键结构 Chan ...

  7. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  8. swift学习笔记3——类、结构体、枚举

    之前学习swift时的个人笔记,根据github:the-swift-programming-language-in-chinese学习.总结,将重要的内容提取,加以理解后整理为学习笔记,方便以后查询 ...

  9. linux学习笔记：vim程序编辑器—vim的使用

    注:以下是学习<鸟哥的linux私房菜>(第三版)的学习笔记,纯属个人学习记录. 2018-11-19 一.学习vim的原因 很多软件的编辑接口都会主动调用vi 二.vim的使用 (1)v ...

随机推荐

  1. 3. CNN卷积网络-反向更新

    1. CNN卷积网络-初识 2. CNN卷积网络-前向传播算法 3. CNN卷积网络-反向更新 1. 前言 如果读者详细的了解了DNN神经网络的反向更新,那对我们今天的学习会有很大的帮助.我们的CNN ...

  2. 一个JS引发的血案

    转载一篇大师傅的文章: 原文链接:http://xn--i2r.ml/index.php/2017/08/05/39.html 又到了周末,闲来无聊,挖挖补天 找了个目标,发现一个站 查看源码发现一个 ...

  3. 启动Tomcat报错：class path resource cannot be opened

    直接原因:WEB-INF/classes下没有文件,即eclipse项目文件没有发布到Tomcat的文件夹. 根本原因:项目的Java Build Path /Libraries 里tomcat 和j ...

  4. 微服务之springCloud-hystrix参数详解（八）

    简介 上节我们讨论了hystrix+feign+ribbon,但是可能很多人都知道hystrix还有线程隔离,信号量隔离,等等各种参数配置,在这几就记录下hystrix的参数, 一.hystrix参数 ...

  5. Caused by: java.io.IOException: Added a key not lexically larger than previous.

    为了重复这个实验,遇到不少坑 https://www.iteblog.com/archives/1889.html /** * Created by Administrator on 2017/8/1 ...

  6. WPF中的数据驱动

    在WPF出现之前,Win Form,ASP.NET等技术均采用“事件驱动”理念,这种由“事件-订阅-事件处理器”关系交织在一起构成的程序,景观可以使用MVC.MVP等设计模式,但一不小心就会使界面逻辑 ...

  7. git 管理 Linux 文件系统

    git 管理 Linux 文件系统有两个问题,第一个是 Linux 根文件系统的 root 权限问题,第二个就是git不上传空文件问题. 一. root权限问题的话就得在 root 用户下git , ...

  8. 简析TCP的三次握手与四次分手<转>

    TCP是什么? 具体的关于TCP是什么,我不打算详细的说了:当你看到这篇文章时,我想你也知道TCP的概念了,想要更深入的了解TCP的工作,我们就继续.它只是一个超级麻烦的协议,而它又是互联网的基础,也 ...

  9. spring 加载jar包中的配置文件

    package com.xxx.ssptsppt.dataexchange.utils; import com.xxx.maybee.engine.utils.FileUtil; import com ...

  10. Redis 2.8.18 安装报错 error: jemalloc/jemalloc.h: No such file or directory解决方法

    http://www.phperz.com/article/14/1219/42002.html ——————————————————————————————————————————————————