我第一次使用jQuery Mobile而且我很难完成对可折叠设置(手风琴)上的图标进行简单更改的操作.
我想将可折叠集上每个标题的图标更改为展开状态的向上箭头和折叠状态的向下箭头.
我创建了一个小提琴似乎与代码有相同的问题,我几乎直接从jQuery移动网站复制并修改了一点.
任何帮助或指示将非常感激.谢谢!
您提到的文档页面实际上使用了jquery mobile的最新Work in Progress版本.所以这是我们在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>
逻辑是使用图标精灵中向下和向上图标的背景位置来显示折叠和展开的图标
我相信你可以改进这个解决方案但是这里有一个基本的想法,就是在不侵入JQM源的情况下实现这个目标的一种方法.
$(document).on('pageinit',function(){
$('.ui-collapsible .ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-arrow-u');
$('[data-role=collapsible]')
.on('expand',function(){
$(this).find('.ui-icon').removeClass('ui-icon-arrow-u').addClass('ui-icon-arrow-d');
})
.on('collapse',function(){
$(this).find('.ui-icon').removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');
});
});?
我正在使用jqm的可折叠事件切换到适当的图标.
看我的工作示例.
| 归档时间： |
|
| 查看次数： |
11716 次 |
| 最近记录： |