gpt4 book ai didi

jquery-mobile - 更改 jQuery Mobile 可折叠集上的图标

转载 作者:行者123 更新时间:2023-12-04 07:34:23 25 4
gpt4 key购买 nike

我是第一次使用 jQuery Mobile,但在对 collapsible set (accordion) 上的图标进行看似简单的更改时遇到了麻烦。 .

我想将可折叠设置中每个标题的图标更改为展开状态的向上箭头和折叠状态的向下箭头。

我创建了 a Fiddle这似乎与我几乎直接从 jQuery 移动站点复制并稍作修改的代码存在相同的问题。

对此的任何帮助或指示将不胜感激。谢谢!

最佳答案

您所引用的文档页面实际上使用的是jquery mobile的最新Work in Progress版本。所以这是我们在 future 版本的JQM中可以期待的功能。在目前的稳定版本中,我们将无法通过指定的方式更改图标一个数据属性。

这是一个例如:它使用 jqm 的 Work in Progress 版本 - http://jsfiddle.net/AAYjF/

但是建议使用稳定版。所以可以使用下面的代码来实现:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
.ui-collapsible .ui-icon{
background-position: -180px 50%;/*Position of up icon in icon sprite*/
}

.ui-collapsible-collapsed .ui-icon{
background-position: -216px 50%;/*Position of down icon in icon sprite*/
}

</style>
</head>
<body>

<div data-role="page">

<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->

<div data-role="content">
<div data-role="collapsible-set">

<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section B.</p>
</div>

<div data-role="collapsible" >
<h3>Section 2</h3>
<p>I'm the collapsible set content for section B.</p>
</div>

</div>
</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

逻辑是使用图标 Sprite 中向下和向上图标的背景位置用于折叠和展开的图标

演示: http://jsfiddle.net/6x8ew/

关于jquery-mobile - 更改 jQuery Mobile 可折叠集上的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10639892/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com