appframework入门基础知识

一个最基本的panel    


<div id="home" class="panel">
  <h3>home</h3>
  <p>Home panel</p>
</div>
   panel的属性介绍： 
    selected="true" 可以是这个panel变成默认的panel，在app启动时，用户首先看到的便是这个panel，有些类似webform中的起始页，winform中的启动项。 
    modal="true"   有点类似于模式弹出窗口，但弹出后，会占居整个屏幕，登录页面就应该使用。 
例如： 


<div class="panel" id="login" modal="true"> </div> <!-- Modal window -->


data-header="id"  自定义header 
data-footer="id"  自定义footer


data-nav="id"     左侧的导航条


data-defer="filename.html"  官方文档是可以根据设置的地址给panel加载内容。官方说可以使用远程地址，但我测试，似乎不行，但本地是可以的。远程就要涉及一个跨域访问的问题。目前还不知道如何加载远程的内容。


data-tab="anchor_id"   在此panel显示时，将选中footer中id为anchor_id的选项。


data-load="func_name"  在panel加载后，执行的方法。有点类似为winform中的formload函数，初步试验，这个方法在panel每次是当前内容时，也就是在当前页面时都会执行。


data-unload="func_name"  在panelunload后执行的方法

title="home"    官方文档没有，可以设定header的显示的内容。

<div id="navbar"> 是默认的下方导航

<aside>
                This is a chat aside 这是侧边哦——www.chishaokao.com
</aside>

这是一个侧边的文字介绍

<nav id="menu_AppFramework">

定义左侧滑动导航 通过data-nav="id"  调用

</nav>

<nav></nav>定义全局导航。

<div id="splashscreen"></div>定义加载闪屏的内容。

<div id="header">
               定义默认头部
</div>

<div id="navbar">
              定义默认底部导航
 </div>

<footer id='footerui'> 自定义底部
                <a href="#main" id='navbar_home' class='icon home'>首页 <span class='af-badge lr'>6</span></a>
                <a href="#aftransitions" id='navbar_js' class="icon stack">Trans</a>
                <a href="#afuidemo" id='navbar_ui' class="icon picture">ui</a>
                <a href="#uiapi" id='navbar_plugins' class="icon info">api</a>
 </footer>

<header id="testheader">自定义头部
                <a id="backButton" οnclick="$.ui.goBack()" class='button'>Back</a>
                    <h1>自定义header</h1>
                <a class="button icon settings" style="float:right">Button</a>
</header>