【发布时间】：2013-04-19 04:37:39
【问题描述】：
我想在 Jquery 移动可折叠集中显示一些迷你图，但是这些图未正确呈现：
大部分 html 代码是由 jquery 函数构建的，包括那些生成迷你图的函数。
它不会在第一时间显示“图形”，而是显示绘制迷你图的文字序列，然后如果再次执行该函数，迷你图将正确地用图形呈现。为“listview”ul 生成“li”元素的函数设置为 10 秒间隔。
请看下面附上的代码和截图：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
<script src="jquery.sparkline.min.js"></script>
<script type="text/javascript">
//set repeating time
setInterval(populateList, 10000);
$(document).on('pageinit',function(){
//build the basic html structure
buildHtml();
$('#domain').trigger("create");
populateList();
});
function buildHtml(){
var domain_list = "";
domain_list += "<div id=\""+ "this.domain" +"\" data-role=\"collapsible\" data-collapsed=\"false\" data-mini=\"true\" data-collapsed-icon=\"arrow-r\" data-expanded-icon=\"arrow-d\" data-theme=\"a\">";
domain_list += "<h2>"+ "this.domain" +"</h2>";
domain_list += "<div data-role=\"collapsible-set\" data-theme=\"d\">";
domain_list += "<div data-role=\"collapsible\" data-collapsed=\"false\" data-mini=\"true\">";
domain_list += "<h2>Queueing</h2>";
domain_list += "<ul data-role=\"listview\" id=\""+ "domainqueueing"+"\" data-inset=\"false\">";
domain_list += "</ul></div>";
var show_all_queues = "";
show_all_queues += "<div data-role=\"collapsible\" data-mini=\"true\">";
show_all_queues += "<h2>Show all queues</h2>";
show_all_queues += "<ul data-role=\"listview\" id=\"domainallqueues\" data-filter=\"true\" data-filter-theme=\"c\" data-divider-theme=\"d\" >";
show_all_queues += "</ul></div>";
domain_list += show_all_queues+ "</div></div>";
$('#domain').html(domain_list);
}
function populateList(){
//build "li"s
var str = "<li data-theme = \"c\"><h3>" + "this.queue1" + "</h3><p>Last Enqueue Time: " + "this.timeOnQueue1" + " ago</p><p class=\"dynasparkline\">"+historyCounts()+"</p><span class=\"ui-li-count\">" + 123 + "</span></li>"
var str1 = "<li data-theme = \"d\"><h3>" + "this.queue1" + "</h3><p>Last Enqueue Time: " + "this.timeOnQueue1" + " ago</p><p class=\"dynasparkline\">"+historyCounts()+"</p><span class=\"ui-li-count\">" + 123 + "</span></li>"
//just for repetition
var doubble = str+str1;//just for repetition
var triple = str+str1+str;
$('#domainqueueing').html(doubble);
$('#domainallqueues').html(triple);
//update jquery mobile listview
$('#domainqueueing').listview('refresh');
$('#domainallqueues').listview('refresh');
//trigger the sparklines
$('.dynasparkline').sparkline();
}
//random generate some numbers for hisotry graph
function historyCounts(){
var str = "";
for(var i=0; i<60; i++){
var num = Math.floor((Math.random()*100)+1); //Return a random number between 1 and 100
str += num;
if(i != 59){
str+=",";
}
}
return str;
}
</script>
</head>
<body>
<div data-role="page" id="indexPage">
<div data-role="header" id="queueheader">
<h1>Queues</h1>
</div>
<br/>
<div data-role="content" id="domain">
</div>
<div data-role="footer" id="statusbar">
<h4>Last Update: <span id="lastupdate"></span></h4>
</div>
</div>
</body>
任何建议表示赞赏！！！提前致谢！
另外两个显示可折叠 div 的屏幕截图显示的是数字而不是图表：
【问题讨论】：
标签： jquery jquery-mobile sparklines jquery-mobile-pageshow jquery-mobile-collapsible