Comment puis-je améliorer efficacement le contenu ajouté dynamiquement avec jQuery Mobile ?

jQuery Mobile : amélioration du balisage du contenu ajouté dynamiquement

Introduction

Amélioration de le contenu créé dynamiquement garantit qu'il adhère au style distinctif de jQuery Mobile. Ce processus est crucial mais également gourmand en ressources, c'est pourquoi une amélioration sélective est conseillée en fonction du composant en cours de mise à jour.

Niveaux d'amélioration

Il existe trois niveaux d'amélioration, classés selon leur consommation de ressources :

1. Améliorer un seul composant/widget
2. Améliorer la page content
3. Améliorer le contenu de la page entière

Améliorer un seul composant/widget

Remarque : Les méthodes d'amélioration doivent être utilisé uniquement sur la page actuelle/active. Les améliorations sur les pages insérées dynamiquement se produiront une fois qu'elles seront insérées dans le DOM.

Exemple : Améliorer un bouton :

$('[type="button"]').button();

Améliorer le contenu de la page

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

Améliorer la page entière Contenu

Attention : trigger('pagecreate') ne doit être utilisé qu'avec parcimonie, car il comporte un risque d'effets secondaires involontaires.

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

Méthodes pour empêcher l'amélioration du balisage

Pour empêcher l'amélioration d'éléments spécifiques, utilisez l'un des méthodes suivantes :

Méthode 1 :

data-enhance="false"

Méthode 2 :

data-role="none"

Méthode 3 :

$(document).bind('mobileinit',function(){
  $.mobile.page.prototype.options.keepNative = "select, input";
});    

Marquage Problèmes d'amélioration

Erreur : "Impossible d'appeler les méthodes sur la liste avant l'initialisation"

Solution : Initialisez le composant avant d'améliorer le balisage :

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

Remplacement du balisage Problèmes

Pour remplacer les styles CSS jQuery Mobile par défaut, utilisez les indicateurs !important dans les règles CSS.

Exemple :

#navbar li {
  background: red !important;
}

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!