Ich benutze jquery UI Tabs und ich muss das Styling wesentlich ändern. Ich muss das Hintergrundbild, die Grenzen, fast alles neu machen. Ich brauche es, um minimal auszusehen, und nicht, 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 so bleibt wie er ist)?
Ist es überhaupt sinnvoll, die jquery UI für meine Tabs zu verwenden?
Sie sollten den ausführlichen Blog-Beitrag von Keith Wood auf JQuery UI-Tabs testen.
Die Antwort auf Ihre spezifische Frage
Ich muss das Hintergrundbild, die Ränder, fast alles neu machen. Ich brauche es, um minimal auszusehen
ist in diesem Abschnitt " Entfernen Sie die meisten Formatierungen " von Keith Woods Beitrag.
>Zusätzlich gibt es 10 weitere Stiländerungen, komplett mit CSS, um den gewünschten Effekt zu erzielen.
Ich entschied mich, meine eigenen einfachen Tabs zu schreiben, als ich feststellte, dass ich die meisten integrierten Funktionen nicht benötigte, 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 der Aufbau von Grund auf weniger mühsam wäre, als zu versuchen, sich viel zu entfernen.
Die Funktion, die ich am meisten vermisse, ist, wie jQuery UI Tabs automatisch den in der URL durch # markierten Tab auswählt (ich weiß, ich kann es einfach kopieren - bin einfach noch nicht dazu gekommen).
UPDATE: Aber, ja, wenn Sie dabei bleiben, können Sie das CSS mit den vorhandenen IDs überschreiben:
%Vor%und so weiter ..
Es ist einfach, mit einigen CSS können Sie das Standard-CSS, das mit jQuery UI ausgeliefert wird, leicht überschreiben. Sie müssen möglicherweise nicht wichtig sein, wenn Ihr geändertes CSS nach dem jQuery UI CSS angezeigt wird.
Sie können mit jQuery beim Laden auch Klassen zu jedem Element entfernen / hinzufügen, aber das erscheint ein wenig unnötig.
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önntest du auch die Tabs js anpassen und die Zeilen anpassen, die Bilder hinzufügen (wenn es das gleiche Plugin ist) oder diese Zeile ganz nach Belieben entfernen.
Ich frage mich, ob die wichtigen Attribute in erster Linie in den Standardvorlagen von jquery ui enthalten 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.
Fast alles ist hier abgedeckt, aber ich habe mich umgesehen und einen Weg gefunden, Dinge, die man wirklich nicht braucht, mit einer einzigen Klasse zu werfen, während man dann die restlichen Attribute bearbeitet.
%Vor%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.
Tags und Links javascript jquery jquery-tabs jquery-ui-tabs themeroller