当前位置：文江博客话题详情

JQuery Mobile 可折叠内容

发布于 2024-10-11 16:22:25 字数 295 浏览 3 评论 0原文

我一直在研究使用 http://jquerymobile.com/demos /1.0a2/docs/content/content-collapsible.html 对于我正在构建的网站。

有没有办法更改用于展开和折叠部分的图标。目前我看不到如何从 + 和 - 图标更改它。

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

谢谢，希安

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安稳善良 2024-10-18 16:22:26

有很多方法可以做到这一点。你可以用 Javascript 来做，但最好简单地改变一下 css。

当 .ui-icon-plus/minus 嵌套在 .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; }

之后：< /strong> （使用向右和向下箭头的示例）

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

There are many ways to do this. You could do it in Javascript but it's better to simply change the css a bit.

You can specialize the css for .ui-icon-plus/minus when they are nested inside a .ui-collapsible-contain to have the same look as another icon:

Before:

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

After: (Example using the right and down arrows instead)

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

That way it won't change the general look for the plus/minus button excepted for this special case!

EDIT: Thanks J0ttE for updating this code to 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; }

回复收藏 0 原文

慵挽 2024-10-18 16:22:26

我更新了 Eric Gagnon 的代码以匹配 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; }

I updated Eric Gagnon's code to match 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; }

回复收藏 0 原文

~没有更多了~