<div data-role="footer" data-position="fixed" data-id="footer" data-theme="d">
        <div data-role="navbar">
            <ul id="bottomBar">
                <li><a id="homeBar" href="${ctx}/mobile/" data-role="button" data-icon="home" data-ajax="false">首页</a></li>
                <li><a id="pSortBar" href="${ctx}/mobile/listNodeByLevel?treeId=1" data-role="button" data-icon="bullets" data-ajax="false">分类</a></li>
                <li><a id="cartBar" href="${ctx}/mobile/cart/list" data-role="button" data-icon="shopping-cart" data-ajax="false">购物车</a></li>
                <li><a id="myBar" href="${ctx}/mobile/user/home" data-role="button" data-icon="user" data-ajax="false">我的</a></li>
            </ul>
        </div>
    </div>
    <script>
    //文本框等获得焦点时，虚拟键盘会显示出来，footer可能会漂浮在页面中间，
    //遮挡页面，或触发点击事件，故需要判断高度，必要时隐藏footer
    var portraitScreenHeight;
    var landscapeScreenHeight;
    if(window.orientation === 0 || window.orientation === 180){
        potraitScreenHeight = $(window).height();
        landscapeScreenHeight = $(window).width();
    }
    else{
        portraitScreenHeight = $(window).width();
        landscapeScreenHeight = $(window).height();
    }
    var tolerance = 25;
    $(window).bind('resize', function(){
        if((window.orientation === 0 || window.orientation === 180) &&
        ((window.innerHeight + tolerance) < portraitScreenHeight)){
            $("[data-role=footer]").hide();
        }
        else if((window.innerHeight + tolerance) < landscapeScreenHeight){
            $("[data-role=footer]").hide();
        }
        else{
            $("[data-role=footer]").show();
        }
    });
    </script>