jQueryモバイル。動的に追加されるコンテンツのマークアップ強化

2023-08-29 16:22:47

質問

jQuery Mobileのページを動的に拡張するにはどうしたらよいでしょうか？

私はこれらのメソッドを使用してみました。

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

そして
$('[data-role="page"]').page();

また、チェックボックスのみのエンハンスメントマークアップを防ぐにはどうしたらよいでしょうか？

どのように解決するのですか？

免責事項です。

この記事は、私のブログの一部としても見ることができます。 こちら .

イントロです。

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

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

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

このことを念頭に置いて、強化レベルについて説明します。3 つのレベルがあり、リソース負荷が低いものから高いものへとソートされています。

単一のコンポーネント/ウィジェットを強化する
ページのコンテンツを強化する
ページ全体のコンテンツを強化する (ヘッダー、コンテンツ、フッター)

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

重要です。 以下の拡張メソッドは、現在のページ/アクティブなページに対してのみ使用されます。動的に挿入されたページについては、それらのページとそのコンテンツは DOM に挿入された時点で拡張されます。動的に作成されたページ/アクティブなページ以外のページでメソッドを呼び出すと、エラーになります。

すべての jQueryモバイル ウィジェットは動的に拡張することができます。

リストビュー :

マークアップの強化。
```
$('#mylist').listview('refresh');
```
listview要素の削除。
```
$('#mylist li').eq(0).addClass('ui-screen-hidden'); 
```
強化例です。 http://jsfiddle.net/Gajotres/LrAyE/

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

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

以下は動作例です。 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');
});
```
ボタン

マークアップの強化。
```
$('[type="button"]').button();
```
強化例です。 http://jsfiddle.net/Gajotres/m4rjZ/

もうひとつ、ボタンを作るためにinput要素を使う必要はなく、基本的なdivでも作ることができます。 http://jsfiddle.net/Gajotres/L9xcN/
ナビバー

マークアップの強化。
```
$('[data-role="navbar"]').navbar();
```
強化例です。 http://jsfiddle.net/Gajotres/w4m2B/

動的なナビバータブを追加する方法のデモです。 http://jsfiddle.net/Gajotres/V6nHp/

そしてもうひとつは ページビフォークリエイト のイベントがあります。 http://jsfiddle.net/Gajotres/SJG8W/
テキスト入力、検索入力、テキストエリア

マークアップの強化。
```
$('[type="text"]').textinput();   
```
強化例です。 http://jsfiddle.net/Gajotres/9UQ9k/
スライダー＆フリップトグルスイッチ

マークアップの強化。
```
$('[type="range"]').slider();  
```
強化例です。 http://jsfiddle.net/Gajotres/caCsf/

pagebeforecreateイベント中の機能拡張例です。 http://jsfiddle.net/Gajotres/NwMLP/

スライダーを動的に作成するのは少しバグがあります。 https://stackoverflow.com/a/15708562/1848600
チェックボックスとラジオボックス

マークアップの強化。
```
$('[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/
選択メニュー

マークアップの強化。
```
$('select').selectmenu();  
```
強化例です。 http://jsfiddle.net/Gajotres/dEXac/
折りたたみ式

残念ながら、折りたたみ要素は特定のメソッドによって拡張することができないので、代わりにtrigger('create')を使用しなければなりません。

拡張の例です。 http://jsfiddle.net/Gajotres/ck6uK/
テーブル

マークアップの強化。
```
$(".selector").table("refresh");
```
これはテーブル拡張の標準的な方法ですが、この時点ではうまくいきません。そこで、代わりにtrigger('create')を使用します。

エンハンスメントの例です。 http://jsfiddle.net/Gajotres/Zqy4n/
パネル - 新しい

パネルマークアップの強化。
```
$('.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'); は、ページ更新ごとに一度だけ使用できると仮定すると、私はそれが真実でないことを発見しました。

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/

このメソッドは、コンテンツの最大高さを正しく取得するために使用することができます。 ページショー のイベントです。

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タグは3pxのオーバーヘッドを持つため、残念ながらimgをコンテンツ全体の高さに引き伸ばすことはできません。

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

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

方法 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/

変更点

2013.02.01 - ダイナミックナンバーのデモを追加しました。
2013.01.03 - リストビューに動的にフィルタリングを追加する方法についてのコメントを追加しました。
2013.03.07 - 新しい章を追加しました。 コンテンツの最大高さを正しく取得する
17.03.2013 - 章にいくつかの単語を追加しました。 正しい最大コンテンツの高さを取得する
2013.03.29 - 動的に作成されるスライダーに関する新しいコンテンツを追加し、例のバグを修正しました。
2013.04.03 - 動的に作成される折りたたみ可能な要素についての新しいコンテンツを追加しました。
2013.04.04 - サードパーティープラグインの章を追加しました。
2013.05.20 - 動的に追加されるパネルとコンテンツについて追加しました。
2013.05.21 - フルコンテンツの高さを設定する別の方法を追加しました。
2013.06.20 - 新しい章を追加しました。 マークアップオーバーライドの問題
2013.06.29 - エンハンスメントメソッドを使用する際の重要な注意事項を追加しました。