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

J'ai utilisé le bouton jQuery UI partout sur ma page, mais je n'ai pas trouvé un moyen de contourner ce qui semble être un problème simple. Je veux certains de mes boutons pour être plus petit que l'autre, cela devrait être aussi simple que le réglage de la CSS du texte du bouton à quelque chose comme, font: .8em; Cependant jQuery UI prend votre élément DOM et enveloppements il:Modification de la taille du bouton de l'interface utilisateur jQuery?

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

Alors si j'ai un <button class="small-button">Small button!</button>, jQuery placera le texte dans une plage enfant. Toute taille de police donnée à la classe small-button sera ignorée.

Il doit y avoir un moyen de contourner cela sans piratage de la façon dont jQuery fait ses boutons. Des idées?

Source

2010-08-01 chum of chance

Si c'est le style ui-button-text avec font-size directement, vous pouvez le remplacer à un niveau supérieur en appliquant! Important. Tels que:

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

EDIT: essayez de paramétrer un style CSS directement sur .ui-button-text hériter:

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

Cela devrait également l'importance sur le .small-button hors de propos!.

Source

2010-08-01 03:15:44 rickp

Cela ne fonctionne malheureusement pas. La classe de petit bouton est suspendue à l'élément de bouton et ne pas écraser la durée interne. –

Jetez un oeil à mon édition, qui pourrait vous aider. Il serait utile de voir votre exemple complet en action (avec tous les CSS appliqués). Je vais me rendre compte que vous utilisez probablement un fichier CSS jQuery UI pour le bouton, cela pourrait être résolu en modifiant directement ce CSS pour obtenir vos besoins souhaités. – rickp

Cela a permis de diminuer la hauteur du bouton pour moi (par défaut thème Fluidité est la ligne-hauteur de 1,4):

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

Source

2011-03-04 16:30:18 Tim

Vous pouvez créer des boutons de taille en modifiant le rembourrage de l'élément span qui est contenu 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>

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>

qui comprend certainement les plus id et class balises qui ont été initialement fournis. Vous pouvez modifier la taille de vos boutons en ajoutant plus de remplissage à l'élément span.ui-button-text.

Like So ..

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

Source

2011-03-04 16:47:57

il suffit de changer la taille de police de touche;).

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

Source

2011-03-27 12:10:31 xxx

Lors de l'utilisation de l'identifiant unique de l'élément, le sélecteur 'input: submit' est juste inutile. –

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

aux stylesheet de page add:

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

Source

2012-01-09 23:21:36 TrophyGeek

Voici ce que j'utilise dans mes sites Web pour configurer les tailles de police afin que mes boutons tailles sont les mêmes que sur le jQuery UI website.Cela fonctionne parce que c'est exactement comment le jQuery UI website 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 la police comme pour l'élément de corps, le réglage de la taille de la police pour tout le reste trivial devient 100% = 10px. Il suffit de faire attention à l'effet en cascade en utilisant des pourcentages - 100% d'un élément enfant sera égal à la taille de police de l'élément parent.

Source

2012-07-22 23:55:53 Dean

Ma solution nécessaire pour travailler sur les nouveaux éléments de menu et

Le premier à sélectionner les éléments correspondants à la fois 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 inheiritance

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

Source

2013-04-22 21:15:50 Benno

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

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

Source

2013-05-20 06:47:07

Je l'ai fait et cela fonctionne très bien.

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

Source

2014-09-24 22:17:06 KungFuMonkey

Je ne pense pas que cela fonctionnera. Je l'ai essayé avec jQuery 1.11.2 et il a échoué. Cela devrait être la bonne façon: $ ("button") .button(). Css ("font-size", "0.8em"); –

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

et mon css:

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

Source

2016-05-31 17:21:02

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

Répondre

Questions connexes