¿Existe alguna manera fácil de cambiar el color de un botón de la interfaz de usuario jQuery? Se desaconseja modificar la CSS de la documentación y hacerlo de todos modos es complicado. Dicen: "Recomendamos usar la herramienta ThemeRoller para crear y descargar temas personalizados que sean fáciles de construir y mantener". Entiendo cómo cambiar el tema, pero ¿cómo se obtienen botones de colores diferentes en la misma página?Cambiar el color de los botones de la interfaz de usuario de jQuery

2010-12-08 at.

Acabo de hacer esto: crear un nuevo tema con el botón nuevo color; copie los archivos ..hard .. y ..soft ... gradient de la nueva carpeta de imágenes de tema; cambiarles el nombre para no confundirlos con el tema principal; y finalmente agrega el estilo al botón. Esta es apto para el gradiente y el color ...

Acabo de intentar esto para un botón verde:

a.green-button 
{ 
    background: url(Images/GreenBGHardGrad.png) repeat-x center; 
    border: 1px solid #132b14; 
    color:#FFFFFF; 
} 
a.green-button:hover 
{ 
    background: url(Images/GreenBGSoftGrad.png) repeat-x center; 
    border: 1px solid #132b14; 
    color:#FFFFFF; 
} 
a.green-button:active 
{ 
    background-color:#FFFFFF; 
    border: 1px solid #132b14; 
    color:#132b14; 
}

Fuente

2011-02-15 15:42:51

Hice algo a lo largo de estas líneas, pero en su lugar usé fondos con gradientes CSS. Debería haber actualizado la pregunta con mi solución ... en su lugar, te acreditaré con la respuesta. –

Me encantaría ver su solución con gradiente ... –

También había experimentado con estas soluciones antes ... y personalmente prefería la respuesta anterior en lugar de degradados. Principalmente porque el soporte de gradiente no es uniforme en todos los navegadores. Además, puedes personalizar la misma textura de fondo con la solución anterior, mientras que con los degradados, es posible que no puedas obtener la misma textura. El inconveniente es que está accediendo a otro elemento de la imagen, pero si está utilizando jqueryui, ya está accediendo al número de imágenes, 1 más no debería hacer mucha diferencia. – user1517108

La manera más simple sería agregar una clase a sus botones (para diferentes colores) y luego tener algo de CSS que sobrescriba el jquery-ui css.

Ejemplo

var $button = $(document.createElement('a')); 
//add class 
$button.addClass('redButton'); 
//call the jquery-ui button function 
$button.button();

Css

.ui-button.redButton { 
    background-color: red; 
} 
.ui-button.greenButton { 
    background-color: green; 
}

Fuente

2010-12-08 22:02:33 joekarl

ajuste el color de fondo a rojo no cambia realmente el botón de color –

Los fondos de botones son imágenes en lugar de los colores simples, que había necesidad de cambiar ' background-image' y posiblemente agregue '! important' para forzar el problema. –

puedes simplemente poner 'background: red'. jquery usa el elemento de fondo para establecer la imagen, por lo que al usarlo para establecer el color se reemplazará la imagen – ContextSwitch

Prueba esto:

HTML:

<button type="button" id="change_color"> change button </button>

jQuery:

$("#change_color").css("background","green");

Fuente

2014-09-02 04:03:06

Hay dos (tres?) Tipos de botones JQueryUI; Básicamente haces una button así:

<span class="myButtons">Click here</span>

después le dice jQueryUI que es un botón:

$('span.myButtons').button()

lo tanto la producción de este marcado:

<span class="myButtons ui-button ui-corner-all ui-widget" role="button">Click here</span>

Y puede estilo a esto " "manera clásica": (.myButtons {}, .myButtons:hover {} etc.)

¡Pero!

Si el "botón" es uno de checkboxradio o controlgroup entonces es otra marcado:

<fieldset> 
    <legend>Select a Location: </legend> 
    <label for="radio-1">New York</label> 
    <input type="radio" name="radio-1" id="radio-1"> 
    <label class"danger" for="radio-2">Paris</label> 
    <input type="radio" name="radio-1" id="radio-2"> 
    <label for="radio-3">London</label> 
    <input type="radio" name="radio-1" id="radio-3"> 
</fieldset>

A continuación, si se aplica el método:

$("input").checkboxradio();

recibe este marcado generado (la 2º pseudo botón, "París" está marcado/hecho clic):

<fieldset> 
     <legend>Select a Location: </legend> 
     <label for="radio-1" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>New York</label> 
     <input name="radio-1" id="radio-1" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio"> 
     <label for="radio-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-checked ui-state-active"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>Paris</label> 
     <input name="radio-1" id="radio-2" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio"> 
     <label for="radio-3" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>London</label> 
     <input name="radio-1" id="radio-3" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio"> 
</fieldset>

Y luego those classes puede (debe?) Ser utilizado con el estilo de los "botones" pseudo:

.ui-visual-focus { 
    box-shadow: none; 
} 

label.ui-checkboxradio.ui-state-default { 
    color: black; 
    background-color: teal; 
} 

label.ui-checkboxradio.danger.ui-state-active { 
    background-color: red; 
}

Fuente

2018-02-27 14:08:58 yPhil

Cambiar el color de los botones de la interfaz de usuario de jQuery

Respuesta

¡Pero!

Cuestiones relacionadas