我正在尝试为 jquery 使用同位素插件所以,我有一个正在使用 jquery 1.9.1、jqueryui 1.10.1 和 bootstrap 2.3.1 开发的网站。
我正在尝试对容器进行排序甚至添加项目,但似乎没有任何效果。事件触发,同位素代码被调用,但没有任何排序,也没有添加任何项目......
这是一个带有 jquery 1.9.1 和 jquery 1.9.2 的 jsfiddle,没有引导程序......结果相同。我究竟做错了什么:
简而言之,代码:
HTML:
<div class="isoContainer" style="background-color: transparent">
<div class="isoItem" data-collectiontag="Cool stuff">
<more stuff>
</div>
<div class="isoItem" data-collectiontag="Zippy Stuff">
<more stuff>
</div>
</div>
javascript:
$(function () {
var $container = $('#isoContainer');
$container.isotope({
itemSelector: '.isoItem',
animationEngine: 'best-available',
getSortData: {
Catname: function ($elem) {
return $elem.attr('data-collectionTag');
}
}
});
$('#randomBtn').click(function () {
$('#isoContainer').isotope({
sortBy: 'random'
});
});
$('#descBtn').click(function () {
$('#isoContainer').isotope({
sortBy: 'Catname',
sortAscending: false
});
});
$('#AddBtn').click(function () {
var $newItems = $('<div class="isoItem" data-collectionTag="aaa"><span style="text-align:center">aaa</span></div> </div><div class="isoItem" data-collectionTag="zzz"><span style="text-align:center">zzz</span></div> </div>');
$('#isoContainer').isotope( 'insert', $newItems );
});
});