Modifica delle dimensioni del pulsante dell'interfaccia utente jQuery?

Question

Ho utilizzato il pulsante dell'interfaccia utente jQuery su tutta la pagina, tuttavia non ho trovato il modo di aggirare quello che sembra essere un problema semplice. Voglio un po 'dei miei pulsanti per essere più piccolo rispetto agli altri, questo dovrebbe essere semplice come l'impostazione del CSS del testo del pulsante a qualcosa di simile, font: .8em; Tuttavia jQuery UI prende il vostro elemento DOM e lo avvolge:

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

Così se ho un <button class="small-button">Small button!</button> jQuery posizionerà il testo in un intervallo figlio. Qualsiasi dimensione di carattere data alla classe small-button verrà ignorata.

Ci deve essere un modo per aggirare questo senza aver hackerato il modo in cui jQuery fa i suoi pulsanti. Qualche idea?

Answer 1

Se è in stile ui-button-text con font-size direttamente, è possibile sovrascriverlo a un livello superiore applicando! Importante. Come ad esempio:

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

EDIT: provate ad impostare uno stile CSS direttamente sul .ui-button-text ereditare:

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

Questo dovrebbe anche fare l'importante sulla .small-button irrilevante!.

Answer 2

questo ha aiutato diminuire l'altezza del pulsante per me (scorrevolezza tema di default è line-height di 1.4):

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

Answer 3

È possibile creare diversi pulsanti di dimensioni modificando il padding dell'elemento arco che è contenuto all'interno del markup genera jQuery, come suggerisce Tim.

Questo markup/JavaScript ...

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

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

I risultati in questo markup trasformato ...

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

che comprende certamente il id e class tag che sono stati originariamente forniti. È possibile modificare le dimensioni dei pulsanti aggiungendo più padding all'elemento span.ui-button-text.

Come Quindi ..

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

Answer 4

Basta cambiare il pulsante di font-size;).

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

Ora aggiungere uno script jquery al pulsante

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

Good Luck. ;)

Answer 5

Ho utilizzato una combinazione di due suggerimenti sopra. È abbastanza facile modificare l'interfaccia utente proprio come piace a me.

Per foglio di stile di pagina Aggiungi:

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

Answer 6

Ecco quello che uso nei miei siti web per impostare i caratteri-dimensioni in modo che le mie dimensioni dei pulsanti sono le stesse sul jQuery UI website.Funziona perché è esattamente come lo fa lo jQuery UI website!

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

Impostando le proprietà font-size così per l'elemento di corpo, impostando la font-size per tutto il resto diventa banale come 100% = 10px.

Basta guardare fuori per l'effetto a cascata quando si utilizza percentuali - di un elemento figlio al 100% sarà pari al dell'elemento genitore font-size.

Answer 7

La mia soluzione necessaria per lavorare attraverso le nuove voci di menu, nonché

Il primo per selezionare gli elementi di corrispondenza sia per menu e il tasto

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

e il secondo come sopra per forzare inheiritance

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

Answer 8

utilizzare jQuery in fase di esecuzione, senza modificare i CSS. Questo ti dà molta più flessibilità.

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

Answer 9

Ho fatto questo e funziona bene.

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

Answer 10

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

e il mio css:

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