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. java基础篇---内存分析

    Java的并发采用的是共享内存模型(而非消息传递模型),线程之间共享程序的公共状态,线程之间通过写-读内存中的公共状态来隐式进行通信.多个线程之间是不能直接传递数据交互的,它们之间的交互只能通过共享变 ...

  2. java基础篇---Servlet过滤器

    Servlet过滤器从字面上的字意理解为景观一层次的过滤处理才达到使用的要求,而其实Servlet过滤器就是服务器与客户端请求与响应的中间层组件,在实际项目开发中Servlet过滤器主要用于对浏览器的 ...

  3. 【windows】查询占用端口的程序——记一次解决webloigc启动失败的过程

    . . . . . 我们经常使用的网络程序偶尔会遇到端口被占用的情况,但是却苦于无法找到占用端口的程序,这篇文章将教你两个命令,轻松排查端口占用问题. 关键命令: 1.查询端口占用:netstat - ...

  4. 25个必须记住的SSH命令【转】

    OpenSSH是SSH连接工具的免费版本.telnet,rlogin和ftp用户可能还没意识到他们在互联网上传输的密码是未加密的,但SSH是加密的,OpenSSH加密所有通信(包括密码),有效消除了窃 ...

  5. sql优化方法学习和总结

    首先要问自己几个问题: 哪些类型的sql会散发出坏味道? sql优化的基本原理是什么,为什么有的sql快有的慢? sql优化和底层的存储引擎关系大么? 怎么看执行过程? 优化建议 1. 缓存查询,sq ...

  6. C语言 · 交换Easy

    算法提高 交换Easy   时间限制:1.0s   内存限制:512.0MB      问题描述 给定N个整数组成的序列,每次交换当前第x个与第y个整数,要求输出最终的序列. 输入格式 第一行为序列的 ...

  7. redis的setbit命令

    redis的setbit这个bit怎么理解,配合bitcount使用? 这个是SETBIT使用方法的简单说明&lt;img src="https://pic4.zhimg.com/8 ...

  8. CPP_异常处理

    错误处理:C分散的就近处理:C++集中处理. C++错误处理机制:函数实现中若出现错误想处理,用throw抛出异常.应用程序中,用try...catch...捕获异常处理. 异常按类型捕获:int, ...

  9. java transient关键字作用，使用场景。

    java transient关键字作用,使用场景. 2016年08月31日 15:31:10 阅读数:4280 transient的作用及使用方法,官方解释为: Variables may be ma ...

  10. PCL点云配准（1）

    在逆向工程,计算机视觉,文物数字化等领域中,由于点云的不完整,旋转错位,平移错位等,使得要得到的完整的点云就需要对局部点云进行配准,为了得到被测物体的完整数据模型,需要确定一个合适的坐标系,将从各个视 ...