jquery - ツールバー Jquery Mobile を非表示

Question

jquery mobileを使用してツールバーを非表示にするさまざまな方法は何ですか. 理想的には、ツールバーにフォーカスがない場合、ヘッダーの上にツールバーを非表示にしたいと考えています。私は基本的なレイアウトでフィドルを始めました

    <div data-role="navbar">
<ul>
    <li><a href="a.html">Settings</a></li>
    <li><a href="b.html">Whatever</a></li>
</ul>

http://jsfiddle.net/DMUwp/

Answer 1

解決策の 1 つは、ヘッダーをクリックしたときにナビゲーション バーを非表示にすることです。

    $("div[data-role=header]").on("click", function () {
        $("div[data-role=navbar]").slideToggle(200);
    });

    $("div[data-role=navbar]").on("click", function (e) {
        e.stopPropagation();
    });

ここにデモがあります。

もう 1 つは、ライブラリが提供するdata-position="fixed"およびdata- fullscreen ="true"を使用することです。これにより、画面のどこかをクリックまたはタッチすると、ページの下部にあるナビゲーション バーが表示または非表示になります。

ここにデモがあります。

---

編集

最初の例では、ページのロード時に問題が発生する可能性があるため、この問題を回避するには、ヘッダーからナビゲーション バーを取り出し、次のようにその上に配置します。

    <div data-role="navbar">
        <ul>
            <li><a href="a.html">Settings</a>

            </li>
            <li><a href="b.html">Whatever</a>

            </li>
        </ul>
    </div>
    <div data-role="header">
         <h1>Hide the Toolbar</h1>
    </div>

そして、次の js コードを追加します。

    $("div[data-role=header]").on("click", function () {
        $("div[data-role=navbar]").slideToggle(200);
    });

ここにデモがあります。