JQuery mobile contenu Pliable

Question

J'ai cherché en utilisant http: // jquery mobile. com / démos / 1.0a2 / docs / content / contenu collapsible.html pour un site que je suis bâtiment.

Est-il possible de changer les icônes utilisées pour les sections développés et réduits. Au mooment je ne vois pas un moyen de changer de + et -. Icônes

Le client préférerait des flèches ou des icônes différentes.

Merci, Cian

Answer 1

Il y a plusieurs façons de le faire. Vous pouvez le faire en Javascript, mais il est préférable de simplement changer le css un peu.

Vous pouvez spécialiser pour .ui-css-icône plus / moins quand ils sont imbriqués dans un .ui contiennent pliable pour avoir le même aspect que une autre icône:

Avant:

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

Après: (exemple en utilisant la droite et en bas des flèches à la place)

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

De cette façon, il ne changera pas l'aspect général de la plus / moins le bouton sauf pour ce cas particulier!

EDIT: Merci J0ttE pour mettre à jour ce code jQuery version 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; }

Answer 2

Je mis à jour le code de Eric Gagnon pour correspondre 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; }