Firefox OS可以从带有Building Blocks的抽屉中进行选择

时间:2013-10-14 21:22:17

标签: html5 firefox firefox-os drawer buildingblocks

我正试图在我的Firefox OS应用程序中进行抽屉菜单,基于Firefox团队的Bulding Blocks:

http://buildingfirefoxos.com/building-blocks/drawer.html

目前我有一个显示和隐藏菜单的菜单按钮,但当用户点击菜单中的其他项目时,我无法更改为其他页面。

使用此代码,我可以在应用程序启动时看到第1页,但是当我在菜单中选择“第2页”按钮时,页面2未加载

<section id="index" data-position="current">
    <section data-type="sidebar">
    <header>
        <menu type="toolbar" />
        <a href="#"></a>
        </menu>
        <h1>My Menu</h1>
    </header>
    <nav>
        <ul>
            <li>
                <a href="#page1">page 1</a>
            </li>
            <li>
                <a href="#page2">page 2</a>
            </li>
        </ul>
    </nav>
</section>

<!-- Page 1 -->
<section id="drawer" class="skin-dark" role="region">
    <header class="fixed">
        <a href="#"><span class="icon icon-menu">hide sidebar</span></a>
        <a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
        <h1>Page 1</h1>
    </header>
    <article class="content scrollable header">
        <section id="page1_list" data-type="list"></section>
    </article>
</section>

<!-- Page 2 -->
<section id="drawer" class="skin-dark" role="region">
    <header class="fixed">
        <a href="#"><span class="icon icon-menu">hide sidebar</span></a>
        <a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
        <h1>Page 2</h1>
    </header>
    <article class="content scrollable header">
        <section id="page2_list" data-type="list"></section>
    </article>
</section>

1 个答案:

答案 0 :(得分:0)

我有一个使用buildingblock(draw)的例子

https://github.com/marti1125/Earthquake

尝试复制此内容:https://github.com/marti1125/Earthquake/blob/master/css/app.css