1

jqueryとjquerymobileの新機能。

メインメニューを非表示にして、上部のナビゲーションバーに[メニュー]ボタンを作成するだけです。ユーザーがこのボタンをクリックすると、「トップメニュー」のポップアップが表示されます。

私はだまし、mobile.cssで「トップメニュー」を表示に向けました。最初は非表示にするにはnoneを使用しました。

編集

近づきましたが、完璧ではありません。メニューをクリックすると（onTouchまたはonTapを探していましたが、API情報が見つかりませんでした）メニューが表示されます。ポップアップウィンドウに表示される代わりに開く方法はありますか？

また、何らかの理由でデータのテーマやアイコンも表示されません。 

$(document).ready(function(){
    $('#header').append('<div data-role="navbar"><ul><li class="mainMenu"><a href="#" data-iconpos="top" data-icon="grid" data-theme="b">Menu</a></li><li><a href="#">facebook</a></li><li><a href="#">Twitter</a></li></ul></div>');
    $('.mainMenu').click(function() {
      $('#top-menu').toggle('fast', function() {
        // Animation complete.
      });
    });
});
4

1 に答える 1

3

JQM CSS は、DOM に手動で追加したものには適用されません。.page()あなたはそのアイテムを呼び出さなければなりません。

詳細については、http://jquerymobiledictionary.dyndns.org/faq.htmlを参照してください- DOM の追加に関する質問

[編集]

これはハッキングするよりも良いかもしれません: http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

[あなたの編集への応答として]

まず第一に - 必要のないものには JavaScript を使用しないようにしてください。必要がないのに、ヘッダーに javascript を入力するのはなぜですか? そこでは変数を使用しませんでした。

第二に、あなたは私のチュートリアルを読んでいませんでした。ドキュメントの準備ができた後に新しい DOM コンテンツを作成した場合、jquery モバイル固有のものは適用されません。.page()それを行うと、新しいコンテンツを呼び出さなければなりません。そのため、まだ機能しません。

イベントは、docs&demos セクションhttp://jquerymobile.com/demos/1.0a2/をクリックするだけで入手できますevents。

最後に、携帯電話にはポップアップがありません。ダイアログについて言及する場合は、JQM ドキュメントのダイアログを参照してください。

jquery は javascript とはまったく異なるアプローチであり、jquery mobile も新しいアイデアです。jquery の直感と経験は、jqm とその目的を理解するまで、しばらく役に立たないままです。

プログレッシブエンハンスメントについて少し読んだ場合、これはより迅速に発生する可能性があります。

幸運を。

于 2010-12-14T08:30:39.510 に答える