Überschreibe Jquery Mobile CSS

8

Ist es möglich, die bereits formatierten JQuery Mobile-Elemente (Schaltflächen, Listen usw.) durch eine separate benutzerdefinierte CSS-Datei zu ersetzen?

Wenn ja, wie würde ich die Elemente referenzieren?

Danke

    
jcrowson 26.10.2011, 15:21
quelle

4 Antworten

14

Ich kenne keinen offiziellen, eleganten Weg, es zu tun, aber ich schaue in nicht-chass-Dateien nach Klassen und füge dann Dinge wie diese in eine .css-Datei ein, die nach enthält die jquery mobile one:

.ui-Titel .ui-Titel {Rand rechts: 20px; Rand links: 20px;}

.ui-footer .ui-Titel {Rand rechts: 20px; Rand links: 20px; Leerraum: normal;}

Auch Firebug und Dev. Werkzeuge (Chrom) sind deine Freunde - untersuche Elemente und ihre Stile.

Libby

    
Libby 26.10.2011, 15:31
quelle
21

Ja, Sie können alle CSS-Stile überschreiben, die bereits in jQuery Mobile definiert sind, aber schauen Sie sich an, wie Sie das machen können. Theming-Übersicht in der jQuery-Dokumentation enthält Informationen zu Ihrer Frage. Insbesondere:

  

Überschreibende Themen

     

Die Themen sind als fester Ausgangspunkt gedacht, sollen aber sein   angepasst, um die benutzerdefinierten Designelemente hinzuzufügen, die Ihre Website oder   App einzigartig. Da alles von CSS gesteuert wird, ist es einfach, a zu verwenden   Webinspektor-Tool, um die gewünschten Stileigenschaften zu identifizieren   ändern. Die Menge der Themenklassen (global) und der semantischen Struktur   Klassen (widget-spezifisch), die zu Elementen hinzugefügt werden, bieten eine Vielzahl von   mögliche Selektoren, um Style-Overrides gegen sie auszurichten. Wir empfehlen   Hinzufügen eines externen Stylesheets zum Kopf, nach der Struktur platziert   und Themen-Stylesheet-Referenzen, die all Ihren Stil enthalten   überschreibt. Dies ermöglicht es Ihnen, einfach auf neuere Versionen des zu aktualisieren   Bibliothek, da Außerkraftsetzungen vom Bibliothekscode getrennt sind.

    
Jorge 26.10.2011 15:28
quelle
5

Es gibt ein riesiges Missverständnis über die Verwendung eigener Stile mit JQM, die ich überall gefunden habe, einschließlich SO. Der Trick bei der Verwendung eines eigenen CSS mit JQM besteht darin, wie Sie Ihr eigenes CSS schreiben. Im Allgemeinen müssen Sie zuerst das Element angeben, dem Sie das JQM-CSS mit einer ID überlagern möchten, und dann die JQM-Klasse an diese ID anhängen. Um zum Beispiel den JQM-Standard-Link-Rand-CSS von einem Bild-Link zu entfernen, wobei # img_button_1 die ID ist, die dem Anker-Elternteil des Bildes gegeben wird, würden Sie Ihr CSS wie folgt codieren ...

Das HTML ...

%Vor%

Ihr überschreiben CSS ...

%Vor%

Ich habe das vorher mit einigen Arbeitsbeispielen beantwortet, die hier gefunden werden können

Jquery Mobile - Mit Bild als Link - Blaue Linie unter Bild

Sie können dieselbe Methode zum Auflösen all Ihrer JQM-CSS-Konflikte verwenden. Jetzt können Sie JQM überdenken, um Ihre gewünschten Ergebnisse zu erzielen. Sie wissen, wie einfach es ist, diese Konflikte zu lösen, indem Sie CSS-Spezifizierungen in Ihrem eigenen CSS verwenden. Hoffe das hilft!

    
Epiphany 09.07.2013 19:04
quelle
0

Überprüfen Sie die Versionshinweise für jede neue Version.

Es gibt nützliche Dinge über die Änderungen in der css-Hierarchie. Natürlich wird dies mit jeder Veröffentlichung in der Regel stabiler, aber es wird wahrscheinlich etwas geben, was Sie wissen müssen.

1.4 CSS-Upgrade-Dokument: Ссылка

    
Simon_Weaver 08.04.2014 22:37
quelle