Wie wendet man ein CSS-Thema nur auf ein bestimmtes jQuery-UI-Element an?

Question

Ich habe bereits eine Website mit meinem eigenen CSS-Thema erstellt. Ich verwende jQuery UI "Tabs" Widget aber keine CSS von jQuery-UI.

Jetzt versuche ich, das "Date Picker"-Widget in eine meiner Seiten einzufügen. Es wäre toll, wenn ich jQuery-UI Standard-Thema, das gerade gut ist wiederverwenden könnte.

Das Problem ist, dass das Datumspicker-Thema auch auf meine Registerkarten-CSS angewendet wird. Zum Beispiel ist die "ui-widget" CSS-Eigenschaften auf beide Datum Picker und Registerkarten Elemente angewendet.

Ich kann nicht scheinen, um einen Weg, um die CSS-Eigenschaften nur das Datum Picker anwenden zu finden. Ich kann nicht sehen, eine "Super-Selektor", die nur auf das Datum Picker DIV gilt.

Wie kann man das am besten handhaben?

---

[EDIT] Die datepicker Widget ist das eigentliche Problem. Ich kann keinen spezifischen CSS-Stil auf es anwenden. Hier ist der Start-Code des DIV, die Pop-ups erhalten:

<div style="position: absolute; top: 300.4px; left: 149px; display: block;" id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">

Daher kann ich keinen Super-Selektor hinzufügen. Was wäre toll wäre, dass das Datum Picker Widget unterstützt CSS-Anwendungsbereich . Aber das tut es nicht. Ich bin stecken manuell Bearbeiten der jQuery-CSS-Datei.

Der Date Picker wird derzeit umstrukturiert . Hoffentlich wird der neue Code dieses Problem lösen.

Answer 1

$(window).load(function() {
   $('#ui-datepicker-div').addClass('CSS-Scope-Class');
});

El .addClass() Die jQuery-Funktion fügt dem Datepicker die nötige Klasse hinzu, damit er vom Stylesheet des Themas aufgegriffen werden kann.

Ich musste an das Ladeereignis des Fensters und nicht an das Bereitschaftsereignis des Dokuments anknüpfen, weil der Datumsanzeiger zu diesem Zeitpunkt noch nicht eingefügt worden war.

Hinweis: Es gibt eine kleine Verzögerung zwischen dem Hinzufügen der Datumsauswahl zum DOM und der Anwendung der neuen Klasse, was bedeutet, dass die Datumsauswahl möglicherweise ungestylt erscheint, während die Seite fertig geladen ist.

Answer 2

Sie können Ihr Thema mit dem Themenroller hier anpassen http://jqueryui.com/themeroller/

Suchen Sie das Element, das Sie mit der Firebug-Funktion "DOM inspizieren" gestalten möchten, um die Klasse auszuwählen, die Sie auswählen möchten.

Answer 3

Ich hatte das gleiche Problem mit dem Datepicker und dem Akkordeon. Ich wollte das neue Styling für den Datepicker, aber nicht für das Akkordeon. Ich nahm den einfachen Weg, kopierte die relevanten Teile von ui.theme.css und fügte .ui-datepicker vor allen Stilen ein. Dies zielt nur auf den Datepicker und lässt alle anderen UI-Plugins in Ruhe.

Ich bin mir nicht sicher, ob das der beste Weg war, aber für meine Zwecke hat es funktioniert.

Answer 4

Ich könnte etwas übersehen, aber könnten Sie nicht einfach eine Klasse zu Ihrem Datum Picker Objekt hinzufügen und wählen Sie auf das?

Answer 5

Versuchen Sie es: $('#cmsContent').css('margin', '0');