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. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  2. Android ListView的使用（三）

    前两节关于ListView的,已经使用了ArrayAdapter,SimpleAdapter了,两个比较基本的适配器 这里来用一个用的最多的一个适配器BaseAdapter. 还是先上效果图.大概和微 ...

  3. ntpd与ntpdate的区别

    之前配置ntpd的时候搜到一句话,印象很深刻,也觉得很有标题党的效果,就借鉴为标题了:“我认为有几种人是必须不招聘/裁掉的: 1 用ntpdate代替ntpd的人”但具体原因不太懂,总觉得还是用ntp ...

  4. [Linux]基本I/O重定向

    在我们设置定时任务的时候经常会使用标准输出和标准错误输出.这个在Linux是一个非常重要的概念,而且这个很有用.程序应该有数据库的来源端.数据的目的端,以及报告问题的地方,它们被称为标准输入.标准输出 ...

  5. FormWindowState.Maximized的陷阱

    MDI父窗体下面有很多子窗体.子窗体打开时都是以FormWindowState.Maximized的属性打开的,但是结果部分如意,部分奇怪. 先贴上单实例的代码: static TestForm _s ...

  6. python 核心编程 01

    特殊变量 python用下划线作为变量的前缀和后缀指定特殊变量._XXX : 不用 'from module import *' 导入, 可以认为是模块中的私有变量__XXX__ : 系统定义的名字_ ...

  7. android 避免线程的重复创建(HandlerThread、线程池）

    最近在android开发中,用到都是new Thread(){...}.start()这种方式.本来这样是可以,但是最近突然爆出Performing stop of activity that is ...

  8. css控制固定表头，兼容行列合并

    项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo. 多浏 ...

  9. 【转】Memcached之缓存雪崩，缓存穿透，缓存预热，缓存算法

    缓存雪崩 缓存雪崩可能是因为数据未加载到缓存中,或者缓存同一时间大面积的失效,从而导致所有请求都去查数据库,导致数据库CPU和内存负载过高,甚至宕机. 解决思路: 1,采用加锁计数,或者使用合理的队列 ...

  10. 自然语言交流系统 phxnet团队 创新实训 项目博客 （十三）

    对我们项目中的关键技术实现进行总结: 一.3DMax关键技术实现 1.一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. 2. 骨骼架设:首先对导入到3DM ...