botón de jQuery UI: ¿Cómo puedo reemplazar las clases utilizadas por un solo botón?

StackOverflow https://stackoverflow.com/questions/2401414

  •  18-09-2019
  •  | 
  •  

Pregunta

Estoy utilizando la biblioteca de la jQuery UI fuera de la caja, en base a un tema.

tener vínculos prestados como botones es grande, sin embargo tengo que anular algunos botones con diferentes colores.

¿Cómo se especifica una clase específica para un determinado botón de usar?

¿Fue útil?

Solución

Yo diría, darle al botón en particular o botones de un id, y: 

$("#buttonId").removeClass().addClass("myClass");

Si desea aplicar a varios botones, cada uno con su propio ID: 

$("#buttonId, #anotherButton").removeClass().addClass("myClass");

Otros consejos

Te recomiendo mirar el CSS para los botones de la interfaz de usuario jQuery y duplicar la estructura de la CSS que especifica los botones, pero con su propia clase en lugar de las clases jQuery UI. Hacer las sustituciones que usted necesita en este CSS y lo incluye después de la CSS jQuery UI. CSS utiliza una combinación del selector más específico y ordenar para determinar qué valores de aplicar. De esta manera se asegurará de que usted tiene la misma especificidad de cada uno de los selectores CSS utilizados por jQuery para que su CSS tiene prioridad basa en orden.

Smashing Magazine tiene una href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" artículo que probablemente tiene más información que le importa saber acerca de la cuestión de la concreción.

También puede:

  1. Utilización de herramientas para desarrolladores en el navegador (Chrome tiene grandes).
  2. Ver qué clase de jQuery UI define el color del botón.
  3. redefinir en el archivo CSS con el atributo "! Important".

Por ejemplo, cuando necesitaba para anular control de número jQuery UI y eliminar los bordes, he encontrado la clase que define las fronteras utilizando Chrome Herramientas de desarrollo. Luego, en CSS: He añadido algo así:

.<jquery-ui-class-that-i-found> { border: 0px !important; }

funciona muy bien!

Creo que la API botón debe incluir una configuración como ésta, donde se puede cambiar el color, etc. pasando parámetros 

$("button").button({background:"FFFFFF",hover:"FFFFF"});

esto es sólo una idea donde puede cambiar algunos de sus atributos visuales.

He encontrado esto funcionó para mí: $ ( "BtnSave. ") RemoveClass (" Estado-ui-default ") addClass (" SaveButtonStyling");..

Básicamente necesario para eliminar la clase ui-estado predeterminado y luego añadir mi propia para el color de fondo, etc.

THSI significaba que la clase redondeada etc esquina se quedó donde estaba y yo era capaz de modificar el color de fondo, etc.

Si simplemente desea tener alguna adicional / diferente para determinados botones, basta con dar a los botones de algunas clases como class = "mybuttonclass otherbuttonclass" - se permiten múltiples clases. A continuación, sólo tiene que añadir reglas CSS para su clase (s) 

.mybuttonclass
{
   background-color: red;
}
.otherbuttonclass
{
   color:white;
}

por lo tanto el fondo es rojo con el texto blanco - o cualquier combinación que desee, lo que anularía los elementos de la cascada (CSS) por encima de ella. (Suposición es que el archivo .CSS está vinculado en vez que el archivo CSS jQuery UI, o se encuentra en línea en la página, ambos de los cuales sería anular el CSS jQuery UI.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top