jquery onglets ui majeur de changement de style

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

Question

J'utilise des onglets de l'interface utilisateur jquery et je dois changer majorly le style sur elle. Je dois rempve l'image d'arrière-plan, les frontières, presque tout. Je en ai besoin de regarder un minimum, et non pas comme il est autonome.

Quelle est la meilleure façon de le faire? Je dois utiliser le style de l'interface utilisateur par défaut pour le widget calendrier cependant, qui est sur la même page. Je l'ai fait beaucoup de recherches et tout le monde semble pointer vers le rouleau à thème. Cependant, je ne veux pas seulement changer les couleurs et les rayons frontière. Je dois supprimer la merde. thème rouleau semble changer juste des choses comme des couleurs (pas vraiment utile pour le monde réel). Comment puis-je adapter les onglets pour css sans changer les styles des autres contrôles d'interface utilisateur sur la même page (je veux que le calendrier pour rester comme il est)?

Est-il même la peine d'utiliser l'interface utilisateur jquery pour mes onglets?

Était-ce utile?

La solution

Vous devriez vérifier blog post détaillé Keith Wood sur style JQuery UI onglets .

La réponse à votre question

  

Je dois rempve l'image d'arrière-plan, les frontières, presque tout.   Je en ai besoin de regarder minimal

est dans cette section " Retirez le gros du travail " du poste de Keith Wood.

En plus de cela, il y a 10 autres changements de style, complet avec le CSS nécessaire pour obtenir l'effet désiré.

JQuery UI onglets Styling - Keith Bois Blog Post

Autres conseils

J'ai choisi d'écrire mon propre fonctionnalité onglets simple quand, je me suis aperçu que je ne l'ai pas besoin la plupart de ses fonctionnalités intégrées, telles que la teneur en AJAX de chargement et dynamique ajout / suppression des onglets. Si je devais ces caractéristiques, il serait facile de les mettre en œuvre moi-même. Ce qui m'a poussé à fossé jQuery UI est Tabs que je devais structurer mes éléments DOM différemment. J'ai aussi besoin de style mes onglets pour regarder un minimum, et je pensais que la construction à partir de zéro serait moins d'effort que d'essayer de dépouiller beaucoup.

La fonction me manque le plus est de savoir comment jQuery UI onglets sélectionne automatiquement l'onglet indiqué par le # dans l'URL (je sais que je peux le copier - tout simplement pas eu à encore).

MISE À JOUR: Mais, oui, si vous coller avec elle, vous pouvez remplacer le CSS en utilisant les ID que vous avez: 

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

et ainsi de suite ..

Essayez ce qui suit dans votre css en supposant que votre classe est .mytabs pour le css primordial. Il devrait vous aider à démarrer sur 

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

Il est facile avec un peu de CSS, vous pouvez facilement remplacer la norme CSS livré avec jQuery UI. Vous ne pouvez pas besoin! Important si votre CSS modifié apparaît après la CSS de jQuery UI.

Vous pouvez également supprimer / ajouter des classes à chaque élément avec jQuery de la charge, mais cela semble un peu inutile.

Il devrait être assez simple avec CSS. Vos éléments ont des ID et des classes sur eux et vous pouvez les toucher avec CSS. Themeroller est juste un go-to chose rapide.

Si je me souviens, vous pouvez également ajuster les onglets js et ajuster les lignes qui ajoutent des images (si c'est le même plug-in) ou tout simplement supprimer cette ligne tout à fait à votre goût.

Je me demande si les attributs importants! Doivent être dans les modèles de défaut jquery ui en premier lieu. Par exemple, si vous modifiez les onglets sur la gauche ou à droite au lieu de haut, le doit « border-bottom » pas un! Important, car cela est généralement remplacé.

Presque tout est couvert, mais je cherchais autour et a trouvé un moyen de jeter des choses que vous avez vraiment pas besoin assez facilement avec une seule classe, puis en modifiant les attributs restants. 

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

De cette façon, vous sélectionnez toutes les classes qui commence par « UI- » et supprimer tout ce que vous voulez supprimer de jQuery UI. 

 #my-tabs * {
    background-image: transparent;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top