10

私の古い質問に賞金をかける方法を見つけられなかったので、おそらくバグだったので再投稿しています。

短いバージョン: PhoneGap + JQM アプリケーションで、フッターのようにページ遷移間でその場に留まる (決して移動しない) 永続的なヘッダーが必要です。

長いバージョン: 最初に、私は jQuery と JQM にまったく慣れていないので、私が犯した初心者の間違いを指摘してください。

アプリケーションの異なるページ間で持続するヘッダーを取得しようとしています。ユーザーがページ間を移動するたびに固定されるフッターのようなものでなければなりません。永続的なフッターは、data-role="footer" data-id="(一貫した id)" data-position="fixed" を使用して実現されました。それはかなりうまく機能しました（ランダムな不具合が発生し、数秒後に自動的に修正されます）。私が探しているものの詳細については、ここの「永続的なフッター」を参照してください: http://jquerymobile.com/test/docs/#/test/docs/toolbars/docs-footers.html

また、下のリンクにある固定フッターの例を参照してください。フッターでアイテムを選択すると完全に新しいページに遷移するが、フッターは動かないことを確認してください: http://jquerymobile.com/test/docs/#/test/docs/toolbars/footer-persist-a.html

今、私は同じことをしようとしていますが、アプリケーションの下部ではなく上部に配置したいと考えています。私は次のことを試しました：

  • フッターをページの上部に移動します (jQuery でキャッチするタグがわかりません。いくつかの jQuery クラスを利用して div.(jQuery クラス) を試しましたが、うまくいきませんでした。FireBug を使用して、それが「トップ」CSS 属性であると判断しましたそれを変更する必要があります。

各ページの HTML:

<div data-role="footer" data-position="fixed" data-id="header">
<img src="images/bgheader.png" />
</div>

JavaScript:

$('div.ui-footer').css('top', '0px');
$('div.ui-footer-fixed').css('top', '0px');
$('div.fade').css('top', '0px');
$('div.ui-fixed-overlay').css('top', '0px');
$('div.ui-bar-a').css('top', '0px');
  • data-role="header" を使用します (フッターのように持続しません)。このメソッドは、必要なヘッダーを作成します (CSS の一部を上書きしたため) が、ページ間を移動するときにヘッダーが上部に維持されません。JQM のドキュメントには、永続的なヘッダーをサポートしているとは記載されていませんが、永続的なフッターはサポートされていると記載されています。

各ページの HTML:

<div data-role="header" data-position="fixed" data-id="header" id="header" data-backbtn="false">
<img src="images/bgheader.png" />
</div>
4

10 に答える 10

2

私はこの問題に対して数日間頭を悩ませてきましたが、Google が役に立たなかったのは一度だけです。私は最終的に次の解決策を思いつきました。トランジションが始まる前にヘッダー HTML を新しいページにコピーし、トランジションが完了すると前のページからコードを削除します。ヘッダーとフッターはページ遷移に合わせて移動しますが、ネストされたリストをナビゲートしている間も保持されます。

// dynamically move the header and footer between pages on load events
$('div.ui-page').live('pagebeforeshow', function(event, ui) {
    // avoid duplicating the header on the first page load
    if (ui.prevPage.length == 0) return;

    // remove the jQuery Mobile-generated header
    $('.ui-header').addClass('to-remove-now');
    $('#header').removeClass('to-remove-now');
    $('.to-remove-now').remove();

    // grab the code from the current header and footer
    header = $('#header')[0].outerHTML;
    footer = $('#footer')[0].outerHTML;

    // mark the existing header and footer for deletion
    $('#header').addClass('to-remove');
    $('#footer').addClass('to-remove');

    // prepend the header and append the footer to the generated HTML
    event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer;
});

// remove header from previous page 
$('div.ui-page').live('pagehide', function(event, ui) {
    $('.to-remove').remove();
});

id="header"次に、ヘッダー div とフッターに追加し、id="footer"通常どおりコンテンツに配置します。

于 2011-10-19T18:58:19.440 に答える
2

少しのjqueryでうまくいきます

<script type="text/javascript">
    $(document).ready(function() {
      $('#lpage1:first').addClass('ui-btn-active'); //set the first tab as active   
      firstContent=$('#content1'); //defining selectors
      secondContent=$('#content2'); 
      secondContent.hide(); //hide the second content division
    });

    // show only the first content div
    function showContent1() { 
        firstContent.show();
        secondContent.hide();
    }
    function showContent2() {
        firstContent.hide();
        secondContent.show();
    }

    //clicking on tab 2 
    $('#lpage2').live('tap',function(event){
        //alert("click");
        showContent2();
    });
</script>
<body> 
<!-- Start of first page -->
<div data-role="page" id="page1">

    <div data-role="header" data-position="fixed">
        <h1>Foo</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#" id="lpage1" data-transition="pop">Home<br/>&nbsp;</a></li>
                <li><a href="#" id="lpage2" data-transition="pop">My<br/>Profile</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

    <!-- page1 -->
    <div data-role="content" id="content1"> 
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <!-- page2 -->
    <div data-role="content" id="content2"> 
        <p>I'm second in the source order so I'm shown as the page.</p>     
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
于 2011-08-25T02:26:38.807 に答える
1

ここにフッターを使用してこれを行う例があります：http： //jquerymobile.com/demos/1.0/docs/toolbars/footer-persist-a.html

試してみる機会はありませんが、ヘッダーでも同じように動作するはずです。

于 2012-01-25T17:45:52.653 に答える
1

次の css をページまたは css ファイルの末尾に追加します。

このコードをモバイル デバイスでテストしていないことに注意してください。

 <style type="text/css">
    .ui-header {
        position: fixed !important;
        top: 0 !important;
        z-index: 99;
    }
    .ui-content {
        margin-top: 35px;
    }
</style>
于 2011-06-16T13:29:40.450 に答える
1

1) jquery.js の他に、jquerymobile.js および .css ファイルをダウンロードして、jquery.easing.1.3.js、jquery.mobile.scrollview.js、および scrollview.js を含めます。（グーグル）

2) 以下のスタイル属性を持つ標準ヘッダー、リストビュー、およびフッター:

<div id="home" data-role="page">...</div>
<div data-role="content"><ul data-role="listview"><li>List item 1</li></ul></div>
<div data-role="footer" style="position: fixed;bottom: 0px;">...</div>

ここで詳しく説明します。

于 2011-09-16T18:05:56.440 に答える
1

こんにちは遅いかもしれませんが、これは私にとってはうまくいきました。

[data-role=page]
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    overflow: scroll;
    margin: 0 auto -40px;
}
.footerPlaceHolder
{
    height: 40px;
}
[data-role=footer]{height:40px; bottom:0; position:fixed !important; top: auto !important; width:100%; z-index: 9999;}

あなたのhtml

<div data-role="page">
    ....Your content....
    <div class="footerPlaceHolder"></div>
    <div data-role="footer"> 
        <a href="#" data-icon="arrow-l" class="ui-btn-left">Back</a>
        <a href="#" onclick="settingsClicked(this);" data-icon="gear" class="ui-btn-right">Settings</a> 
    </div>
</div>

PS私はこのこと、特にcssが得意ではないことに注意してください。すべてのコメントは大歓迎です。

ありがとう。

于 2012-05-21T21:55:33.627 に答える
0

単一の共有ヘッダーでうまくいく場合は、メインページでヘッダーを指定できます:(注：jQueryは関係ありません、申し訳ありませんが「jQueryを使用してください」みんな:-p）

<div class="header">
    <div class="logo"></div>
    <div class="menu"></div>
</div>
<div data-role="page" class="page" id="loading">
    <div data-role="content">
        <h1>Your Page</h1>
    </div>
</div>

次に、CSSを使用して各ページの上部を押し下げます。

.ui-page{
    top:64px !important;
}

その重要性には満足していませんが、jQueryMがCSSで使用しているルールは、IDを使用しない場合に最も高い特異性を持っています。すべてのIDを知っている場合は、おそらくそれがなくても実行できます...他のより良いルールを自由に提案してください。

于 2013-01-22T00:36:30.760 に答える
0

私は jquery mobile source を調べようとしていますが、永続的なフッターの魔法はここで起こると思います。

$( document ).delegate( ".ui-page", "pagebeforeshow", function( event, ui ) {
            var page = $( event.target ),
                footer = page.find( ":jqmData(role='footer')" ),
                id = footer.data( "id" ),
                prevPage = ui.prevPage,
                prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ),
                prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id;

            if ( id && prevFooterMatches ) {
                stickyFooter = footer;
                setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
            }
        })
        .delegate( ".ui-page", "pageshow", function( event, ui ) {
            var $this = $( this );

            if ( stickyFooter && stickyFooter.length ) {
                setTimeout(function() {
                    setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
                    stickyFooter = null;
                }, 500);
            }

            $.mobile.fixedToolbars.show( true, this );
        });

追加を考えています

setTop( page.find( ":jqmData(role='header')").removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );

それに。幸運を祈ります...

于 2012-02-03T07:49:09.760 に答える
0

これは最近JQMに追加されたと思います。 http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

このリンクは、 data-id 属性を BOTH に追加できることを明確に示しています。ヘッダーとフッター。しかし、それは私にはうまくいきません。

編集:永続ヘッダーのページ遷移を有効にする必要があることに気付きました。しかし、トランジションはアプリを遅くしすぎます...

于 2013-08-16T07:11:55.293 に答える
-1

フッターとヘッダーを永続化するの下のこの例を確認してください。

于 2011-06-14T11:20:33.420 に答える