【Agile框架（一）】首页布局

布局思路：

1、采用底部的nav进行布局

<nav class="bar bar-tab">
            <a class="tab-item active" href="#home_article" data-target="article">
                <span class="icon icon-home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="#householdAcceptance_article" data-target="article">
                <span class="icon icon-list"></span>
                <span class="tab-label">分户验收</span>
            </a>
            <a class="tab-item" href="#officialDeliver_article" data-target="article">
                <span class="icon icon-stop"></span>
                <span class="tab-label">正式交付</span>
            </a>
            <a class="tab-item" href="#dailyReception_article" data-target="article">
                <span class="icon icon-pages"></span>
                <span class="tab-label">日常接待</span>
            </a>
            <a class="tab-item" href="#statisticsAnalysis_article" data-target="article">
                <span class="icon icon-pages"></span>
                <span class="tab-label">统计与分析</span>
            </a>
        </nav>

 

2、内容的切换（即data-target）采用对象是article（见上一步中的data-target属性的值）

　　需要注意的是：article是没有返回（back）的方法的，section才有。研究了下appStore等的布局，首页的切换都采取的是底部nav切换，并没有顶部的回退，因为也没有这个必要了嘛。

3、上一步中首页内容article的切换：是在程序启用时调用A.launch()方法实现的---因为把article的文件放在了html\目录中。

　　

$(function () {
    A.launch({
        basePagePath: 'html/',
        showPageLoading: false,
        isAutoRender : true
    });

    //首页加载首页内容
    A.Router.showArticle("html/home_article.html");
});

 

大致就这3步，需要注意的几点：

1、来自官方的API说明：“为了有效的管理所有的Section，Agile设定了一个id为#section_container的容器，所有Section位于此容器之下。”

否则就可能出现在访问首页时，url后加“#undefined”的问题。

查了下agile的源码，可以解释上面的说明：

在A.Router对象中的_initIndex方法：