Je voudrais utiliser plusieurs boutons sur une seule page, mais je veux avoir un groupe qui a un style (par exemple la couleur rouge) et un autre avec un style différent (par exemple fond gris et la couleur rouge).Bouton jQueryUI avec plusieurs styles sur une seule page
Est-ce que c'est en quelque sorte possible?
Oui, vous pouvez. La façon de le faire serait d'utiliser l'option css scope lors du téléchargement de l'interface utilisateur - http://jqueryui.com/download/
Il suffit d'inclure le cadre, et les deux stylesheets inclus avec les différents styles. Assurez-vous d'appliquer différentes portées CSS (par exemple .light-style et .dark-style).
Ensuite, dans votre code HTML, à chaque fois que vous affichez les boutons, ajoutez l'étendue CSS appropriée à l'élément parent afin que le style correct soit sélectionné.
Vous pouvez également combiner manuellement les deux feuilles de style pour économiser de l'espace. Ceci suppose que vous ne voulez que les deux styles de boutons différents.
Lire la section thématisation ici: http://api.jqueryui.com/button/
Vous pouvez toujours ajouter la classe supplémentaire pour changer le style. Ainsi, après bouton d'appel() sur un élément, vous pouvez:
$(element).removeClass("ui-button-text");
$(element).addClass("ui-button-text-2");
et bien sûr, vous devez définir votre propre classe CSS pour cela:
.ui-button-text-2 { color: red; }
Ceci est bien sûr maladroite, parce que vous avez besoin utiliser deux appels au lieu d'un seul appel de bouton(). Mais jQuery peut être étendu - vous pouvez simplement créer une méthode $.themedbutton() qui accepte des paramètres supplémentaires ...
C'est encore mieux que ma solution, dans la plupart des cas. :-) – nagylzs
Cela semble très bien. Mais pour l'instant j'ai décidé de styler le simple bouton par CSS sans jQ UI.button(), parce que je le trouve plus flexible (je peux utiliser des sprites pour les icônes de boutons, les changer sur hover, etc.) et mon fichier CSS est plus petit. – petriq