1

同位体コントロールを使用してカードを拡大し、コレクションを再レイアウトしています。また、各タイルが拡大されたときに異なるコンテンツを表示したいと思います-拡大された各タイルは異なるグラフィック/コンテンツを表示します。私が使用している現在の例では、クラス (大) をタイルに関連付けているだけですが、別のコンテンツも表示したいと考えています。どんな助けにも感謝します。ありがとう。

JSFiddle: http://jsfiddle.net/DsnNX/

  $(function(){
  var $container = $('#container'),
  $items = $('.item');

  $container.isotope({
    itemSelector: '.item',
    layoutMode : 'fitColumns',
    resizesContainer : false,
    getSortData : {
      fitOrder : function( $item ) {
        var order,
            index = $item.index();

        if ( $item.hasClass('large') && index % 2 ) {
          order = index + 1.5;
        } else {
          order = index;
        }
        return order;
      }
    },
    sortBy : 'fitOrder'
  });

  $items.click(function(){
    var $this = $(this);
    // nothing to change if this already has large class
    if ( $this.hasClass('large') ) {
      return;
    }
    var $previousLargeItem = $items.filter('.large');

    $previousLargeItem.removeClass('large');
    $this.addClass('large');
    $container
      // update sort data on changed items
      .isotope('updateSortData', $this )
      .isotope('updateSortData', $previousLargeItem )
      // trigger layout and sort
      .isotope();
  });
});
4

1 に答える 1

4

HTML コンテンツをアイソトープ タイル内に問題なく配置できるので、 (アクティブ/クリックされた) クラスが存在するときに.item要素内にコンテンツを常に配置し、display: noneそれらを表示してみませんか?.large

これは、これの非常に単純な実装を示すJSFiddleです。

基本的に、数値をタグでラップして、CSS でターゲットにできるようにし、クラスを持つ親要素spanに基づいて表示が切り替えられる各ブロックに非表示のコンテンツ div を追加しました。.item.large

onLayoutレイアウト/再レイアウトがトリガーされるたびに呼び出される関数を指定できるアイソトープのオプションもあります (たとえば、ケースで要素が選択されるたびに) コールバックのようなもの - これを使用して管理することもできますアクティブな要素のコンテンツを変更するかclick、例に既にある JS イベントハンドラー関数を介してコンテンツを動的に更新するだけです。

于 2013-11-13T20:10:19.083 に答える