【Intel AF 2.1 学习笔记一】AF程序结构

   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。

你可能感兴趣的:(学习笔记)