App Framework 2.0框架学习

appframework-master项目

<script type="text/javascript" charset="utf-8" src="./ui/transitions/fade.js"></script>
...

<div title="Transitions" id="aftransitions" class="panel" data-footer='footerui'>

<a href="#aftransitions">Transitions</a>

框架是以id为唯一标识，实现功能。

 1 <nav>  //侧边栏标签
 2      <ul class="list">
 3         <li class="divider">
 4          My test    //标签名     
 5          </li>
 6          <li>
 7              <a href="#uiapi">APIs</a>  //链接id = "uiapi" 链接显示名称 APIs
 8          </li>
 9       </ul>
10 </nav>   

点击侧边栏链接名称 APIs 程序将查找id ="uiapi" 的div标签，标签内容如下

<div id="uiapi" title="App Framework UI API" class="panel" data-pull-scroller='true' data-footer='footerui'>
    <ul class="list">
       <li>
           <a href="#uigoback">返回上一页面</a>
       </li>
    </ul>
</div>

进而执行id ="uiapi" div标签内容，标签中又通过<a href="#uigoback">返回上一页面</a>链接到 id="uigoback" 的div标签，标签内容如下

<div id="uigoback" title="页面标题-返回" class="panel" data-footer='footerui'>
    <a onclick="$.ui.goBack()" class="button">返  回</a>
</div>

标签中有一个按钮，点击按钮，按钮事件响应为 onclick="$.ui.goBack()" （框架封装的方法，只要引入相应的js即可使用（/AppFramework/WebRoot/ui/appframework.ui.js））

 

当然也可以直接在页面上写入 <a onclick="$.ui.goBack()" class="button">返 回</a>

即可实现返回上一级页面功能