jQuery Mobile で動的に追加されたコンテンツのマークアップを効率的に強化するにはどうすればよいですか?

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

はじめに

動的に追加されたコンテンツのマークアップを強化するには、新しい要素を追加するだけでは十分ではありません。新しいコンテンツには jQuery Mobile のスタイルが必要です。このプロセスはリソースを大量に消費するため、必要な拡張を最小限に抑えることが重要です。

拡張レベル

拡張レベルは 3 つあります:

1. 単一コンポーネント/ウィジェット
2. ページcontent
3. ページ全体のコンテンツ (ヘッダー、コンテンツ、フッター)

単一コンポーネント/ウィジェットの拡張

注: このメソッドは、現在/アクティブなページでのみ使用してください。

それぞれjQuery モバイル ウィジェットは動的に強化できます:

Listview

• マークアップの強化: $('#mylist').listview('更新');
• 例: https://jsfiddle.net/Gajotres/LrAyE/
• 注:fresh() は新しい listview 要素のみに影響します。

Button

• マークアップ拡張機能: $('[type="button"]').button();
• 例: https://jsfiddle.net/Gajotres/m4rjZ/
• 注: ボタンは基本的な div からも作成できます。 https://jsfiddle.net/Gajotres/L9xcN/

ナビゲーションバー

• マークアップ拡張: $('[data-role="navbar"]').navbar();
• 例: https://jsfiddle.net/Gajotres/w4m2B/
• 動的タブの追加: https://jsfiddle.net/Gajotres/V6nHp/

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

• マークアップ拡張: $('[type="text"]').textinput();
• 例: https://jsfiddle.net/Gajotres/9UQ9k/

スライダーとフリップトグルスイッチ

• マークアップ拡張: $('[type="range"]').slider();
• 例: https://jsfiddle.net/Gajotres/caCsf/
• 注: スライダーは、pagebeforecreate イベント中にいくつかの機能強化があります: https://jsfiddle.net/Gajotres/NwMLP/
• 続きを読む: https://stackoverflow.com/a/15708562/1848600

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

• マークアップ拡張: $('[type="radio"]').checkboxradio();
• 例: https://jsfiddle.net/Gajotres/VAG6F/
• 選択/選択解除: $("[type='radio']").eq(0).attr("checked", false).checkboxradio("refresh");

メニューを選択

• マークアップ拡張: $('select').selectmenu();
• 例: https://jsfiddle.net/Gajotres/dEXac/

折りたたみ可能

• マークアップ拡張: $('.selector').trigger('create');
• 例: https://jsfiddle.net/Gajotres/ck6uK/

テーブル

• マークアップ拡張: $.(".selector").table("refresh");
• 例: https://jsfiddle.net/Gajotres/Zqy4n/

パネル

• パネル マークアップの強化: $('.selector').trigger('pagecreate');
• コンテンツ マークアップの拡張: $('.selector').trigger('pagecreate');
• 例: https://jsfiddle.net/Palestinian/PRC8W/

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

ページ全体を強化するcontent:

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

例: https://jsfiddle.net/Gajotres/426NU/

ページ全体のコンテンツ (ヘッダー、コンテンツ、 Footer)

trigger('pagecreate'); を使用しますが、ページの更新ごとに 1 回のみ使用する必要があることに注意してください。

例: https:/ /jsfiddle.net/Gajotres/DGZcr/

サードパーティの機能強化プラグイン

• ボタン テキストの変更: https://jsfiddle.net/Gajotres/mwB22/

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

CSS を使用して高さを設定しますヘッダーとフッターの高さを基準としたコンテンツ div の相対値。

マークアップ拡張の防止

• 方法 1: data-enhance="false" をヘッダーに追加します。 、コンテンツ、またはフッター コンテナ。
• 方法 2: data-role="none" を追加すべきではない要素に追加します。 enhanced.
• 方法 3: 特定の HTML 要素が拡張されないようにします: $.mobile.page.prototype.options.keepNative = "select, input";

以上がjQuery Mobile で動的に追加されたコンテンツのマークアップを効率的に強化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。