jQueryモバイル折りたたみ式コンテンツ

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

  •  10-10-2019
  •  | 
  •  

質問

私は使用を検討してきました http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html サイトのために私は構築しています。

拡張および崩壊したセクションに使用されるアイコンを変更する方法はありますか？ムックムントでは、 +および - アイコンから変更する方法がわかりません。

クライアントは、矢印または異なるアイコンを好みます。

ありがとう、シアン

役に立ちましたか？

解決

これを行うには多くの方法があります。 JavaScriptで行うことはできますが、CSSを少し変更する方が良いです。

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

前：

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

他のヒント

jquery mobile1.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; }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top