jQuery UI Tabs großen Stil ändern

StackOverflow https://stackoverflow.com/questions/2459223

Frage

Ich bin mit jQuery UI Tabs und ich brauche majorly das Styling ändern drauf. Ich brauche das Hintergrundbild, die Grenzen rempve, fast alles. Ich brauche es minimal zu sehen, und nicht, wie es ist in sich abgeschlossen.

Was ist der beste Weg, dies zu tun? Ich brauche den Standard-UI für den Kalender jedoch Widget Styling zu verwenden, die auf der gleichen Seite. Ich habe eine Menge Forschung getan und jeder scheint zu Punkt zum Thema Rolle. Allerdings möchte ich nicht nur die Farben und Grenzradien ändern. Ich brauche Mist zu löschen. Thema-Rolle scheint die Dinge einfach zu wie Farben ändern (nicht wirklich nützlich für die reale Welt). Wie kann ich die CSS für die Registerkarten anzupassen, ohne auf der gleichen Seite die Stile der anderen UI-Widgets zu ändern (ich den Kalender bleiben will, wie es ist)?

Ist es überhaupt wert jQuery UI für meine Tabs?

War es hilfreich?

Lösung

Sie sollten überprüfen Keith Wood detaillierte Blog-Post auf Styling JQuery UI Tabs .

Die Antwort auf Ihre Frage

  

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

ist in diesem Abschnitt " entfernen die meisten der Formatierung " von Keith Wood Post.

Zusätzlich dazu gibt es 10 mehr Stil ändert, komplett mit dem CSS erforderlich, um den gewünschten Effekt zu erzielen.

JQuery UI Tabs Styling - Keith Wood Blog-Post

Andere Tipps

Ich entschied mich für meine eigene einfache Registerkarten Funktionalität zu schreiben, wenn ich merkte, dass ich nicht brauchen die meisten seiner integrierten Funktionen, wie zB Laden AJAX Inhalte und dynamische Hinzufügen / Entfernen von Registerkarten. Wenn ich diese Funktionen benötigt werden, wäre es leicht, sie selbst zu implementieren. Was schob mich jQuery UI Tabs zu Graben ist, dass ich anders meine DOM-Elemente strukturieren musste. Ich muß auch um Stil meines Tabs minimal sehen, und ich dachte, dass von Grunde auf neu bauen wäre weniger Aufwand als zu versuchen, viel abstreifen.

Die Funktion, die ich am meisten vermissen, wie jQuery UI Tabs automatisch die Registerkarte wählt durch die # in der URL angegeben (ich weiß, ich kann es einfach kopieren - nur nicht, um es noch bekommen haben)

.

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 ..

Versuchen Sie, die folgenden in Ihrem CSS-Klasse unter der Annahme .mytabs für die zwingende CSS ist. Es sollte Ihnen den Einstieg auf 

.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;
    }

Es ist einfach, mit einigen CSS Sie einfach den Standard CSS geliefert mit jQuery UI außer Kraft setzen kann. Sie sind möglicherweise nicht brauchen! Wichtig, wenn die geänderte CSS erscheint nach dem jQuery UI CSS.

Sie können auch entfernen / hinzufügen Klassen zu jedem Element mit jQuery auf Last, aber das scheint ein wenig überflüssig.

Es sollte ganz mit CSS einfach sein. Ihre Elemente haben IDs und Klassen auf sie und man kann sich mit CSS berühren. Themeroller ist nur eine schnelle Go-to-Sache.

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

Ich frage mich, ob Sie die! Wichtigen Attribute in den Standard jQuery UI-Vorlagen in erster Linie sein sollten. Zum Beispiel, wenn Sie die Registerkarten ändern auf der linken oder rechten Seite zu sein, anstatt oben, sollte die ‚border-bottom‘ ein nicht haben! Wichtig, da diese häufig überschrieben wird.

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

*[class*="ui-"] {
     border-radius:0;
     background-image: none;
     .
     .
     .
}

So können Sie jede Klasse auswählen, beginnt mit „UI-“ und entfernen Sie alles, was Sie von jQuery UI entfernen möchten. 

 #my-tabs * {
    background-image: transparent;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top