我有一个 list :
<ul>
<li><h2>Header</h2><p>Text</p></li>
<li><h2>Header</h2><p>Text</p></li>
<li><h2>Header</h2><p>Text</p></li>
</ul>
标题文本显示为 Cufon 生成的 Canvas 。
我正在克隆我的列表并使用第二个列表来替代 Quicksand 脚本。
一切都按预期进行,但排序后标题不可见(但 Canvas 仍然存在!)。
如何解决这个问题?
实例:
http://bartekka.ayz.pl/quicksand/
(单击链接后,每个“Cufon Title”都会消失,删除 Cufon.now() 会有所帮助,但这不是答案,因为我的项目需要这部分代码)
最佳答案
这是因为 Cufon 创建元素的方式 - 总是给我带来麻烦。我所做的就是在与 javascript 交互后重新绘制文本。最快的方法是调用 Cufon.refresh() ,它将重绘页面上的所有 cufon 项目。或者,您可以专门针对它们。
当我这样做时,我倾向于创建一个函数来完成我将更改的 cufon 项目的初始绘制。然后我可以在我的排序(或其他)js 完成后调用该函数。
HTH:)
编辑回应评论
当然,不用担心:) 您正在使用的排序插件具有回调功能,因此您可以执行以下操作:
jQuery('.portfolio-sorted').quicksand( cache_list.find('li[data-value=Video]'), {
duration: 500,
},
function(){
Cufon.refresh();
// OR Cufon.replace('h2', { fontFamily: 'Quicksand' });
// OR Cufon.replace($('.portfolio-sorted li h2'), { fontFamily: 'Quicksand' });
});
编辑2
对 - 发现了一些非常有趣的东西:Quicksand 有一个用于此类目的的选项。试试这个(注意 - 我已将您的四个函数压缩为 1 个,以便于测试 - 也许这是您可以使用的东西?):
var cache_list = jQuery(this).clone().append('content');
//Add on click event handler to everything at once
jQuery('ul.portfolio-terms li a').click(function(e) {
//Call quicksand on the original works_list list(the one visible to the user)
//pass to it all the 'li' elements from the cached clone
//since we want to display them all
//get the target element based on data value
var target = 'li[data-value='+$(this).attr('data-value')+']';
if ($(this).attr('data-value') == "All") {
target = 'li';
}
jQuery('.portfolio-sorted').quicksand( cache_list.find(target), {
duration: 500,
enhancement: function() {
Cufon.refresh();
// OR Cufon.replace('h2', { fontFamily: 'Quicksand' });
// OR Cufon.replace($('.portfolio-sorted li h2'), { fontFamily: 'Quicksand' });
}
});
e.preventDefault();
});
认为这样就可以了(在 Chrome 和 FF 中对我有用)。如果您想将其添加到原始函数中,enhancement
调用非常重要。
手指交叉!
关于jquery - JavaScript 生成的文本消失(Cufon 和 Clone),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5996036/