web-dev-qa-db-fra.com

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

J'ai utilisé le bouton de l'interface utilisateur jQuery sur toute ma page, mais je n'ai pas trouvé de moyen de contourner ce qui semble être un problème simple. Je veux que certains de mes boutons soient plus petits que les autres, ce qui devrait être aussi simple que de définir le CSS du texte du bouton à quelque chose comme, font: .8em;

<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 placera le texte dans un span enfant. Toute taille de police donnée à la classe small-button sera ignorée.

Il doit y avoir un moyen de contourner ce problème sans s'interroger sur la façon dont jQuery fabrique ses boutons. Des idées?

javascriptjqueryjquery-uijquery-ui-button
49
chum of chance

Si vous appelez directement ui-button-text avec font-size, 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.

36
rickp

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;
}
13
Tim

Voici ce que j'utilise dans mes sites Web pour configurer les tailles de police de manière à ce que la taille de mes boutons soit identique à celle du site Web jQuery UI . Cela fonctionne parce que c'est exactement comme le site Web jQuery UI le fait!

/* 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;
}

En définissant les propriétés de taille de police comme pour l'élément body, définir la taille de police pour tout le reste devient trivial comme 100% = 10px.

Faites attention à l'effet de cascade lorsque vous utilisez des pourcentages - le 100% d'un élément enfant sera égal à la taille de la police de l'élément parent.

6
Dean

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

Ce balisage/JavaScript ...

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

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

Résultats dans ce balisage transformé ...

<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>

Ce qui inclut très certainement les balises id et class fournies à l'origine. Vous pouvez modifier la taille de vos boutons en ajoutant davantage de remplissage à l'élément span.ui-button-text.

Ainsi..

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

Il suffit de changer le bouton taille de police;).

<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. ;)

3
xxx

J'ai utilisé une combinaison de deux suggestions ci-dessus. Il est assez facile de modifier l'interface utilisateur comme je l'aime.

Dans la feuille de style de la page, ajoutez:

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}
3
TrophyGeek

Ma solution devait également fonctionner avec les nouveaux éléments de menu.

Le premier à sélectionner les éléments correspondants pour le menu et le bouton

.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}

Et le second comme ci-dessus pour forcer l'héritage

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

J'ai fait ça et ça marche bien.

$( "button" ).button("font-size", "0.8em");
1
KungFuMonkey

<input type="submit" value="Mostrar imágenes">

et mon css:

input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }
0
Marinha do Nascimento

Utilisez jQuery au moment de l'exécution, sans modifier CSS. Cela vous donne beaucoup plus de flexibilité.

$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});
0
Dmitri K