He estado buscando el uso de http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html para un sitio que estoy construyendo.JQuery Mobile Contenido plegable
¿Hay alguna manera de cambiar los iconos utilizados para las secciones expandidas y contraídas? En el momento no veo una manera de cambiarlo de los íconos + y -.
El cliente preferiría flechas o iconos diferentes.
Gracias, Cian
Hay muchas maneras de hacer esto. Podrías hacerlo en Javascript, pero es mejor simplemente cambiar el CSS un poco.
Usted puede especializarse el css para .ui-icono-más/menos cuando se anidan dentro de un .ui-plegable-contener a tener el mismo aspecto que otro icono:
Antes:
/*arrows*/
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-icon-arrow-d { background-position: -216px 0; }
Después de: (Ejemplo utilizando la derecha y hacia abajo en lugar flechas)
/*arrows*/
.ui-collapsible-contain .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible-contain .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }
Th ¡de ninguna manera cambiará la apariencia general del botón más/menos exceptuado para este caso especial!
EDIT: Gracias J0ttE para actualizar el código de jQuery Mobile versión 1.0:
/*arrows*/
.ui-collapsible.ui-collapsible-collapsed .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }
He actualizado el código de Eric Gagnon para que coincida con jQuery Mobile 1.0
/*arrows*/
.ui-collapsible.ui-collapsible-collapsed .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }
¡Gracias! Lo agregaré en la respuesta. –
Gracias, esto ha ayudado mucho. Pasé el resto del día actualizando el CSS para eliminar sombras y bordes en el mismo icono, pero finalmente lo puso en funcionamiento. – CianM
¡Me alegro de haber podido ayudar! –
Necesitaba esto ... ¡tengo un representante de som! – Phliplip