页面上有多个同位素实例?

时间:2012-02-14 16:43:01

标签: jquery-isotope

是否可以在页面上多次使用同位素,即针对不同的数据集使用不同的文件管理器集?

似乎代码需要使用某些ID,例如“#options”无法更改。

为实现这一目标,我需要对代码进行哪些更改?

1 个答案:

答案 0 :(得分:1)

有可能。您只需在需要时单独初始化它们。 E.g:

<div class='setA'>
 <div class='itemA' data-title='xxx'>xxx</div>
 <div class='itemA' data-title='xxx'>xxx</div>
</div>
<div class='setA second'>
 <div class='itemA' data-title='xxx'>xxx</div>
 <div class='itemA' data-title='xxx'>xxx</div>
</div>
<div class='setB'>
 <div class='itemB' data-points='xxx'>xxx</div>
 <div class='itemB' data-points='xxx'>xxx</div>
</div>

<script>
$('.setA').isotope({
    itemSelector: '.itemA',
    getSortData: {
        alphabetical: function( item ) {
            return item.attr('data-title');
        }, 
        somethingelse: function( item ) {}
    }
});
$('.setB').isotope({
    itemSelector: '.itemB',
    getSortData: {
        points: function( item ) {
            return parseInt(item.attr('data-points'));
        }, 
        somethingelse: function( item ) {}
    }
});
</script>