Changer la taille du bouton de l'interface utilisateur jQuery?

Question

J'ai été en utilisant l'INTERFACE utilisateur de jQuery bouton tous sur ma page, je n'ai cependant pas trouvé un moyen de contourner ce qui semble être un problème simple. Je veux que certains de mes boutons pour être plus petit que l'autre, cela devrait être aussi simple que de créer le CSS du texte du bouton de quelque chose comme, font: .8em; Cependant jQuery UI prend votre élément du DOM et de l'enveloppe:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

Donc, si j'ai un <button class="small-button">Small button!</button> jQuery va placer le texte dans un enfant span. La police de taille donnée à l' small-button classe sera ignoré.

Il doit y avoir un moyen de contourner cela sans le piratage comment jQuery rend ses boutons. Des idées?

Answer 1

S'il s'agit du style ui-button-text avec font-size directement, vous pouvez le remplacer à un niveau supérieur en appliquant! Important. Tel que:

 .small-button {
   font-size: .8em !important;
}
 

EDIT: essayez de définir un style CSS directement sur .ui-button-text pour hériter:

 .ui-button-text {
   font-size: inherit !important;
} 
 

Cela devrait également rendre le! Important sur le .small-button non pertinent.

Answer 2

Cela a contribué à réduire la hauteur du bouton pour moi (le thème par défaut de Smoothhness est line-height de 1,4):

 .ui-button .ui-button-text
{
 line-height: 1.0;
}
 

Answer 3

Voici ce que j'utilise dans mes sites pour l'installation de la police, de dimensions, de sorte que mon bouton tailles sont les mêmes que sur le site de jQuery UI. Cela fonctionne parce que c'est exactement la façon dont le site de jQuery UI ne!

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

Par le réglage de la taille de police des propriétés de l'élément de corps, le réglage de la taille de police pour tout le reste devient trivial que 100% = 10px.

Il suffit de regarder à l'effet de cascade lors de l'utilisation de pourcentages - un enfant de l'élément 100% sera égal à l'élément parent de la taille de police.

Answer 4

Vous pouvez créer différentes tailles de boutons en modifiant le remplissage de l'élément span qui est contenue dans le balisage jQuery génère, comme Tim suggère.

Ce balisage/JavaScript...

$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>

Les résultats de cette transformée de balisage...

<button class="some-class ui-button ui-widget ui-state-default ui-corner-all 
          ui-button-text-only" id="some-id" role="button" aria-disabled="false">
<span class="ui-button-text">some button</span>
</button>

Qui, certainement, comprend l' id et class tags qui ont été fournis. Vous pouvez modifier la taille de vos boutons en ajoutant plus de rembourrage pour le span.ui-button-text élément.

Comme Si..

button#some-id .ui-button-text {
    /* padding values here to your liking */
}

Answer 5

Il suffit de changer la taille du bouton;).

 <asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" />
 

Maintenant, ajoutez un script jQuery au bouton

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('input:submit, #btn2').button();
        });
    </script>
 

Bonne chance. ;)