Question

使用这个代码/方法，我终于将JQuery Mobile可折叠样式应用于从XML文件中提取的数据 - 但我无法使所有Jquery样式工作，例如图标，这不起作用。例如，我希望将data-collapsed-icon设置为arrow-u。这适用于静态代码，但在我使用XML / JSON文件动态工作时却不行。我是如何让图标样式起作用的？

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "jargon.xml",
dataType: "xml",
success: function(xml) {

var container = document.getElementById("catalogue");
container.setAttribute('data-role', 'collapsible-set');
container.setAttribute('data-collapsed', 'true');
$(xml).find('release').each(function(){
var release = document.createElement("div");
release.setAttribute('data-role', 'collapsible');
release.setAttribute('data-collapsed', 'true');
var cat = $(this).find('cat').text();
var title = $(this).find('title:first').text();
var artist = $(this).find('artist').text();
var tracks = "";
$(this).find('track').each(function(){
tracks = tracks + $(this).find('title').text() + "<br>";
});
release.innerHTML = "<h3>" + cat + "<br></h3><p>" + artist + "</p>";
container.appendChild(release);

});

var catDiv = $('#catalogue');
catDiv.find('div[data-role=collapsible]').collapsible({theme:'b',refresh:true});
}
});
});

</script>

Answer 1

原谅我没有梳理你的代码来找到相关的元素，但这就是我认为的问题：

您需要在包含具有jQM数据属性的元素的父元素上调用jQM的trigger("create")方法。

以下是代码的外观：

$("#myElement").trigger("create");

这会将jQuery Mobile功能和样式应用于所选元素的所有子元素。

Answer 2

在追加可折叠之前，请更改collapsedIcon和expandedIcon选项。

release.collapsible({
    collapsedIcon:"arrow-d",
      expandedIcon:"arrow-u",
        theme:"b"
    }).appendTo("target_div);

Demo

最后得到了可折叠的样式，以应用于XML生成的数据，但数据图标不适用

2 个答案: