Wie entfernt man jQuery Mobile Styling?

Wählte ich die jQuery Mobile über andere Rahmenbedingungen für seine animation Fähigkeiten und dynamische Seiten Unterstützung.

Jedoch, ich komme in Schwierigkeiten mit styling. Ich würde gerne halten die basic-Seite-Stil, um auszuführen, Seite übergänge. Aber ich habe auch brauchen, um vollständig passen Sie das look ' N feel von Kopf -, listviews, Knöpfe, searchboxes... Umgang mit Farben allein reichen nicht aus. Ich muss mit Abmessungen, Positionen, Ränder, Auffüllungen, und so weiter.

Also ich Kämpfe mit extra-divs und Klassen Hinzugefügt, die von jQuery Mobile, um Sie zu überschreiben mit CSS. Aber es ist so zeitaufwendig, und es würde so schneller zu umschreiben, css von Grund auf neu...

Gibt es eine Möglichkeit zum laden einer minimalen jQuery Mobile css-Datei ?

Oder sollte ich Ihren Blick auf eine andere mobile framework ? Ich muss um Seitenübergänge, ajax-calls, Cordova Kompatibilität und natürlich eine voll anpassbare html/css...

Kommentar zu dem Problem
Ich hatte die gleichen Probleme, von vorne zu beginnen ist nicht eine effiziente Methode, sondern das beste für mich. Jedoch, zum Schluss mein Projekt auf Zeit implementiere ich die css, jquerry mobile und löschen die meisten von... +1 für deine Frage, wenn jemand eine Antwort haben Kommentarautor: Romain
Der ideale Weg wäre, um zu löschen Sie die Formatvorlage, die Sie nicht wollen, aus der jquery-CSS-Datei. Dann erstellen Sie eine neue Datei mit dem gleichen Klassen-Namen ein und passen Sie Sie, wie Sie es wünschen. Kommentarautor: Kevin Lynch
Vielen Dank für alle Eure Antworten. In der Tat, begann ich mit der "Struktur ohne ein Thema" css. Ich werde deine Ratschläge befolgen, und entfernen Sie die nutzlose css-Dateien. Es wäre jedoch zu groß sein, um zu verhindern, dass zusätzliche (nutzlose) html Hinzugefügt werden, um das markup. Gibt es eine Möglichkeit zum konfigurieren von jQuery, so dass es nicht fügen Sie zusätzliche styling-markup ? Kommentarautor: Yako

InformationsquelleAutor der Frage Yako | 2013-04-13

  1. 28

    Methoden der markup-Erweiterung Prävention:

    Diese kann getan werden, in ein paar Möglichkeiten, manchmal werden Sie brauchen, um zu kombinieren Sie zum gewünschten Ergebnis erreichen.

    • Methode 1:

      Kann es durch das hinzufügen dieses Attribut:

      data-enhance="false"

      den header, content, footer-container.

      Dies muss auch gedreht werden, in die app laden phase:

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

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

      Mehr zu diesem Thema finden Sie hier:

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

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

      Neu eine Seite erneut verwenden:

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

    • Methode 2:

      Zweite Möglichkeit ist es manuell zu tun mit dieser Zeile:

      data-role="none"

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

    • Methode 3:

      Bestimmte HTML-Elemente verhindert werden kann, dass markup-Erweiterung:

       $(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/

      Wieder initialisieren, bevor jquery-mobile.js initialisiert wird (siehe das Beispiel unten).

    Lesen Sie mehr darüber in meinem anderen tutorial: jQuery Mobile: Markup-Erweiterung von dynamisch hinzugefügten Inhalt

    InformationsquelleAutor der Antwort Gajotres

  2. 7

    ...oder einfach den offiziellen, Thema-weniger-version des CSS speziell zu ermöglichen, das design des custom-theme, während die Aufrechterhaltung der alle von jQuery Mobile Funktionen.

    Sie don ' T haben zu kämpfen mit hacks und überschreibt alle die Zeit und Sie erhalten ein Feuerzeug CSS.

    Win-Win.

    edit: Außerdem beantwortet hier

    InformationsquelleAutor der Antwort zool

  3. 1

    Um ehrlich zu sein bin ich ziemlich enttäuscht, dass jQuery mobile nicht liefern uns mit einer relativ Stil-frei ab kit, arbeiten nur mit dem, was Sie gesagt haben: Ajax, übergänge, cordova...

    Überschreiben der erzeugten css-Klassen ist der absolute Wahnsinn, aber ich habe getan, einige skunk Arbeit und ich konnte reduzieren die unkomprimierten css-Datei die Größe von einem Keuchhusten 233kb nur 27kb, während die wichtigen Aspekte des css wie übergänge, von einer Seite betrachten, etc. Diese Weise werden Sie beginnen, fast so, als würden Sie beginnen mit einer leeren css-Datei.

    Vielleicht werde ich die Datei hochladen auf Github, wenn es keine Nachfrage dafür. Ich möchte noch einige Tests durchführen, um zu sehen, dass ich Sie nicht verlassen, etwas bedeutendes hinter sich.

    InformationsquelleAutor der Antwort Shay

  4. 0

    als von jQuery Mobile 1.4.0, die data-enhanced data-Attribut wurde Hinzugefügt, um die meisten Komponenten. Einstellung diese als true-Attribut wird die Ursache jQuery mobile zu ignorieren Stil der Erweiterung um die Komponente, so werden Sie zu style das element aus, indem Sie Ihre eigenen.

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

    InformationsquelleAutor der Antwort Juan Carlos Alpizar Chinchilla

  5. -6

    i m nô-Experte, aber ich würde lieben, zu teilen à seltsame Methode mit Sie . Tatsächlich, es s sehr hektische Aufgabe : was Sie brauchen, ist zum Bearbeiten der jqm css Zeile für Zeile durch löschen der Eigenschaft Werte nur lassen Sie Leerzeichen vor ; Sie haben nur um sich nach den gewünschten Abschnitten der CSS-Datei anpassen, oder den Wert löschen

    Vergessen Sie nicht, fügen Sie Ihren link rel eigene CSS im head der HTML Seite

    Ich hoffe, es wird für Sie arbeiten

    InformationsquelleAutor der Antwort Zima

Schreibe einen Kommentar