JQuery Mobile可折叠内容

Question

我一直在考虑使用http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html来建立我正在建立的网站.

有没有办法更改用于展开和折叠部分的图标.在mooment我无法看到从+和 - 图标改变它的方法.

客户更喜欢箭头或不同的图标.

谢谢,Cian

Answer 1

有很多方法可以做到这一点.你可以在Javascript中做到这一点,但最好只是简单地改变一下css.

当.ui-icon-plus/minus嵌套在.ui-collapsible-contains中时,可以将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; }

这样就不会改变这个特殊情况除外/加号按钮的一般外观!

编辑:感谢J0ttE将此代码更新为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; }