app Framework入门基础知识

ゞ浴缸里的玫瑰 2022-08-02 21:27 226阅读 0赞

一个最基本的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> 
    
    1、data-header="id"  自定义header 
    2、data-footer="id"  自定义footer
    3、data-nav="id"     左侧的导航条
    
    4、data-defer="filename.html"  官方文档是可以根据设置的地址给panel加载内容。官方说可以使用远程地址，但我测试，似乎不行，但本地是可以的。远程就要涉及一个跨域访问的问题。目前还不知道如何加载远程的内容。
    
    
    5、data-tab="anchor_id"   在此panel显示时，将选中footer中id为anchor_id的选项。
    
    6、data-load="func_name"  在panel加载后，执行的方法。有点类似为winform中的formload函数，初步试验，这个方法在panel每次是当前内容时，也就是在当前页面时都会执行。
    
    7、data-unload="func_name"  在panelunload后执行的方法
    
    8、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>

转载自： [http://m.blog.csdn.net/blog/qq996150938/44656251\#][http_m.blog.csdn.net_blog_qq996150938_44656251]

[http_m.blog.csdn.net_blog_qq996150938_44656251]: http://m.blog.csdn.net/blog/qq996150938/44656251#