web-dev-qa-db-fra.com

Comment supprimer le style jQuery Mobile?

J'ai choisi jQuery Mobile par rapport aux autres frameworks pour ses capacités d'animation et son support dynamique pour les pages.

Cependant, je rencontre des problèmes de style. J'aimerais conserver le style de page de base afin d'effectuer des transitions de page. Mais je dois aussi personnaliser complètement l'aspect des en-têtes, des listes, des boutons, des zones de recherche ... Il ne suffit pas de gérer les couleurs. Je dois gérer les dimensions, les positions, les marges, les rembourrages, etc.

Par conséquent, je me bats avec des divs et des classes supplémentaires ajoutés par jQuery Mobile afin de les remplacer par CSS. Mais cela prend tellement de temps, et il serait bien plus rapide de réécrire les CSS à partir de zéro ...

Existe-t-il un moyen de charger un fichier css jQuery Mobile minimal?

Ou devrais-je regarder vers un autre framework mobile? Je dois gérer les transitions de page, les appels ajax, la compatibilité Cordova et, bien sûr, un fichier html/css entièrement personnalisable ...

javascriptcsshtml5css3jquery-mobile
30
Yako

Méthodes de prévention d'amélioration du balisage:

Cela peut être fait de plusieurs manières. Parfois, vous devrez les combiner pour obtenir le résultat souhaité.

  • Méthode 1:

    Il peut le faire en ajoutant cet attribut:

    data-enhance="false"

    à l'en-tête, le contenu, le conteneur de pied de page.

    Cela doit également être activé lors de la phase de chargement de l'application:

    $(document).on("mobileinit", function () {
    $.mobile.ignoreContentEnabled=true;
});

    Initialisez-le avant que jquery-mobile.js ne soit initialisé (regardez l'exemple ci-dessous).}

    Plus d'informations à ce sujet peuvent être trouvées ici:

    http://jquerymobile.com/test/docs/pages/page-scripting.html

    Exemple: http://jsfiddle.net/Gajotres/UZwpj/

    Pour recréer une page à nouveau, utilisez ceci:

    $('#index').live('pagebeforeshow', function (event) {
    $.mobile.ignoreContentEnabled = false;
    $(this).attr('data-enhance','true');
    $(this).trigger("pagecreate")
});

  • Méthode 2:

    La deuxième option est de le faire manuellement avec cette ligne:

    data-role="none"

    Exemple: http://jsfiddle.net/Gajotres/LqDke/

  • Méthode 3:

    L’amélioration du balisage de certains éléments HTML peut être empêchée:

     $(document).bind('mobileinit',function(){
      $.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
      //$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
 });

    Exemple: http://jsfiddle.net/Gajotres/gAGtS/

    L'initialise à nouveau avant que jquery-mobile.js ne soit initialisé (regardez l'exemple ci-dessous).}

Apprenez-en plus à ce sujet dans mon autre tutoriel: jQuery Mobile: amélioration du balisage du contenu ajouté dynamiquement

29
Gajotres

... ou utilisez simplement la version officielle, sans thème de CSS , spécialement conçue pour permettre la conception d'un thème personnalisé tout en conservant toutes les fonctionnalités de jQuery Mobile.

Vous n'avez pas à vous battre avec des hacks et des redéfinitions tout le temps et vous obtenez un CSS plus léger.

Gagnant-gagnant.

edit: Également répondu ici

9
zool

Pour être honnête, je suis assez déçu que jQuery mobile ne nous ait pas fourni de kit de démarrage relativement dépourvu de style, pour travailler simplement avec ce que vous avez dit: Ajax, transitions, cordova ...

Remplacer les classes CSS générées est une folie absolue, mais j’ai effectué quelques travaux sur Skunk et j’ai réussi à réduire la taille du fichier CSS non compressé de 233 Ko à un simple 27 Ko, tout en conservant les aspects importants du CSS tels que les transitions, la visualisation d’une page , etc. De cette façon, vous commencez presque comme vous le feriez avec un fichier css vide.

Peut-être que je téléchargerai le fichier sur Github, s'il y a une demande. Je souhaite faire quelques tests supplémentaires pour voir que je n’ai rien laissé d’important.

1
Shay

à compter de jQuery Mobile 1.4.0, l'attribut de données data-enhanced a été ajouté à la plupart des composants. Si vous définissez cet attribut comme étant vrai, jQuery mobile ignorera l'amélioration du style du composant. Vous devrez donc attribuer un style à l'élément. 

des informations supplémentaires à ce sujet dans les notes de publication de jQuery Mobile 1.4.0 ici http://jquerymobile.com/upgrade-guide/1.4/

0
Juan Carlos Alpizar Chinchilla