jquery Ui Registerkarten großen Stil ändern

Question

Ich benutze jquery UI Tabs und ich muss das Styling weitgehend ändern. Ich muss das Hintergrundbild, die Grenzen, fast alles neu machen. Ich brauche es minimal und nicht so, als wäre es in sich abgeschlossen.

Was ist der beste Weg, dies zu tun? Ich muss jedoch den Standard-UI-Stil für das Kalender-Widget verwenden, das sich auf derselben Seite befindet. Ich habe viel geforscht und alle scheinen auf den Themenroller zu verweisen. Ich möchte jedoch nicht nur die Farben und Randradien ändern. Ich muss Mist löschen. Theme-Roller scheint nur Dinge wie Farben zu ändern (nicht wirklich nützlich für die reale Welt). Wie passe ich die CSS für die Tabs an, ohne die Stile der anderen UI-Widgets auf derselben Seite zu ändern (ich möchte, dass der Kalender unverändert bleibt)?

Ist es überhaupt sinnvoll, die jquery UI für meine Tabs zu verwenden?

Answer 1

Sie sollten sich Keith Woods detaillierten Blogbeitrag unter ansehen, der die JQuery UI Tabs enthält.

Die Antwort auf Ihre Frage

Ich brauche das Hintergrundbild rempve, die Grenzen, fast alles. Ich muss es aussehen minimal

in diesem Abschnitt ist "Remove most of the formatting" von Keith Wood Post.

Zusätzlich gibt es 10 weitere Stiländerungen, komplett mit CSS, um den gewünschten Effekt zu erzielen.

JQuery UI Tabs Styling - Keith Wood Blog Post

Answer 2

Es sollte ziemlich einfach mit CSS sein. Ihre Elemente haben IDs und Klassen und Sie können sie mit CSS berühren. Themeroller ist nur eine schnelle Sache.

Wenn ich mich erinnere, könnten Sie auch die Tabs js anpassen und die Zeilen anpassen, die Bilder hinzufügen (wenn dies das gleiche Plugin ist) oder einfach diese Zeile ganz nach Ihren Wünschen entfernen.

Answer 3

Ich entschied mich, meine eigenen einfachen Tabs zu schreiben, als ich feststellte, dass ich die meisten integrierten Funktionen nicht brauchte, wie das Laden von AJAX-Inhalten und das dynamische Hinzufügen/Entfernen von Tabs. Wenn ich diese Features brauche, wäre es einfach, sie selbst zu implementieren. Was mich dazu brachte, jQuery UI Tabs zu entfernen, war, dass ich meine DOM-Elemente anders strukturieren musste. Ich musste auch meine Tabs so gestalten, dass sie minimal aussehen, und ich dachte, dass das Bauen von Grund auf weniger mühsam sein würde, als zu versuchen, eine Menge loszuwerden.

Die Funktion, die ich am meisten vermisse, ist, wie jQuery UI Tabs automatisch die durch die # in der URL angezeigte Registerkarte auswählt (ich weiß, ich kann es einfach kopieren - bin einfach noch nicht dazu gekommen).

---

UPDATE: Aber ja, wenn du mit dort abgelegt haben, können Sie die CSS mit beliebigen IDs überschreiben Sie haben:

#my-tabs .ui-state-default { 
    background-image: none; /* remove default bg image */ 
} 

und so weiter ..

Answer 4

Versuchen Sie, die in Ihrem css folgt in der Annahme, dass Ihre Klasse .Mytabs für das übergeordnete CSS ist. Es sollte Sie auf loszulegen

.mytabs li { 
     background : white !important; 
     border-top: 0 !important; 
     border-left: 0 !important; 
     border-right: 0 !important; 

    } 
    .mytabs li.ui-state-active { 
     background : white !important; 
     border-top: 0 !important; 
     border-left: 0 !important; 
     border-right: 0 !important; 
     margin: 0; 


    } 

.mytabs li a 
    { 
     color:   Black !important; 
     font-size:  1.4em !important; 
     font-weight: bolder; 
     padding:  4px 1.5ex 3px !important; 
    } 

Answer 5

Es ist einfach, mit einigen CSS Sie einfach den Standard CSS geliefert mit jQuery UI außer Kraft setzen kann. Sie müssen möglicherweise nicht wichtig sein, wenn Ihr geändertes CSS nach dem jQuery UI CSS angezeigt wird.

Sie können auch mit jQuery beim Laden Klassen zu jedem Element entfernen/hinzufügen, aber das scheint ein bisschen unnötig.

Answer 6

Ich frage mich, ob die wichtigsten Attribute in den Standard-Jquery-UI-Vorlagen in erster Linie sein sollten. Wenn Sie z. B. die Registerkarten so ändern, dass sie sich auf der linken oder rechten Seite statt oben befinden, sollte der "Rahmen unten" kein! Wichtig haben, da dies normalerweise überschrieben wird.

Answer 7

Fast alles ist hier bedeckt, aber ich war auf der Suche um und fand einen Weg, Dinge, die Sie wirklich werfen mit einer einzigen Klasse nicht ganz einfach brauchen, während dann die restlichen Attribute bearbeiten.

Auf diese Weise wählen Sie jede Klasse aus, die mit "ui-" beginnt und entfernen Sie alles, was Sie aus jQuery UI entfernen möchten.

Answer 8

#my-tabs * { 
    background-image: transparent; 
}