bouton jQuery UI: Comment remplacer les classes utilisées pour un seul bouton?

Question

J'utilise la bibliothèque jQuery UI de sortir de la boîte, basée sur un thème.

Avoir des liens fournis sous forme de boutons est grande, mais je dois passer outre des boutons avec des couleurs différentes.

Comment puis-je spécifier une classe spécifique pour un bouton particulier à utiliser?

Answer 1

Je dirais, donner le bouton particulier ou les boutons d'un identifiant et:

$("#buttonId").removeClass().addClass("myClass");

Si vous voulez appliquer à plusieurs boutons chacun avec son propre id:

$("#buttonId, #anotherButton").removeClass().addClass("myClass");

Answer 2

Je recommande la recherche au CSS pour les boutons jQuery UI et dupliquer la structure du CSS qui spécifie les boutons, mais avec votre propre classe au lieu des classes jQuery UI. Faire les remplacements que vous avez besoin dans ce CSS et l'inclure après la CSS de jQuery UI. CSS utilise une combinaison du sélecteur plus spécifique et commande pour déterminer les valeurs à appliquer. En faisant cela, vous assurer que vous avez la même spécificité pour chacun des sélecteurs CSS utilisés par jQuery afin que votre CSS a priorité basé sur l'ordre.

Smashing Magazine a un article qui a probablement plus d'informations que vous voulez le savoir au sujet de la question de la spécificité.

Answer 3

Vous pouvez aussi:

1. Utilisez les outils de développement dans le navigateur (Chrome a grands).
2. Voir quelle classe de jQuery UI définit la couleur du bouton.
3. surchargent dans votre fichier CSS avec l'attribut "! Important".

Par exemple, quand je avais besoin de passer outre le contrôle de spinner jQuery UI et de supprimer les frontières, je trouve la classe qui définit les frontières en utilisant Chrome Dev Tools. Puis, en CSS: J'ai ajouté quelque chose comme ça:

.<jquery-ui-class-that-i-found> { border: 0px !important; }

fonctionne très bien!

Answer 4

Je pense que l'API de bouton devrait inclure une configuration comme celui-ci où vous pouvez changer la couleur, etc. en passant des paramètres

$("button").button({background:"FFFFFF",hover:"FFFFF"}); 

est juste une idée où vous pouvez modifier certains de ses attributs visuels.

Answer 5

J'ai trouvé cela a fonctionné pour moi: $ ( "BtnSave. ") RemoveClass (" ui-état par défaut ") addClass (" SaveButtonStyling")..

Au fond nécessaire pour supprimer la classe ui-default état, puis ajoutez ma propre pour la couleur de fond, etc.

Thsi signifie que la classe etc coin arrondi et je resté mis a pu modifier la couleur de fond, etc.

Answer 6

Si vous souhaitez simplement avoir une supplémentaire / différente pour les boutons particulier, il suffit de donner les boutons certaines classes comme class = « mybuttonclass otherbuttonclass » - plusieurs classes sont autorisés. Ensuite, il suffit d'ajouter des règles CSS pour votre classe (s)

.mybuttonclass
{
   background-color: red;
}
.otherbuttonclass
{
   color:white;
}

ainsi l'arrière-plan est rouge avec du texte blanc - ou quelle que soit la combinaison que vous voulez, ce qui aurait préséance sur les éléments de la cascade (CSS) au-dessus. (Hypothèse est que votre fichier .CSS est enchaînée après le fichier css UI jquery, ou est en ligne sur la page, toutes deux l'emporterait sur le css jQuery UI.