Wie kann ich das Markup dynamisch hinzugefügter Inhalte in jQuery Mobile effizient verbessern?

Markup-Verbesserung dynamisch hinzugefügter Inhalte

Einführung

Um das Markup dynamisch hinzugefügter Inhalte zu verbessern, Es reicht nicht aus, nur neue Elemente anzuhängen. Der neue Inhalt erfordert das Styling von jQuery Mobile. Da dieser Prozess ressourcenintensiv ist, ist es wichtig, die notwendigen Verbesserungen zu minimieren.

Verbesserungsstufen

Es gibt drei Verbesserungsstufen:

1. Einzelne Komponente/Widget
2. Seiteninhalt
3. Gesamter Seiteninhalt (Header, Inhalt, Fußzeile)

Eine einzelne Komponente/ein einzelnes Widget verbessern

Hinweis: Diese Methode sollte nur für die aktuelle/aktive verwendet werden Seite.

Jedes jQuery Mobile-Widget kann erweitert werden dynamisch:

Listenansicht

• Markup-Verbesserung: $('#mylist').listview('refresh');
• Beispiel: https://jsfiddle.net/Gajotres/LrAyE/
• Hinweis:refresh() betrifft nur neue Listenansichtselemente.

Schaltfläche

• Markup-Verbesserung: $('[type="button"]').button();
• Beispiel: https://jsfiddle.net/Gajotres/m4rjZ/
• Hinweis: Schaltflächen können auch aus einfachen Divs erstellt werden: https://jsfiddle.net/Gajotres/L9xcN/

Navbar

• Markup-Verbesserung: $('[data-role="navbar"]').navbar();
• Beispiel: https://jsfiddle.net/Gajotres/w4m2B/
• Dynamische Tab-Hinzufügung: https://jsfiddle.net/Gajotres/V6nHp/

Texteingaben, Sucheingaben und Textbereiche

• Markup-Verbesserung: $('[type="text"]').textinput();
• Beispiel: https://jsfiddle.net/Gajotres/9UQ9k/

Schieberegler und Flip-Toggle Schalter

• Markup-Verbesserung: $('[type="range"]').slider();
• Beispiel: https://jsfiddle.net/Gajotres/caCsf/
• Hinweis: Slider haben während des pagebeforecreate-Events einige Verbesserungen: https://jsfiddle.net/Gajotres/NwMLP/
• Weiterlesen: https://stackoverflow.com/a/15708562/1848600

Kontrollkästchen & Radiobox

• Markup-Verbesserung: $('[type="radio"]').checkboxradio();
• Beispiel: https://jsfiddle.net/Gajotres/VAG6F/
• Auswahl/Abwahl: $("[type='radio']").eq(0).attr("checked", false).checkboxradio("refresh");

Menü auswählen

• Markup-Verbesserung: $('select').selectmenu();
• Beispiel: https://jsfiddle.net/Gajotres/dEXac/

Zusammenklappbar

• Markup-Verbesserung: $('.selector').trigger('create');
• Beispiel: https://jsfiddle.net/Gajotres/ck6uK/

Tabelle

• Markup Erweiterung: $.(".selector").table("refresh");
• Beispiel: https://jsfiddle.net/Gajotres/Zqy4n/

Panels

• Panel-Markup-Verbesserung: $(' .selector').trigger('pagecreate');
• Inhalt Markup-Verbesserung: $('.selector').trigger('pagecreate');
• Beispiel: https://jsfiddle.net/Palestinian/PRC8W/

Verbessern Sie den Inhalt einer Seite

Verbessern Sie das Ganze Seiteninhalt:

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

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

Verbessern Sie den gesamten Seiteninhalt (Kopfzeile, Inhalt, Fußzeile)

Verwenden Sie trigger('pagecreate');, beachten Sie jedoch, dass es nur einmal pro Seitenaktualisierung verwendet werden sollte.

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

Verbesserung durch Drittanbieter Plugins

• Änderung des Schaltflächentextes: https://jsfiddle.net/Gajotres/mwB22/

Ermitteln Sie das korrekte Maximum Inhaltshöhe

Verwenden Sie CSS, um die Höhe des Inhalts-Div relativ zum festzulegen Kopf- und Fußzeilenhöhen.

Markup-Verbesserung verhindern

• Methode 1: Fügen Sie data-enhance="false" zum Kopf-, Inhalts- oder Fußzeilencontainer hinzu.
• Methode 2: data-role="none" zu Elementen hinzufügen, die nicht sein sollten verbessert.
• Methode 3: Verhindern Sie die Verbesserung bestimmter HTML-Elemente: $.mobile.page.prototype.options.keepNative = "select, input";

Das obige ist der detaillierte Inhalt vonWie kann ich das Markup dynamisch hinzugefügter Inhalte in jQuery Mobile effizient verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!