web-dev-qa-db-ger.com

Wie entferne ich das jQuery Mobile-Styling?

Ich habe jQuery Mobile gegenüber anderen Frameworks aufgrund seiner Animationsfunktionen und der Unterstützung dynamischer Seiten ausgewählt.

Ich habe jedoch Probleme mit dem Styling. Ich möchte den grundlegenden Seitenstil beibehalten, um Seitenübergänge durchzuführen. Ich muss aber auch das Look'n-Gefühl von Kopfzeilen, Listenansichten, Schaltflächen, Suchfeldern vollständig anpassen. Der Umgang mit Farben reicht nicht aus. Ich muss mit Abmessungen, Positionen, Rändern, Polsterungen usw. umgehen.

Daher habe ich Schwierigkeiten mit zusätzlichen Divs und Klassen, die von jQuery Mobile hinzugefügt wurden, um sie mit CSS zu überschreiben. Aber es ist so zeitaufwändig und es wäre viel schneller, CSS von Grund auf neu zu schreiben ...

Gibt es eine Möglichkeit, eine minimale jQuery Mobile-CSS-Datei zu laden?

Oder sollte ich nach einem anderen mobilen Framework suchen? Ich muss Seitenübergänge, Ajax-Aufrufe, Cordova-Kompatibilität und natürlich ein vollständig anpassbares HTML/CSS behandeln ...

30
Yako

Methoden zur Verhinderung von Markup-Verbesserungen:

Dies kann auf wenige Arten geschehen, manchmal müssen Sie sie kombinieren, um das gewünschte Ergebnis zu erzielen.

  • Methode 1:

    Es kann dies tun, indem Sie dieses Attribut hinzufügen:

    data-enhance="false"
    

    zum Header, Inhalt, Fußzeilencontainer.

    Dies muss auch in der App-Ladephase aktiviert werden:

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

    Initialisieren Sie es, bevor jquery-mobile.js initialisiert wird (siehe Beispiel unten).

    Mehr dazu finden Sie hier:

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

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

    Um eine Seite erneut zu erstellen, verwenden Sie Folgendes:

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

    Die zweite Möglichkeit besteht darin, diese Zeile manuell auszuführen:

    data-role="none"
    

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

  • Methode 3:

    Bestimmte HTML-Elemente können von der Markup-Verbesserung ausgeschlossen werden:

     $(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 */
     });    
    

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

    Initialisieren Sie es erneut, bevor jquery-mobile.js initialisiert wird (siehe Beispiel unten).

Lesen Sie mehr darüber in meinem anderen Tutorial: jQuery Mobile: Markup Verbesserung von dynamisch hinzugefügten Inhalten

29
Gajotres

... oder verwenden Sie einfach die offizielle, themenlose Version von CSS , die speziell für die Gestaltung eines benutzerdefinierten Designs entwickelt wurde, während alle Funktionen von jQuery Mobile erhalten bleiben.

Sie müssen nicht ständig mit Hacks und Overrides kämpfen, und Sie erhalten ein leichteres CSS.

Win-Win.

edit: Auch beantwortet hier

9
zool

Um ehrlich zu sein, bin ich ziemlich enttäuscht, dass jQuery mobile uns kein relativ stilfreies Startkit zur Verfügung gestellt hat, nur um mit dem, was Sie gesagt haben, zu arbeiten: Ajax, Übergänge, Cordova ...

Die generierten CSS-Klassen zu überschreiben ist absoluter Wahnsinn, aber ich habe ein paar Skunk-Arbeiten gemacht und es geschafft, die unkomprimierte CSS-Dateigröße von 233 KB auf nur 27 KB zu reduzieren usw. So fangen Sie fast so an, als würden Sie mit einer leeren CSS-Datei beginnen.

Vielleicht lade ich die Datei auf Github hoch, falls es eine Nachfrage gibt. Ich möchte noch einige Tests durchführen, um zu sehen, dass ich nichts Wesentliches hinterlassen habe.

1
Shay

ab jQuery Mobile 1.4.0 wurde den meisten Komponenten das Datenattribut data-enhanced hinzugefügt. Wenn Sie dieses Attribut auf true setzen, ignoriert jQuery mobile die Stilverbesserung für die Komponente. Daher müssen Sie das Element nach Ihren eigenen Vorstellungen gestalten. 

weitere Informationen hierzu finden Sie in den jQuery Mobile 1.4.0-Versionshinweisen hier http://jquerymobile.com/upgrade-guide/1.4/