2

フルスクリーン ヘッダーを使用したい jQuery モバイル プロジェクトに取り組んでいdata-position="fixed" data-fullscreen="true"ます。私が直面している問題は、ヘッダーがコンテンツに割り込んでいるということです。

ヘッダーの動きに合わせてコンテンツを移動させる方法を見つけようとしています。したがって、ヘッダーが表示されている場合はコンテンツが押し下げられるため、ヘッダーが表示されていない場合はコンテンツが押し上げられて空白が最小限に抑えられます。

これを行う唯一の方法はmargin-top、 data-role を使用して div の css ルールを動的に変更することcontentです。これは簡単だと思いましたが、そうではありません。

これが私のhtmlです：

<div data-role="page" id="index">
    <div data-role="header" data-position="fixed" data-fullscreen="true" id='header'>Some Header Stuff</div>
    <div data-role="content" id="content">Some Content Stuff</div>
    <div data-role="footer" data-position="fixed" data-fullscreen="true">Some Footer Stuff</div>
</div>

これまでのところ、次のjQueryソリューションを試してみましたが、うまくいきませんでした:

jQuery(document).on('pagecreate', function () {
    $("#content").css('margin-top', $('#header').height());
});

と

$(document).on('pageshow', '#index',function(e,data){   
    $('#content').height(getRealContentHeight()); 
});

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

これらのソリューションは両方とも、ヘッダーの高さプロパティをキャプチャしようとします。私が知ることができることから、ヘッダーの設定がdata-position="fixed" data-fullscreen="true"常に 0 の高さを示しています。

たくさんの<br/>タグを追加したり、空の div を追加したりするなど、他の解決策を見てきました。これらのソリューションはすべて、ヘッダーが表示されていないときに空の空白を保持します。ヘッダーが表示されているかどうかに基づいて、実際にヘッダーのコンテンツを上下に切り替える方法を知っている人はいますか?

4

1 に答える 1

0

優れたソリューションを考え出した

$(document).on('pageshow', function () {
    $("#content").css('margin-top', $('#header').height());
});

$(document).on('vmouseup', '#index',function () {
    setTimeout(function() {
        $("#content").css('margin-top', $('#header').height());
    }, 300);    
});

上記のコードは、ページ作成時にコンテンツのマージンを設定し、ユーザーがどこかをクリックするとマージンを再設定しますが、通常はヘッダーが折りたたまれます。

于 2015-05-15T20:14:04.917 に答える