GetcharZp

mui 底部导航栏的实现

<nav class="mui-bar mui-bar-tab">
    <a id="display" class="mui-tab-item {if $_GPC[\'op\'] == \'display\'}mui-active{/if}"
       href="{php echo $this->createMobileUrl(\'pj_goods\', array(\'op\' => \'display\'))}">
        <span class="mui-icon mui-icon-bars"></span>
        <span class="mui-tab-label">列表</span>
    </a>
    <a class="mui-tab-item {if $_GPC[\'op\'] == \'detail\'}mui-active{/if}" href="">
        <span class="mui-icon mui-icon-info"></span>
        <span class="mui-tab-label">详情</span>
    </a>
    <a id="home" class="mui-tab-item  {if $_GPC[\'op\'] == \'home\'}mui-active{/if}"
       href="{php echo $this->createMobileUrl(\'pj_goods\', array(\'op\' => \'home\'))}">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>

<script>
    mui(\'body\').on(\'tap\',\'a\',function(){
        document.location.href = this.href;
    });

    $(function () {
        $("#display").click(function () {
            document.location.href = this.href;
        });
        $("#home").click(function () {
            document.location.href = this.href;
        });
    });
</script>

分类:

技术点:

相关文章: