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. cf 366C C. Dima and Salad（01背包）

    http://codeforces.com/contest/366/problem/C 题意:给出n个水果的两种属性a属性和b属性,然后挑选苹果,选择的苹果必须要满足这样一个条件:,现在给出n,k,要 ...

  2. JAVA-数据库之查询记录

    相关资料:<21天学通Java Web开发> ResultSet结果集1.使用exectteQuery()方法查询数据.2.exectueQuery()方法接收一个查询SQL语句.3.返回 ...

  3. android 阿里云oss上传

    购买了阿里云的oss空间,于是用它来存储图片,不过中间的使用算是出了些问题,导致很长的才成功. 不得不说,阿里云文档真的是无力吐槽...乱七八糟的.我完全是东拼西凑,才完成的图片上传功能. 走了很多的 ...

  4. Java heap space cdh 5.11.1

    在执行hive count 查询的时候报错:Error: Java heap space 解决办法是 set io.sort.mb=10; 执行hadoop的Exeample的时候报错,也是java ...

  5. 中国移动DNS IP地址大全（32个省）

    中国移动DNS IP地址,包括广东移动DNS,上海移动DNS,北京移动DNS,陕西移动DNS,江苏移动,山东移动DNS等共全国32个移动省份的DNS IP地址. DNS 用户数 国家 省份 地区 运营 ...

  6. Java编程的逻辑 (73) - 并发容器 - 写时拷贝的List和Set

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  7. ES06--elasticsearch

    ES06--elasticsearch unassigned错误解决(手动处理)   查看集群健康状态:curl -XGET http://localhost:9200/_cluster/health ...

  8. Mac 添加ll命令

    执行 vim ~/.bash_profile 该文件有可能不存在,直接编辑即可. 在文件中加入: alias ll='ls -alF' 再执行 source ~/.bash_profile

  9. linux源配置

    阿里云源配置官网:http://mirrors.aliyun.com 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS ...

  10. 安卓程序代写 网上程序代写[原]C语言基础

    C 作者:han1202012 发表于2013-11-1 19:53:29 原文链接 阅读:28 评论:0 查看评论