jquery mobile导航和多页面固定导航

在使用一些手机应用的时候,在底部会有一个固定的导航或者叫做一组按钮,不会随着页面的切换而进行切换。使用jquerymobile我们也可以实现这样的效果,步骤如下:

1、在所有的页面中出现相同的footer

2、这些footer使用相同的data-id

3、在激活的页面对应的导航上添加两个class:ui-btn-active ui-state-persist

<div data-role=”page”>     

    <div data-role=”page”>     

    <div data-role=”header”><h1>a</h1></div>         

    <div data-role=”content”>     

    <p>     

        This is the a Page     

    </p>     

    </div>     

    <div data-role=”footer” data-position=”fixed” data-id=”footernav”>     

        <div data-role=”navbar”>     

            <ul>     

                <li><a href=”a.html” class=”ui-btn-active ui-state-persist”>a</a></li>     

                <li><a href=”b.html”>b</a></li>     

            </ul>     

        </div>     

    </div>         

</div>     

</div>

发表评论

邮箱地址不会被公开。 必填项已用*标注