contenuti jQuery Mobile pieghevole

Question

ho cercato nel usando http: // jquerymobile. com / demo / 1.0a2 / docs / content / contenuti-collapsible.html per un sito che sto costruendo.

C'è un modo per cambiare le icone utilizzate per le sezioni espanse e collassate. Al mooment non riesco a vedere un modo per cambiare da + e -. Icone

Il cliente preferirebbe frecce o icone diverse.

Grazie, Cian

Answer 1

Ci sono molti modi per farlo. Si potrebbe fare in JavaScript, ma è meglio semplicemente cambiare il css un po '.

È possibile specializzare il CSS per .ui-icon-più / meno quando sono annidati all'interno di un .ui-pieghevole-contenere ad avere lo stesso aspetto di un'altra icona:

Prima:

/*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; }

Dopo: (Esempio utilizzando destra e giù invece)

/*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; }

In questo modo non cambierà l'aspetto generale per il minus pulsante più / eccettuato per questo caso speciale!

EDIT: Grazie J0ttE per aggiornare il codice per jQuery Mobile versione 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; }

Answer 2

Ho aggiornato il codice di Eric Gagnon per abbinare 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; }