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. CentIOS PHP 扩展库

    1.GD库 yum -y install php-gd

  2. ios 让textView被键盘挡住上移

    注册键盘通知 #pragma mark - 键盘通知 - (void)addNoticeForKeyboard { //注册键盘出现的通知 [[NSNotificationCenter default ...

  3. python keras 神经网络框架 的使用以及实例

    先吐槽一下这个基于theano的keras有多难装,反正我是在windows下折腾到不行(需要64bit,vs c++2015),所以自己装了一个双系统.这才感到linux系统的强大之初,难怪大公司都 ...

  4. 算法篇---Shell排序(希尔)算法

    先取一个小于n的整数d1作为第一个增量,把文件的全部记录分成d1个组.所有距离为dl的倍数的记录放在同一个组中.先在各组内进行直接插入排序:然后,取第二个增量d2<d1重复上述的分组和排序,直至 ...

  5. [转]关于setInterval只执行一次的原因

    原文地址:https://blog.csdn.net/skyblacktoday/article/details/79374613 我在做一个demo的时候发现的,之前可能遇到过到时没有记住,也没有写 ...

  6. 【WPF】修改数据层ViewModel后，UI界面未同步更新

    界面:WPF(MVVM)中将集合类控件ItemsControl的ItemsSource绑定到了ViewModel中的ObservableCollection列表,ItemsControl.ItemTe ...

  7. DLL入门

    DllTest工程 QMath.h #pragma once #ifdef API_EXPORT #define DLL_CLASS __declspec(dllexport) #define DLL ...

  8. H2O中的随机森林算法介绍及其项目实战（python实现）

    H2O中的随机森林算法介绍及其项目实战(python实现) 包的引入:from h2o.estimators.random_forest import H2ORandomForestEstimator ...

  9. .NetCore程序发布到IIS上面

    一.概述 在传统的.NET Framework中,ASP.NET程序发布到IIS上面,是由IIS的工作进程(w3wp.exe)托管的,在任务管理器中可以找到该进程.在ASP.NET Core程序中不再 ...

  10. thymeleaf 解析html时，出现 SAXParseException: The content of elements must consist of well-formed characte

    thymeleaf 解析html时,出现 SAXParseException: The content of elements must consist of well-formed characte ...