0

我正在使用jQuery Isotope，我想知道是否有一种内置（或至少“简单”）的方法可以通过用户控件（如滑块）动态调整元素的大小。

文档中有一个流畅/响应式演示，但它会根据浏览器窗口的大小调整元素的大小。我正在寻找窗口/容器保持相同大小的东西，用户可以通过拖动滑块来控制元素的大小（如 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 回答