2

IsotopejqueryプラグインのDavidDeSandroをカスタマイズしようとしていますが、どこにも行きません。

カスタムレイアウトのヘッダーとしてカテゴリ名を追加しようとしています：カテゴリ行

David DeSandroのWebサイトのカスタムレイアウトへのリンクは次のとおりです：http： //isotope.metafizzy.co/v1/custom-layout-modes/category-rows.html

したがって、例とまったく同じようにしたいのですが、対応する行の上に各カテゴリの名前を付けてください。

アイソトープでも可能ですか？

貴重な時間をありがとうございました！

4

1 に答える 1

0

つまり、各カテゴリにヘッダー クラスを含む div を要素に挿入し、そのクラスにヘッダーのスタイルを指定しました。これは、コンテナーの完全な長さと若干小さい高さであり、ヘッダーのコンテンツを div に配置しました。
次に、単にlayoutModeを適用しました。
カテゴリは、カテゴリ情報を持つオブジェクトです。

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 が true の場合、要素の上のヘッダー行を取得します
  • 別のLayouModeを適用するときにヘッダーを削除します（削除コールバックの欠落は問題ですが、setTimeoutはそれを行います）
  • ヘッダーが既にある場合は、ヘッダーを再度追加しないでください

私はまだ熟考していますが、それが今のところ私のアプローチです

于 2012-03-19T17:29:09.853 に答える