0

私はjQueryIsotopeを使用していますが、スライダーなどのユーザーコントロールを介して要素のサイズを動的に変更する組み込みの（または少なくとも「簡単な」）方法があるかどうか疑問に思っています。

ドキュメントには流動的で応答性の高いデモがありますが、ブラウザウィンドウのサイズに基づいて要素のサイズを変更します。ウィンドウ/コンテナが同じサイズのままで、ユーザーがスライダー（iPhotoのサムネイルサイズスライダーなど）をドラッグして要素のサイズを制御できるものを探しています。

これも可能ですか？このように使用されたアイソトープの例は見つかりませんでした。

4

1 に答える 1

0

このリンクを試す必要があります: http://isotope.metafizzy.co/demos/relayout.htmlこのサンプルは、アイテムがクリック時にどのようにサイズ変更されるかを示していますが、このコードを転送してスライダーで動作させることができます。しかし、私が知る限り、このプラグインはアニメーションに css-classes を介して事前定義された幅と高さを使用するため、さまざまなサイズの css-classes を多数追加すると、段階的に動作しなくなりますが、これについては不安です. おそらく、要素のサイズを動的に設定する必要があります。たとえば、次のコードを使用して、アイテムのサイズを幅と高さで 5px 大きくすることができます。

    /* resizing and relayouting the list */
$container.on('click', '.item', function(){
    $this = $(this);
    $this.width( $this.width() + 5);
    $this.height( $this.height() + 5);
    //reorganizes the elements in the list
    $container.isotope('reLayout');

});

$container はラッピング要素で、「.item」はアイテムのクラスです。おそらく、このイベント ハンドラーに名前付き関数を使用してバインドし、スクローラーで呼び出す必要があります。それが役立つことを願っています。

于 2012-07-24T12:16:59.460 に答える