Ich habe mit http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html für eine Website untersucht, die ich baue.JQuery Mobile Collapsible Inhalt
Gibt es eine Möglichkeit, die Symbole für erweiterte und ausgeblendete Abschnitte zu ändern. Im Moment kann ich keine Möglichkeit sehen, es von + und - Symbolen zu ändern.
Der Kunde würde Pfeile oder andere Symbole bevorzugen.
Danke, Cian
Es gibt viele Möglichkeiten, dies zu tun. Sie könnten es in Javascript tun, aber es ist besser, einfach das CSS ein wenig zu ändern.
Sie können die CSS spezialisiert für .ui-icon-plus/minus, wenn sie innerhalb eines verschachtelten .ui zusammenlegbare-enthalten das gleiche Aussehen wie ein anderes Symbol haben:
Bevor:
/*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; }
Nach: (Beispiel rechts und nach unten Pfeilen statt)
/*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 Übrigens ändert sich das generelle Aussehen des Plus/Minus-Buttons nicht, ausgenommen für diesen Spezialfall!
EDIT: Danke J0ttE diesen Code auf jQuery Mobile-Version für die Aktualisierung 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; }
I Eric Gagnon Code aktualisiert 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; }
Danke! Ich werde es in der Antwort hinzufügen. –
Dank passen, half dies viel. Verbrachte den Rest des Tages mit der Aktualisierung der CSS, um Schatten und Ränder auf dem gleichen Icon zu entfernen, aber es funktionierte schließlich. – CianM
Ich bin froh, dass ich helfen konnte! –
Ich brauchte das .. habe etwas Rep! – Phliplip