Estoy utilizando la biblioteca jQuery UI lista para usar, basada en un tema.jQuery Botón UI: ¿Cómo anulo las clases utilizadas para un solo botón?
Tener enlaces representados como botones es excelente, sin embargo, debo anular algunos botones con diferentes colores.
¿Cómo especifico una clase específica para un botón en particular para usar?
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");
Si simplemente desea tener algunos botones adicionales/diferentes para botones particulares, simplemente dele a los botones 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;
}
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. (se supone que su archivo .CSS está vinculado DESPUÉS del archivo jQuery UI css, o está en línea en la página, y ambos anularían el jQuery UI css.
También debe considerar la especificidad de los selectores. No he profundizado en el último UI CSS, pero mi experiencia con 1.7 es que debe replicar la estructura de selector de UI utilizada para garantizar que sus anulaciones se apliquen en todas las circunstancias. – tvanfosson
@ tvanfosson, buen punto, haciendo la suposición tal vez errada de que el selector css como button.mybuttonclass es conocimiento universal de mi parte no es tan maravilloso :). –
Recomiendo mirar el CSS para jQuery Botones de la interfaz de usuario y duplicar la estructura del CSS que especifica los botones, pero con su propia clase en lugar de las clases de la jQuery UI. Haga las modificaciones que necesita en este CSS e inclúyalos después de la CSS de jQuery UI. CSS usa una combinación del la mayor parte del selector específica y pedido para determinar qué valores de aplicar. de esta manera usted 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 Magaz ine tiene un article que probablemente tenga más información de la que usted necesita saber sobre el problema de especificidad.
@tvanfosson: Esto funciona y es genial, ahora lo que no incluí en mi pregunta, que debería tener, es que esto debe ser conmutable. Por ejemplo: resaltar un botón siguiente o guardar dependiendo de algunas otras acciones. Supongo que se requiere algún código (jquery). –
@Mark: si los cambios no se deben simplemente al control sobre el botón, que puede manejar con CSS, sí, eche un vistazo a la respuesta de @ Karim y use remove/addClass en su jQuery para actualizar la clase asociada con el elemento basado en el comportamiento del usuario. – tvanfosson
Encontré esto funcionó para mí: $ (". BtnSave"). RemoveClass ("ui-state-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 esquina redondeada etc quedó donde estaba y yo era capaz de modificar el color de fondo, etc. .
Gracias, lo intentaré también en algún momento ... –
Se necesita hacer un poco más de trabajo para pasar el cursor sobre su valor predeterminado, pero probablemente pueda sobreescribirlo con otra clase: hover – Simon
Si es posible, es mejor para usar CSS Javascript lleva tiempo ejecutar, por lo que verá un estilo antiguo hasta que su Javascript se active. No se verá muy bonito. –
creo que la API botón debe incluir una configuración como ésta, donde se puede cambiar el color, etc. pasan por parámetros
$("button").button({background:"FFFFFF",hover:"FFFFF"});
esto es sólo una idea donde puede cambiar algunos de sus atributos visuales.
También puede:
Por ejemplo, cuando tuve que anular el control jenue de jQuery UI y eliminar los bordes, encontré la clase que define los bordes con las herramientas de desarrollo de Chrome. Luego, en CSS: He añadido algo así:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
funciona muy bien!
Si bien esto generalmente funcionará, prefiero usar CSS para la apariencia y javascript para el comportamiento tanto como sea posible. Debería ser posible simplemente cambiar aspectos de elementos individuales con CSS solo. El uso de javascript para hacerlo combina innecesariamente el aspecto de la página con el uso de javascript, IMO. – tvanfosson
Intento esto anulando la clase ui-button-text haciendo: $ ("# SaveButton"). RemoveClass ("ui-button-text"). AddClass ("ui-button-text-save"); pero esto no funciona. Al no tener nada en removeClass() elimina más CSS de lo necesario, ¿no? –
ok, me las arreglé para cambiar una clase (era un problema de pedido de CSS) –