77

jQuery Mobileページを動的に拡張するにはどうすればよいですか？

私はこれらの方法を使おうとしました：

  1. $('[data-role="page"]').trigger('create');

    と

  2. $('[data-role="page"]').page();

また、チェックボックスのみの拡張マークアップを防ぐにはどうすればよいですか？

4

2 に答える 2

167

免責事項：

この記事は、私のブログの一部としてここにあります。

イントロ：

動的に作成されたコンテンツマークアップを強化する方法はいくつかあります。jQuery Mobileページに新しいコンテンツを動的に追加するだけでは不十分です。新しいコンテンツは、従来のjQueryMobileスタイルで拡張する必要があります。これはかなり重いタスクを処理しているため、いくつかの優先順位が必要です。可能であれば、jQueryMobileは可能な限り拡張を少なくする必要があります。1つのコンポーネントのみをスタイル設定する必要がある場合は、ページ全体を拡張しないでください。

これはどういう意味ですか？ページプラグインがpageInitイベントをディスパッチするとき、ほとんどのウィジェットはそれ自体を自動初期化するために使用します。ページ上で見つかったウィジェットのインスタンスを自動的に拡張します。

ただし、クライアント側で新しいマークアップを生成するか、Ajaxを介してコンテンツを読み込んでページに挿入する場合は、createイベントをトリガーして、新しいマークアップに含まれるすべてのプラグインの自動初期化を処理できます。これは任意の要素（ページdiv自体も含む）でトリガーできるため、各プラグイン（リストビューボタン、選択など）を手動で初期化する手間が省けます。

これを念頭に置いて、拡張レベルについて説明しましょう。それらは3つあり、リソースをあまり必要としないものから高いものへと並べ替えられます。

  1. 単一のコンポーネント/ウィジェットを強化する
  2. ページコンテンツを強化する
  3. フルページコンテンツ（ヘッダー、コンテンツ、フッター）を強化する

単一のコンポーネント/ウィジェットを拡張します。

重要：以下の拡張方法は、現在の/アクティブなページでのみ使用されます。動的に挿入されたページの場合、それらのページとそのコンテンツは、DOMに挿入されると拡張されます。動的に作成されたページ/アクティブページ以外のメソッドを呼び出すと、エラーが発生します。

すべてのjQueryMobileウィジェットは動的に拡張できます。

  1. リストビュー：

    マークアップの強化：

    $('#mylist').listview('refresh');

    リストビュー要素の削除：

    $('#mylist li').eq(0).addClass('ui-screen-hidden');

    拡張例： http： //jsfiddle.net/Gajotres/LrAyE/

    refresh（）メソッドは、リストに追加された新しいノードにのみ影響することに注意してください。これは、パフォーマンス上の理由から行われます。

    リストビューの要点の1つは、フィルタリング機能です。残念ながら、何らかの理由で、jQueryMobileは既存のリストビューにフィルターオプションを動的に追加できません。幸い、回避策があります。可能であれば、現在のリストビューを削除し、ファイラーオプションをオンにして別のリストビューを追加します。

    これが実際の例です：https ：//stackoverflow.com/a/15163984/1848600

    $(document).on('pagebeforeshow', '#index', function(){       
    $('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
    $('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview');
    $('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview');
    $('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview');
    $('#test-listview').listview().listview('refresh');
});

  2. ボタン

    マークアップの強化：

    $('[type="button"]').button();

    拡張例： http： //jsfiddle.net/Gajotres/m4rjZ/

    もう1つ、ボタンを作成するために入力要素を使用する必要はありません。基本的なdivを使用して作成することもできます。例を次に示します：http：//jsfiddle.net/Gajotres/L9xcN/

  3. ナビゲーションバー

    マークアップの強化：

    $('[data-role="navbar"]').navbar();

    拡張例： http： //jsfiddle.net/Gajotres/w4m2B/

    動的ナビゲーションバータブを追加する方法のデモは次のとおりです： http：//jsfiddle.net/Gajotres/V6nHp/

    そして、pagebeforecreateイベントにもう1つ：http：//jsfiddle.net/Gajotres/SJG8W/

  4. テキスト入力、検索入力、テキストエリア

    マークアップの強化：

    $('[type="text"]').textinput();

    拡張例： http： //jsfiddle.net/Gajotres/9UQ9k/

  5. スライダー＆フリップトグルスイッチ

    マークアップの強化：

    $('[type="range"]').slider();

    拡張例： http： //jsfiddle.net/Gajotres/caCsf/

    pagebeforecreateイベント中の拡張例：http：//jsfiddle.net/Gajotres/NwMLP/

    スライダーは動的に作成するには少しバグがあります。詳細については、https ：//stackoverflow.com/a/15708562/1848600をご覧ください。

  6. チェックボックスとラジオボックス

    マークアップの強化：

    $('[type="radio"]').checkboxradio();

    または、別のRadiobox / Checkbox要素を選択/選択解除する場合：

    $("input[type='radio']").eq(0).attr("checked",false).checkboxradio("refresh");

    また

    $("input[type='radio']").eq(0).attr("checked",true).checkboxradio("refresh");

    拡張例： http： //jsfiddle.net/Gajotres/VAG6F/

  7. メニューを選択

    マークアップの強化：

    $('select').selectmenu();

    拡張例： http： //jsfiddle.net/Gajotres/dEXac/

  8. 折りたたみ可能

    残念ながら、折りたたみ可能な要素は特定のメソッドでは拡張できないため、代わりにtrigger（'create'）を使用する必要があります。

    拡張例： http： //jsfiddle.net/Gajotres/ck6uK/

  9. テーブル

    マークアップの強化：

    $(".selector").table("refresh");

    これはテーブル拡張の標準的な方法ですが、現時点では機能させることができません。したがって、代わりにtrigger（'create'）を使用してください。

    拡張例： http： //jsfiddle.net/Gajotres/Zqy4n/

  10. パネル-新規

    パネルマークアップの機能強化：

    $('.selector').trigger('pagecreate');

    Panelに動的に追加されたコンテンツのマークアップ拡張：

    $('.selector').trigger('pagecreate');

    例： http： //jsfiddle.net/Palestinian/PRC8W/

ページコンテンツを強化する：

ページ全体のコンテンツを生成/再構築する場合は、一度にすべてを実行するのが最善であり、これを使用して実行できます。

$('#index').trigger('create');

拡張例： http： //jsfiddle.net/Gajotres/426NU/

フルページコンテンツ（ヘッダー、コンテンツ、フッター）を強化します。

残念ながら、trigger（'create'）はヘッダーとフッターのマークアップを拡張できません。その場合、大きな銃が必要です。

$('#index').trigger('pagecreate');

拡張例： http： //jsfiddle.net/Gajotres/DGZcr/

公式のjQueryMobileドキュメントで見つけることができないため、これはほとんど神秘的な方法です。それでも、本当に必要な場合を除いて、使用しないようにという警告とともに、jQueryMobileバグトラッカーで簡単に見つけることができます。

注、.trigger（'pagecreate'）; ページの更新ごとに1回だけ使用すると想定できますが、それは正しくないことがわかりました。

http://jsfiddle.net/Gajotres/5rzxJ/

サードパーティの拡張プラグイン

サードパーティの拡張プラグインがいくつかあります。一部は既存のメソッドの更新として作成され、一部は壊れたjQM機能を修正するために作成されます。

  • ボタンのテキストの変更

    残念ながら、このプラグインの開発者を見つけることができませんでした。元のSOソース：ボタンテキストの変更jquery mobile

    (function($) {
    /*
     * Changes the displayed text for a jquery mobile button.
     * Encapsulates the idiosyncracies of how jquery re-arranges the DOM
     * to display a button for either an <a> link or <input type="button">
     */
    $.fn.changeButtonText = function(newText) {
        return this.each(function() {
            $this = $(this);
            if( $this.is('a') ) {
                $('span.ui-btn-text',$this).text(newText);
                return;
            }
            if( $this.is('input') ) {
                $this.val(newText);
                // go up the tree
                var ctx = $this.closest('.ui-btn');
                $('span.ui-btn-text',ctx).text(newText);
                return;
            }
        });
    };
})(jQuery);

    実例： http： //jsfiddle.net/Gajotres/mwB22/

正しい最大コンテンツの高さを取得する

ページのヘッダーとフッターの高さが一定の場合、コンテンツdivは、少しcssのトリックを使用して、使用可能なスペース全体をカバーするように簡単に設定できます。

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

そして、これがGoogle maps api3デモの実例です：http: //jsfiddle.net/Gajotres/7kGdE/

このメソッドは、コンテンツの最大の高さを正しく取得するために使用でき、pageshowイベントで使用する必要があります。

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

そして、これがjsFiddleのライブ例です：http：//jsfiddle.net/Gajotres/nVs9J/

覚えておくべきことが1つあります。この関数は、利用可能な最大コンテンツの高さを正しく取得すると同時に、同じコンテンツを拡大するために使用できます。残念ながら、imgをコンテンツの高さ全体に拡大するために使用することはできません。imgタグのオーバーヘッドは3pxです。

マークアップ強化防止の方法：

これはいくつかの方法で行うことができますが、望ましい結果を得るには、それらを組み合わせる必要がある場合があります。

  • 方法1：

    この属性を追加することでそれを行うことができます：

    data-enhance="false"

    ヘッダー、コンテンツ、フッターコンテナーに。

    これは、アプリの読み込みフェーズでも有効にする必要があります。

    $(document).one("mobileinit", function () {
    $.mobile.ignoreContentEnabled=true;
});

    jquery-mobile.jsが初期化される前に初期化してください（以下の例を参照してください）。

    これについての詳細はここで見つけることができます：

    http://jquerymobile.com/test/docs/pages/page-scripting.html

    例： http： //jsfiddle.net/Gajotres/UZwpj/

    ページを再作成するには、次を使用します。

    $('#index').live('pagebeforeshow', function (event) {
    $.mobile.ignoreContentEnabled = false;
    $(this).attr('data-enhance','true');
    $(this).trigger("pagecreate")
});

  • 方法2：

    2番目のオプションは、次の行を使用して手動で実行することです。

    data-role="none"

    例： http： //jsfiddle.net/Gajotres/LqDke/

  • 方法3：

    特定のHTML要素は、マークアップの強化を防ぐことができます。

     $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });

    例： http： //jsfiddle.net/Gajotres/gAGtS/

    jquery-mobile.jsが初期化される前に、再度初期化してください（以下の例を参照してください）。

マークアップ強化の問題：

コンポーネントを最初から作成する場合（リストビューなど）、次のエラーが発生することがあります。

初期化前にリストビューのメソッドを呼び出すことはできません

マークアップ拡張の前にコンポーネントを初期化することで防ぐことができます。これを修正する方法は次のとおりです。

$('#mylist').listview().listview('refresh');

問題を覆すマークアップ：

何らかの理由でデフォルトのjQueryMobileCSSを変更する必要がある場合は、!importantオーバーライドして行う必要があります。これがないと、デフォルトのcssスタイルを変更できません。

例：

#navbar li {
    background: red !important;
}

jsFiddle例： http： //jsfiddle.net/Gajotres/vTBGa/

変更点：

  • 2013年2月1日-動的なナビゲーションバーのデモを追加しました
  • 2013年3月1日-リストビューにフィルタリングを動的に追加する方法に関するコメントを追加
  • 2013年3月7日-新しい章を追加：正しい最大コンテンツの高さを取得
  • 17.03.2013-章にいくつかの単語を追加しました：正しい最大コンテンツの高さを取得します
  • 2013年3月29日-動的に作成されたスライダーに関する新しいコンテンツを追加し、バグの例を修正しました
  • 2013年4月3日-動的に作成された折りたたみ可能な要素に関する新しいコンテンツを追加しました
  • 2013年4月4日-サードパーティのプラグインの章を追加
  • 20.05.2013-動的に追加されたパネルとコンテンツを追加
  • 2013年5月21日-コンテンツの高さ全体を設定する別の方法を追加
  • 20.06.2013-新しい章を追加：マークアップの問題を覆す
  • 2013年6月29日-拡張メソッドを使用する場合の重要な注意事項を追加しました
于 2013-01-27T18:05:47.043 に答える
4

JQMobile 1.4から、すべての子に対して.enhanceWithin（）を実行できますhttp://api.jquerymobile.com/enhanceWithin/

var content = '<p>Hi</p>';
$('#somediv').html(content);
$('#somediv').enhanceWithin();
于 2014-06-17T12:58:06.037 に答える