0

私は jquery mobile を学ぼうとしていて、ここ数日間それをいじっていて、うまくいっていますが、適切なアプローチを取っているかどうかはわかりません。

facebookアプリに似たUIのサイトを作ってみました。ページのヘッダーの右上隅と左上隅には、ページを引き出しのようにスライドさせるボタンがあります。

左上のボタンはページを右にスライドしてメニューを表示し、右上のボタンは左にスライドして入力フォームを表示します。

私がしたことは、ページの外側にdivを作成し、javascriptを使用してアクティブなページをスライドさせ、押されたボタンに応じてメニューまたはフォームを表示することでした:

<body>

  <div id="my-menu">
    <ul>
      <li><a href="page1.html">Menu Item 1</a></li>
    </ul>
  </div> <!-- end of my-menu -->

  <div id="my-form">
    <form method="post" action="form-action.php">
      <!-- form elements -->
    </form>
  </div> <!-- end of my-form -->

  <div data-role="page" id="home">
    <div data-role="header">
    </div>

    <div data-role="content">
    </div>
  </div> <!-- end of home -->

</body>

独自の CSS を使用してメニューのスタイルを設定しましたが、テーマが「my-form」に適用されていないことに気付きましたが、「home」ページのすべての要素が適切にスタイル設定されていました。

メニューで行ったスライド引き出し効果を実行できないため、フォームをページ「ホーム」内に配置できません。

ページ外のフォームに独自のスタイルを適用する必要がありますか、それとも jquery モバイル テーマをページ外の要素に適用する方法はありますか?

これは、この種のユーザー インターフェイスを実装するための最良の方法でしょうか?それとも、jquery モバイルで利用できるものを使用するより良い方法はありますか?

これはアプリケーションの UI になるので、同じコードをすべてのページにコピーするだけということですか? または、これを行うより良い方法はありますか？

このユースケースのベストプラクティスを使用したいので、アドバイスをお願いします! 助けてくれてありがとう！

ところで、このブログ投稿に基づいてスライド メニューを作成しました: http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/

4

1 に答える 1

0

解決策 1:

コメントで言ったように、jQM スタイルはページ コンテナーの外部には適用できませんが、それによって css の使用が妨げられることはありません。

Firefox を使用している場合は、firebug プラグインを使用し、すべての jQM ページ要素を調べて、その構造と css をコピーします。これを使用して、ページ コンテナーの外側でスタイリングを作成します。

もう1つ、新しい要素のスタイルが設定されますが、機能はありません。自分でやり直す必要があります。

解決策 2:

ページ読み込み時にコンテンツを data-role="page" div 内に配置し、jQuery Mobile にページのスタイルを設定させてから、コンテンツ div を data-role="page" div から移動して body タグの子にします。 .

于 2012-12-20T13:51:25.860 に答える