gpt4 book ai didi

javascript - Jquery 同位素插件 : Custom layout mode: Category rows - how to add a header to each category row

转载 作者:行者123 更新时间:2023-11-30 06:42:38 24 4
gpt4 key购买 nike

我正在尝试自定义 Isotope jquery 插件 David DeSandro,但没有成功....

我正在尝试将类别名称添加为自定义布局的标题:类别行

这是 David DeSandro 网站上自定义布局的链接: http://isotope.metafizzy.co/v1/custom-layout-modes/category-rows.html

所以我希望它与示例完全一样,但只是将每个类别的名称放在相应行的上方。

Isotope 甚至可能吗?

干杯,感谢您抽出宝贵的时间!

最佳答案

简而言之,我为每个类别插入一个带有标题类的 div 元素,为该类提供标题样式,即容器的完整长度和一些较小的高度,并将内容放入 div header 。
然后简单地应用布局模式。
categories 是一个包含类别信息的对象。

var h = '';
$.each(categories,function(i,v) {
//insert header row
if($('.element.'+v.code).length){
h = h+'<div class="element category header '+v.type+'" data-type="'+v.type+'" data-category="'+v.code+'"><img src="'+v.icon+'"> '+v.title+'</div>';
}
});
$container.isotope('insert',$(h));
$container.isotope( {
sortBy : $(this).attr('data-sort'),
sortAscending : false,
layoutMode: categoryRows,
categoryRows : {
gutter : 2
}
});

我也尝试了插入的回调,但似乎比没有插入时闪烁得更多。

但你必须想得更多:

  • 当 sortAscending 为真时获取元素上方的标题行
  • 在应用另一个 LayouMode 时删除标题(缺少删除回调会造成伤害,但 setTimeout 会这样做)
  • 如果标题已经存在,请不要再次添加标题

我还在阐述,但那是我现在的方法

关于javascript - Jquery 同位素插件 : Custom layout mode: Category rows - how to add a header to each category row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9705197/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com