contenido de jQuery Mobile plegable
-
10-10-2019 - |
Pregunta
He estado buscando en el uso de http: // jquery mobile. com / demos / 1.0a2 / docs / content / content-collapsible.html para un sitio que estoy construyendo.
¿Hay una manera de cambiar los iconos utilizados para las secciones de expandir y contraer. Al mooment no puedo ver una manera de cambiarlo de + y -. Iconos
El cliente preferiría flechas o diferentes iconos.
Gracias, Cian
Solución
There are many ways to do this. You could do it in Javascript but it's better to simply change the css a bit.
You can specialize the css for .ui-icon-plus/minus when they are nested inside a .ui-collapsible-contain to have the same look as another icon:
Before:
/*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; }
After: (Example using the right and down arrows instead)
/*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; }
That way it won't change the general look for the plus/minus button excepted for this special case!
EDIT: Thanks J0ttE for updating this code to jQuery mobile version 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; }
Otros consejos
I updated Eric Gagnon's code to match 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; }