1

複数のページ (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 ハッキング方法を試しました。

$("#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 を垂直方向に集中化することはそれほど難しいことではないでしょうか? 誰か助けてください。どうもありがとうございました！

4

4 に答える 4

6

jQM のため、正しいコンテンツ サイズを見つけるのは難しい場合があり、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){
于 2013-01-17T13:24:25.090 に答える
5

以下は、複数の 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/

于 2014-01-30T13:32:32.140 に答える
1

答えてくれてありがとう。私にとっては、トリガーが機能しません。新しいjqueryバージョンが原因のようです

$('#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);
});

したがって、以下は私のために機能する修正されたコードです（トリガーのみを変更しました）

$(document).on('pageshow', '#index', function(event) {
$('#index-content').css('margin-top',($(window).height() - $('[data-role=header]').height() - $('[data-role=footer]').height() - $('#index-content').outerHeight())/2);
});
于 2014-04-02T10:47:44.213 に答える