jquery-mobile - JQueryMobileの折りたたみ可能なコンテンツ

Question

構築しているサイトでhttp://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.htmlを使用することを検討しています。

展開されたセクションと折りたたまれたセクションに使用されるアイコンを変更する方法はありますか？現時点では、+アイコンと-アイコンから変更する方法がわかりません。

クライアントは矢印または別のアイコンを好みます。

ありがとう、Cian

Answer 1

これを行うには多くの方法があります。Javascriptでそれを行うこともできますが、cssを少し変更する方がよいでしょう。

.ui-collapsible-contain内にネストされている場合、.ui-icon-plus/minusのcssを特殊化して別のアイコンと同じ外観にすることができます。

前：

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

後:(代わりに右矢印と下矢印を使用した例）

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

そうすれば、この特別な場合を除いて、プラス/マイナスボタンの一般的な外観が変わることはありません！

編集：このコードをjQuery mobileバージョン1.0に更新してくれたJ0ttEに感謝します：

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

EricGagnonのコードをjQueryMobile1.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; }