Kann ich den gesamten Stil von jQuery UI-Tabs entfernen, ohne die Stile anderer UI-Komponenten zu unterbrechen?

8

Ich möchte jQuery UI-Tabs vollständig anpassen, ohne die Stile der jQuery UI-Datumsauswahl zu unterbrechen? Ist das machbar oder sollte ich eine benutzerdefinierte Arbeit machen und keine jQuery UI Tabs verwenden?

    
Idrees 26.02.2012, 08:54
quelle

7 Antworten

4
%Vor%

Dieses Beispiel zeigt die meisten der ui-Klassen, die angewendet werden können. Sie können sie für Kinder von z.B. #mytab nur ..

%Vor%

Dies ist nicht gerade bequem, aber Sie können immer noch sagen, die jquery ui Stile in jedem anderen Element.

über den Datepicker, solange Sie sicherstellen, dass die oben definierten Stile nicht in den divs verwendet werden, die den Inhalt enthalten, sollten Sie in Ordnung sein. Die meisten Klassen haben das Präfix ".ui-datepicker-" oder ".ui- Tabs - "trotzdem sollten sie nicht stören ..

    
Lucy 26.02.2012, 09:30
quelle
1

Es ist möglich, aber ich denke, es ist einfacher, eigene Tabs zu programmieren. Schau dir diesen Link an: jquery ui tabs große Stiländerung

    
Alex 26.02.2012 09:10
quelle
1

Vielleicht hilft dieses minimal-intrusive css-Skelett. Beachten Sie, dass nur die von jQuery UI definierte ui-tabs-Klasse (und ihre absteigende ul & gt; li) formatiert ist, wodurch andere ui-bezogene Klassen in theme-roller-generierten jquery-ui-1.8.18x.custom.css (I bekam nie diese Idee durch bloßes Studieren dieser Datei).

%Vor%     
Tat 09.03.2012 03:00
quelle
1

Stolperte über ähnliches Problem. Lösung und Demo unten aufgeführt.

Ich möchte der folgenden Quelle danken, die mir ein gutes Beispiel für den CSS-Code geliefert hat: Ссылка

Außerdem möchte ich dem jquery Team und seinem Beispielcode von hier - Ссылка

danken

HTML

%Vor%

CSS

%Vor%

JS

%Vor%

DEMO

    
Barmaley 17.08.2015 20:55
quelle
1

Verwenden Sie einfach die jQuery-Verknüpfung, um die ui-Widget-Klasse nach dem Anwenden des Tabs-Widgets aus dem Registerkarten-Containerelement zu entfernen. Das meiste unerwünschte Styling ist der Klasse ui-widget zugeordnet.

%Vor%

In einem anderen Fall mit stärker gestylten Inhalten habe ich festgestellt, dass mehr Klassen entfernt werden müssen, nicht nur vom Container div, sondern von allen Elementen darin.

%Vor%     
Garland Pope 10.12.2016 21:57
quelle
0

Wahrscheinlich wird es aufgrund der Abhängigkeiten zwischen den Widgets nicht machbar sein.

Verwenden Sie jedoch einfach die Kaskadierung von CSS. Fügen Sie den Verweis auf das CSS der jQuery-Benutzeroberfläche hinzu, und fügen Sie dann einen Verweis auf Ihren eigenen ein, der die jQuery-UI-Stile überschreibt.

    
alex 26.02.2012 08:57
quelle
0

Der kürzeste Weg wenn Sie wirklich "nur" die Tab-Funktionalität haben wollen:

RDIY "mach es lieber selbst"

jsFiddle demonstration (mit dem Beispiel von jQuery): Ссылка

Wenn Sie kein jQuery-Styling benötigen, was benötigen Sie eigentlich? Nicht viel ...

%Vor%

Sie nur mit diesem funktionalen CSS verlassen:

%Vor%

HTML-Syntax ist die gleiche mit zusätzlichen Funktionen:
1. Panels mit Inhalt sind standardmäßig ausgeblendet, Vorauswahl muss für tab & amp; panel manuell durchgeführt werden indem Sie ihnen die "aktive" Klasse geben (aber das wird oft gesucht ...). Benutzer-Auswahl Registerkarten und Ampeln und "aktive" Klasse them-geben ist automatisch getan.
2. Tab ist ein tatsächlicher Link? - Kein Problem - geben Sie einfach den Link "realLink" Klasse.

%Vor%     
jave.web 21.09.2016 15:43
quelle

Tags und Links