JQuery Mobile-zusammenklappbarer Inhalt

StackOverflow https://stackoverflow.com/questions/4663459

  •  10-10-2019
  •  | 
  •  

Frage

Ich habe mich in mit http: // jquerymobile. com / demos / 1.0a2 / docs / content / content-collapsible.html für eine Seite, die ich baue.

Gibt es eine Möglichkeit, die Icons für Auf- und Zuklappen Abschnitte zu ändern. Am mooment kann ich sehen, eine Art und Weise nicht von + zu ändern und -. Symbolen

Der Client würde Pfeile oder andere Symbole bevorzugen.

Danke, Cian

War es hilfreich?

Lösung

Es gibt viele Möglichkeiten, dies zu tun. Man kann es in Javascript tun, aber es ist besser, einfach die CSS ein wenig zu ändern.

Sie können die CSS spezialisiert für .ui-icon-plus / minus, wenn sie innerhalb eines .ui-zusammenklappbar-enthalten verschachtelt sind das gleiche Aussehen wie ein anderes Symbol haben:

Vorher: 

/*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 mit dem rechten Pfeiltasten 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; }

Auf diese Weise wird es nicht den allgemeinen Look für die Plus / Minus-Taste für diesen Sonderfall vorbehalten ändern!

EDIT: Dank J0ttE für die Aktualisierung dieses Code auf 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; }

Andere Tipps

I Eric Gagnon Code aktualisiert jQuery Mobile 1.0 entsprechen 

/*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; }
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top