Comment puis-je améliorer efficacement le balisage du contenu ajouté dynamiquement dans jQuery Mobile ?

Amélioration du balisage du contenu ajouté dynamiquement

Introduction

Pour améliorer le balisage du contenu ajouté dynamiquement, il ne suffit pas d'ajouter simplement de nouveaux éléments. Le nouveau contenu nécessite le style de jQuery Mobile. Étant donné que ce processus nécessite beaucoup de ressources, il est crucial de minimiser les améliorations nécessaires.

Niveaux d'amélioration

Il existe trois niveaux d'amélioration :

1. Composant/widget unique
2. Contenu de la page
3. Contenu de la page entière (en-tête, contenu, pied de page)

Améliorer un seul composant/widget

Remarque : Cette méthode ne doit être utilisée que sur le page actuelle/active.

Chaque widget jQuery Mobile peut être amélioré dynamiquement :

Listview

• Amélioration du balisage : $('#mylist').listview('refresh');
• Exemple : https://jsfiddle.net/Gajotres/LrAyE/
• Remarque :fresh() affecte uniquement les nouveaux éléments de la liste.

Bouton

• Amélioration du balisage : $('[type="button"]').button();
• Exemple : https://jsfiddle.net/Gajotres/m4rjZ/
• Remarque : Les boutons peuvent également être créés à partir de divs de base : https://jsfiddle.net/Gajotres/L9xcN/

Navbar

• Amélioration du balisage : $('[data-role="navbar"]').navbar();
• Exemple : https://jsfiddle.net/Gajotres/w4m2B/
• Ajout d'onglets dynamiques : https://jsfiddle.net/Gajotres/V6nHp/

Entrées de texte, entrées de recherche et zones de texte

• Amélioration du balisage : $('[type="text"]').textinput();
• Exemple : https://jsfiddle.net/Gajotres/9UQ9k/

Curseurs et bascule Switch

• Amélioration du balisage : $('[type="range"]').slider();
• Exemple : https://jsfiddle.net/Gajotres/caCsf/
• Remarque : Les curseurs ont quelques améliorations lors de l'événement pagebeforecreate : https://jsfiddle.net/Gajotres/NwMLP/
• Lire la suite : https://stackoverflow.com/a/15708562/1848600

Checkbox et Radiobox

• Amélioration du balisage : $('[type="radio"]').checkboxradio();
• Exemple : https://jsfiddle.net/Gajotres/VAG6F/
• Sélection/Désélection : $("[type='radio']").eq(0).attr("checked", false).checkboxradio("refresh");

Sélectionner le menu

• Amélioration du balisage : $('select').selectmenu();
• Exemple : https://jsfiddle.net/Gajotres/dEXac/

Pliable

• Amélioration du balisage : $('.selector').trigger('create');
• Exemple : https://jsfiddle.net/Gajotres/ck6uK/

Tableau

• Marquage Amélioration : $.(".selector").table("refresh");
• Exemple : https://jsfiddle.net/Gajotres/Zqy4n/

Panneaux

• Amélioration du balisage des panneaux : $('.selector').trigger('pagecreate');
• Amélioration du balisage de contenu : $('.selector').trigger('pagecreate');
• Exemple : https://jsfiddle.net/Palestinian/PRC8W/

Améliorer le contenu d'une page

Améliorer la page entière contenu :

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

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

Améliorer le contenu d'une page complète (en-tête, contenu, Footer)

Utilisez trigger('pagecreate');, mais notez qu'il ne doit être utilisé qu'une seule fois par actualisation de page.

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

Amélioration tierce Plugins

• Modification du texte du bouton : https://jsfiddle.net/Gajotres/mwB22/

Obtenir le maximum correct Hauteur du contenu

Utilisez CSS pour définir la hauteur du contenu div par rapport à l'en-tête et les hauteurs du pied de page.

Empêcher l'amélioration du balisage

• Méthode 1 : ajoutez data-enhance="false" au conteneur d'en-tête, de contenu ou de pied de page.
• Méthode 2 : Ajouter data-role="none" aux éléments qui ne devraient pas l'être amélioré.
• Méthode 3 : empêcher l'amélioration de certains éléments HTML : $.mobile.page.prototype.options.keepNative = "select, input";

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!