jquery sparklines.js 当我 unhide/toggle a div 时不会显示
jquery sparklines.js will not display when I unhide/toggle a div
我无法 sparklines.js 取消隐藏我的迷你图。我在取消隐藏 div 的函数中包含了 $.sparkline_display_visible() 函数。官方文档非常简单:
来自http://omnipotent.net/jquery.sparkline/#hidden:
解决方案是在迷你图可能变得可见时随时调用 $.sparkline_display_visible() 函数,以便可以正确呈现它。这是本网站用来处理隐藏在不同选项卡部分中的迷你图的技术;该站点在选项卡更改回调中调用例程。
<html>
<script src="/s/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/s/js/jquery.sparkline.min.js"></script>
<body>
<button id="neighborhood_standards_button">Sort</button><br>
<div id="neighborhood_standards">
Q117 {{org}} listens and responds appropriately to our questions and concerns. <br><span style="font-size:small">
(5.4 vs 8.2)</span></td><td>
<div id="neigh_q117" style="display: inline-block;"></div>
</div>
<div id="smart_sort" style="display:none;">
Q117 {{org}} listens and responds appropriately to our questions and concerns. <br><span style="font-size:small">
(8.6 vs 8.2)</span>
<div id="smart_q117" style="display: inline-block;"></div>
</div>
<script type="text/javascript">
$("#smart_q117").sparkline([8.2,8.6,10,8,6],
{type: 'bullet',
rangeColors: ['#f189b1','#f4a0c0','#f9cede'],
targetWidth: 10,
targetColor: '#73913b',
performanceColor: '#c9413f',
width: '400px'
});
$("#neigh_q117").sparkline([8.2,5.4,10,8,6],
{type: 'bullet',
rangeColors: ['#f189b1','#f4a0c0','#f9cede'],
targetWidth: 10,
targetColor: '#73913b',
performanceColor: '#c9413f',
width: '400px'
});
$(document).ready(function(){
$("#neighborhood_standards_button").click(function(){
$("#smart_sort").toggle();
$("#neighborhood_standards").toggle();
$.sparkline_display_visible();
});
});
</script>
</body>
</html>
所以在经历了通常的头脑风暴和文档重读期之后,我想请大家就我遗漏的内容提出建议。
您必须在 div 中添加一些东西,即粘贴一个 nbsp;里面是空的 div
<div id="smart_q117" style="display: inline-block;"> </div> [see http://jsfiddle.net/WackyDad/utLsfyga/]
PS 你似乎也有一些杂散标签(例如关闭 td 然后打开未关闭且都不在 table 内)
我无法 sparklines.js 取消隐藏我的迷你图。我在取消隐藏 div 的函数中包含了 $.sparkline_display_visible() 函数。官方文档非常简单:
来自http://omnipotent.net/jquery.sparkline/#hidden:
解决方案是在迷你图可能变得可见时随时调用 $.sparkline_display_visible() 函数,以便可以正确呈现它。这是本网站用来处理隐藏在不同选项卡部分中的迷你图的技术;该站点在选项卡更改回调中调用例程。
<html>
<script src="/s/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/s/js/jquery.sparkline.min.js"></script>
<body>
<button id="neighborhood_standards_button">Sort</button><br>
<div id="neighborhood_standards">
Q117 {{org}} listens and responds appropriately to our questions and concerns. <br><span style="font-size:small">
(5.4 vs 8.2)</span></td><td>
<div id="neigh_q117" style="display: inline-block;"></div>
</div>
<div id="smart_sort" style="display:none;">
Q117 {{org}} listens and responds appropriately to our questions and concerns. <br><span style="font-size:small">
(8.6 vs 8.2)</span>
<div id="smart_q117" style="display: inline-block;"></div>
</div>
<script type="text/javascript">
$("#smart_q117").sparkline([8.2,8.6,10,8,6],
{type: 'bullet',
rangeColors: ['#f189b1','#f4a0c0','#f9cede'],
targetWidth: 10,
targetColor: '#73913b',
performanceColor: '#c9413f',
width: '400px'
});
$("#neigh_q117").sparkline([8.2,5.4,10,8,6],
{type: 'bullet',
rangeColors: ['#f189b1','#f4a0c0','#f9cede'],
targetWidth: 10,
targetColor: '#73913b',
performanceColor: '#c9413f',
width: '400px'
});
$(document).ready(function(){
$("#neighborhood_standards_button").click(function(){
$("#smart_sort").toggle();
$("#neighborhood_standards").toggle();
$.sparkline_display_visible();
});
});
</script>
</body>
</html>
所以在经历了通常的头脑风暴和文档重读期之后,我想请大家就我遗漏的内容提出建议。
您必须在 div 中添加一些东西,即粘贴一个 nbsp;里面是空的 div
<div id="smart_q117" style="display: inline-block;"> </div> [see http://jsfiddle.net/WackyDad/utLsfyga/]
PS 你似乎也有一些杂散标签(例如关闭 td 然后打开未关闭且都不在 table 内)