AppFramework3.0学习（1）

    最近公司做项目，用到了AppFramework，在这里分享下自己的理解和使用的心得，也当做自己的备忘。

    AppFramework的前身是jqmobi，关于这个框架的简介，可以参考这两篇文章：

•     http://www.it165.net/pro/html/201410/24540.html

• http://blog.csdn.net/vincentblog/article/details/43541107

    

    AppFramework的页面结构

• view：一个view只能有一个header和一个footer,可以有多个pages

• header：头部，多个pages公用一个header

• pages：一个pages可以有多个panel

• panel：panel则是要显示给我们的内容

• footer：底部，多个page公用一个footer 

    示例代码

<!--目前我还只会在一个页面中使用一个view的阶段。//-->
<div class="view" id="mainview">
        <header id="global_header">
            <h1>What</h1>
        </header>

        <div class="pages">
            <!--panel是页面显示的地方//-->
            <div data-left-drawer="left" class="panel" style="background:#f0f0f0;" id="main" data-title="主界面" data-selected="true" data-include="main.html">
            </div>

        </div>
        <!--底部导航开始//-->
        <footer>
            <a href="#main" class="icon home" data-transition="slide" data-title="标签1">标签1</a>
            <a href="demo/tab2.html" class="icon user" data-transition="slide" data-title="标签2">标签2</a>
            <a href="demo/tab3.html" class="icon user" data-transition="slide" data-title="标签3">标签3</a>
        </footer>
        <!--底部导航结束//-->

    </div>

     AppFramework页面加载逻辑大概是这样的：

    1、除了首页的加载其他页面，其他页面的加载，均以ajax的形式向服务器请求，获取页面后封装在一个panel里面；

    2、如果panel设置了属性data-include（如示例代码中的id="main"的panel），在首页加载的时候，会事先通过ajax请求页面，封装在这个panel下；

    3、如果是点击加载的新页面（如示例代码中的footer下的标签2），会新建一个panel，并且通过ajax将页面加载到这个panel中，并且将href里的url，根据统一的加密算法（每个url产生一个唯一的值）生成一个值作为panel的id；

    4、页面中的anchor（a标签），如果设置了href属性值，被点击的时候，会遵循以下逻辑：

•  如果属性值是以#开头（href="#xxx"），将会在页面搜寻id="xxx"的panel，这个一般用于设置了data-include的pannel；

• 如果属性值是url，根据url计算出一个id，根据id在页面中搜索panel，如果存在，直接显示；如果不存在，重新ajax请求；

    5、panel默认是隐藏的（display:none），只有加上class  active才会显示（display:block）；如果设置了属性data-selected="true"，页面加载时会默认将panel显示出来；

    6、header默认显示panel的data-title属性里的值，如果没有定义data-title，默认显示路径；

    7、panel的data-title属性，来自被点击的anchor（a标签）的data-title属性，如果没有定义data-title，默认显示路径；

    。。。未完待续

    写得有点乱，请见谅