eventos - dom dinamico jquery

Cambio de color de los botones de la interfaz de usuario de jQuery

Question

¿Hay 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?

Answer 1

Hay dos (¿tres?) Tipos de botones JQueryUI; Básicamente, haces un button como este:

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

Luego le dice a JQueryUI que es un botón:

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

Por lo tanto, produciendo este marcado:

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

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

Pero !

Si su "botón" es uno de checkboxradio o controlgroup entonces es otro 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>

Luego, si aplicas el método:

$( "input" ).checkboxradio();

Obtiene este marcado generado (el segundo 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 esas clases pueden (¿se deben?) Usar para dar estilo a los pseudo "botones":

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

Answer 2

La forma más simple sería agregar una clase a sus botones (para diferentes colores) y luego tener algún 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;
}

Answer 3

Prueba esto:

HTML:

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

jQuery:

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

Answer 4

Acabo de hacer esto: crear un nuevo tema con el nuevo botón de 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. Esto satisface el gradiente y el color ...

Acabo de probar esto por 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;
}