1

固定ヘッダー機能に関して、次のページを模倣しようとしています。 http://jquerymobile.com/demos/1.0.1/docs/toolbars/bars-fixed.html

ただし、jquerymobile の新しいリリースでは、スクロール時のフェードイン/フェードアウト機能が削除されたと思います。

新しい jquerymobile リリースでその動作を模倣する方法はありますか?

4

2 に答える 2

1

ツールバーを使用している場合は、タグにdata-position="fixed"いくつか追加して、ツールバーを「切り替え」できるようにする必要があります。data-attributes

<div data-role="footer" data-tap-toggle="true" data-transition="fade">
    ...
</div>

ドキュメント: http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed-options.html

これはタップでは機能しますが、スクロールでは独自のイベント ハンドラーを使用する必要があると思います。

//when a user starts to scroll, hide the toolbar(s)
$(window).bind('scrollstart', function () {
    $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('hide');

//when a user stops a scroll, show the toolbar(s)
}).bind('scrollstop', function () {
    $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('show');
});

ここにデモがあります：http://jsfiddle.net/BCTpK/

scrollstartデモを作成した後、タイムアウトを設定してとscrollstopイベントが頻繁に発生しないようにすることは良い考えであることに気付きました。

var timer = null;

//when a user starts to scroll, hide the toolbar(s)
$(window).bind('scrollstart', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('hide');
    }, 100);

//when a user stops a scroll, show the toolbar(s)
}).bind('scrollstop', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('show');
    }, 100);
});​
于 2012-04-26T19:05:20.767 に答える
0

この動作をツールバーに使用しますか？

次に、JQM1.1を確認することもできます。リリースノートには、古い固定ツールバーの動作を使用するためのポリフィルへのリンクが含まれています。

これがプレビューURLとGithubリポジトリです

他の要素（ヘッダー/フッター、好きな要素）の動作を使用したい場合は、polyfillから関数を取得して、show（）で再配置し、次のように使用しています。

// reposition before showing - based on JQM fixedtoolbar polyfill   
var $popPanel = YOUR_ELEMENT(S) to be repositioned
$popPanel.jqmData("fixed") == "top" ? 
    $popPanel.css( "top", $( window ).scrollTop() + "px" ) :
        $popPanel.css( "bottom", $wrap.outerHeight() - $( window ).scrollTop() - $.mobile.getScreenHeight() + "px" );

これにより、 data-fixed = "top/bottom"を追加する必要がある要素がリポジトリに追加されます。

移行するには-私が使用している要素で：

// show $popPanel
$popPanel
    // add transition class - this is using slide
    .addClass('in')
    .show('fast')
// clean up
window.setTimeout( function() {
    $popPanel.removeClass('in');
    });

私はJQM1.0のこの機能が好きでしたが、完全なold-fixed-toolbarsハンドラーが必要なのと比べて、この1つのスニペットだけでうまくいくので、ポリフィルはさらに優れていると思います。

于 2012-04-26T21:34:55.913 に答える