jquery移动内容垂直居中

Question

我有几个页面(data-role ="page"),每个页面都有一个内容div(data-role ="content").我只是想在每个页面上垂直集中内容div.我尝试了纵向对齐,它没有用.我尝试获取浏览器高度并指定顶部,如下所示:

home_height = $("#home_page_content").height();
            contentTop = (browserHeight - headHeight - home_height)/2;
            $("div:jqmData(role='content')").css("position", "relative").css("top", contentTop);

但它除了主页之外没有在其他页面上工作.因为height()对隐形元素起作用,所以内容高度始终为0.

然后我尝试了一种css hacking方式来获取这样的其他内容:

$("#lounge-content").css({
                position:   'absolute',
                visibility: 'hidden',
                display:    'block'
            });
            lounge_height = $("#lounge-content").height();
            $("#lounge-content").css({
                position:   'static', // Again optional if #myDiv is already absolute
                visibility: 'visible'
            });
            loungeTop = (browserHeight - headHeight - lounge_height)/2;
            console.log("lounge height is: " + lounge_height + ", lounge top value now is: " + loungeTop);
            $("#lounge-content").css("position", "relative").css("top", loungeTop);

问题是当我打开文件时,我只能看到标题,内容被隐藏,我必须刷新浏览器才能看到一切.它工作得很好.

但这显然不是一个非常方便的方法.也许垂直集中的div应该永远不会那么困难？有人可以帮帮我吗.非常感谢你!

Answer 1

由于jQM,找到正确的内容大小可能很棘手,如果没有它,你就无法将其放在中心位置.

data-role ="content" div高度只能在pageshow页面事件中检索.每个其他实例都会为您提供内容高度0.

我给你一个工作的例子:http://jsfiddle.net/Gajotres/JmqX6/

$('#index').live('pageshow',function(e,data){    
    $('#index-content').css('margin-top',($(window).height() - $('[data-role=header]').height() - $('[data-role=footer]').height() - $('#index-content').outerHeight())/2);
});

如果您需要在jQM中实现此功能,请与我联系.

编辑(23.02.2015)

更新了jsFiddle示例:http://jsfiddle.net/udvhs0Lb/

• live()在jQuery中不再可用(因为我认为是jQuery 1.8.3)所以页面甚至绑定应该如下所示:

  $(document).on('pageshow','#index', function(e,data){  
  

Answer 2

以下适用于多个jQM页面和多个隐藏/显示的页眉和页脚:

applyVerticalCentering = function() {
    $(this).on('pagebeforeshow',function(e,data){
        $('[data-vertical-centred]').hide();
    });

    $(this).on('pageshow resize',function(e,data){    
        $('[data-vertical-centred]').each(function(index){
            var _this = $(this);
            _this.css('margin-top',
                      ($(window).height() -
                       $('header:visible').height() -
                       $('footer:visible').height() -
                       _this.outerHeight())/2);
            _this.show();
        });
    });
}();

然后在html中使用声明式样式:

<div data-role="content" data-vertical-centred>
    hi there in the middle!
    <a href="#page1" data-role="button">clicky</a>
</div>

例: http://jsfiddle.net/hungrycamel/82KX6/