jQuery Mobileでフルスクリーンツールバーのトグルを検出する方法は？

固定フルスクリーンツールバーのjQuery Mobileページがあります。data-tap-toggleが有効です。jQuery Mobileでフルスクリーンツールバーのトグルを検出する方法は？

ストレートツールバーの下に、ツールバーが表示されているときにツールバーが隠れているときに上にスライドし、下にスライドするバナーが配置されています。

のjQuery Mobileはui-fixed-hiddenクラスを適用して除去することにより、toolbarを切り替えます - 悲しいことに、私はtoolbarウィジェットのドキュメントでそのための任意のtoggle、hideまたはshowイベントを見つけることができません。

toolbarがトグルしたときに、バナーの位置を変更するにはどうすれば検出できますか？

.banner { 
 
    position: fixed; 
 
    background-color: darkseagreen; 
 
    top: 46px; 
 
    min-height: 48px; 
 
    width: 100%; 
 
    text-align: center; 
 
    line-height: 48px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 
<body> 
 
    <div data-role="page" id="page-one"> 
 
    <div data-theme="a" data-role="header" data-position="fixed" data-fullscreen="true"> 
 
     <h1>First Page</h1> 
 
    </div> 
 
    <div data-role="content"> 
 
     <div class="banner">call-to-action</div> 
 
    </div> 
 
    <div data-theme="a" data-role="footer" data-position="fixed" data-fullscreen="true"> 
 
     <h3>Footer</h3> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-08-20 deblocker

ソリューション1：

mobile.toolbarウィジェットを拡張します。

$.widget("mobile.toolbar", $.mobile.toolbar, { 
    toggle: function() { 
    this[this._visible ? "hide" : "show"](); 
    if (this._visible) { 
     /* visible */ 
    } else { 
     /* hidden */ 
    } 
    } 
});

ソリューション2：

アニメーションの終了イベントに耳を傾けます。

$(document).on("pagecreate", function() { 
    $(".ui-header").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(e) { 
    /* do something */ 
    }); 
});

Demo

出典

2017-08-21 08:48:37 Omar

jQuery Mobileでフルスクリーンツールバーのトグルを検出する方法は？

答えて

関連する問題