Ho cercato di utilizzare http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html per un sito che sto costruendo.JQuery Mobile Contenuto pieghevole
C'è un modo per modificare le icone utilizzate per le sezioni espanse e compresse. Al mooment non riesco a vedere un modo per cambiarlo da + e - icone.
Il cliente preferirebbe frecce o icone diverse.
Grazie, Cian
Ci sono molti modi per farlo. Potresti farlo in Javascript, ma è meglio cambiare semplicemente il css un po '.
È possibile specializzarsi 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; }
Th a modo che non cambierà l'aspetto generale per il pulsante più/meno eccetto 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; }
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; }
Grazie! Lo aggiungerò nella risposta. –
Grazie, questo ha aiutato molto. Ho passato il resto della giornata ad aggiornare il css per rimuovere ombre e bordi sulla stessa icona, ma alla fine ho funzionato. – CianM
Felice di poterti aiutare! –
Avevo bisogno di questo .. ho un rappresentante! – Phliplip