jQuery Mobile：動的に追加されたコンテンツのマークアップ強化

Question

JQuery Mobileページを動的に強化するにはどうすればよいのだろうか？

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

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

   そして

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

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

Answer 1

免責事項：

この記事は、ブログの一部としても見つけることができます[〜＃〜] here [〜＃〜]。

イントロ：

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

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

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

これを念頭に置いて、拡張レベルについて説明しましょう。それらの3つがあり、それらはより少ないリソースを要求するものからより高いものにソートされます。

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

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

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

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

1. Listview ：

   マークアップの強化：

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

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

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

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

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

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

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

   $(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つ、ボタンを作成するためにinput要素を使用する必要はありません。基本的なdivで行うこともできます。以下に例を示します。 http://jsfiddle.net/Gajotres/L9xcN/

3. Navbar

   マークアップの強化：

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

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

   動的navbarタブを追加する方法を以下に示します。 http://jsfiddle.net/Gajotres/V6nHp/

   そしてもう1つpagebeforecreateイベント： 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/18486

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

   マークアップの強化：

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

   または、別のラジオボックス/チェックボックス要素を選択/選択解除する場合：

   $("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. Table

   マークアップの強化：

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

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

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

10. パネル-New

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

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

    パネルのコンテンツの動的な追加のマークアップの強化：

    $('.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/

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

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

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

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

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

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

  残念ながら、このプラグインの開発者は見つかりませんでした。オリジナルSOソース： ボタンテキストjqueryモバイルの変更

  (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');

マークアップのオーバーライドの問題：

何らかの理由でデフォルトのjQuery Mobile CSSを変更する必要がある場合は、!importantオーバーライド。デフォルトのcssスタイルは変更できません。

例：

#navbar li {
    background: red !important;
}

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

変更点：

• 01.02.2013-ダイナミックnavbarデモを追加しました
• 01.03.2013-リストビューにフィルタリングを動的に追加する方法に関するコメントを追加しました
• 07.03.2013-新しい章を追加：正しいコンテンツの最大の高さを取得
• 17.03.2013-いくつかの単語を章に追加しました：正しいコンテンツの最大の高さを取得します
• 29.03.2013-動的に作成されたスライダーに関する新しいコンテンツを追加し、バグの例を修正
• 03.04.2013-動的に作成された折りたたみ可能な要素に関する新しいコンテンツを追加しました
• 04.04.2013-サードパーティプラグインの章を追加
• 20.05.2013-動的に追加されたパネルとコンテンツを追加
• 21.05.2013-完全なコンテンツの高さを設定する別の方法が追加されました
• 20.06.2013-新しい章を追加しました：マークアップのオーバーライドの問題
• 29.06.2013-拡張方法を使用する場合の重要事項を追加

Answer 2

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

var content = '<p>Hi</p>';
$('#somediv').html(content);
$('#somediv').enhanceWithin();