Comment utiliser les thèmes jquery-ui pour styliser les boutons qui ont besoin de 2 images

Question

J'ai un bouton (créé par un designer), qui ne peut pas être représenté par le fond + le rayon de la bordure (il a un effet 3D, donc le .. "devrait être une image aussi bien

Il ressort des tutoriels like this one comment faire ces boutons Cependant, les classes jquery-ui semble avoir que ces (pertinentes):

• .ui-state-default qui détient la image de fond pour le bouton et d'autres composants
• .ui-button - que définit les propriétés de bouton uniquement.

Mais le code est seulement un <input, donc il ne peut pas avoir les deux images, est-il un moyen d'avoir $("..").button() utiliser les images? Je suppose que je peux avoir quelques travées à l'intérieur <button>, mais avoir cela partout est lourd.

Answer 1

il y a plusieurs états associés à des boutons et tous les widgets:

Les éléments suivants sont les classes appropriées et leur relation avec le widget bouton:

• ui-state-default
  • Les propriétés du bouton tel qu'il apparaît sur la page
• ui-state-active
  • Les propriétés du bouton comme on clique dessus
• ui-state-hover
  • Les propriétés du bouton comme il est plané

Dans la feuille de css du thème il y a chacun de ces paramètres au sein les paramètres du bouton qui ont généralement une couleur ou une image définie à partir du themeroller.

Vous pouvez remplacer les propriétés par défaut pour utiliser vos propres images si vous le souhaitez via une autre feuille de style ou réécrire celle de themeroller.

Vous pouvez également définir facilement les paramètres du sélecteur pour vous donner un aspect 3D en définissant les couleurs et les opacités. Si vous n'en avez besoin que pour les boutons et non pour la totalité de votre page, utilisez la fonction de périmètre CSS.

Themeroller is here

Themeroller example with similar button to your example