jQuery Mobile: Comment personnaliser le bouton

Comment puis-je changer la <a data-role="button"> bouton du fond de mon image? Aussi, comment puis-je ajouter mes icônes personnalisées sur le dessus d'un bouton à gauche?

OriginalL'auteur Venkat Papana | 2011-09-22

  1. 10

    Donner le lien d'une de la classe et utiliser les CSS pour modifier l'image d'arrière-plan.

    <a data-role="button" class="my-button">

    ...

    .my-button {
    background-image: url('images/my-button.png') !important;
}
    Ce n' "!important"?
    fondamentalement, signifie "ne pas remplacer ce style." Vraiment, elle n'est pas une bonne pratique à utiliser. Voir stackoverflow.com/questions/7369216/...

    OriginalL'auteur Greg

  2. 10

    Je dirais que la méthode recommandée pour personnaliser un jQuery Mobile bouton est l'ajout d'un thème personnalisé.

    <a data-role="button" data-theme="my-site">Button</a>

    Qui vous donnera plus de contrôle sur les différents éléments et les états du bouton. Par exemple, vous pouvez cibler les différents états du bouton en CSS par l'écriture de code pour la classe associée à votre thème personnalisé nom (ils sont automatiquement ajoutés à la touche):

    .ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }

    Garder à l'esprit que, par défaut, les boutons sont faits de frontières, les ombres, et bien sûr le dégradé d'arrière-plan. Il y a aussi d'autres éléments HTML à l'intérieur du bouton, qui sont générées automatiquement par le framework. Selon ce exactement que vous souhaitez personnaliser, vous pourriez avoir besoin pour cibler d'autres catégories à l'intérieur du bouton (ui-icon, ui-btn-texte, ui-btn-intérieure, etc).

    Voici un tutoriel qui explique comment faire la personnalisation avancée de l'jQuery Mobile boutons. Les articles montre comment faire une base de personnalisation, comment faire pour réinitialiser le thème jQuery Mobile, et comment tourner le bouton par défaut dans tout ce que vous voulez:

    http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

    OriginalL'auteur appcropolis