jQuery“流沙”插件不起作用，我该如何使用它

jQuery `Quicksand` plugin not working, how do I use it?

本文关键字：何使用 不起作用 流沙 插件 jQuery      更新时间：2023-09-26

基本上....让这个工作...JSFiddle！

我正在尝试使用 jQuery 插件来过滤 3 个 UL 中的项目。（每个<ul></ul>将具有无限数量的列表项。

我正在使用的插件位于下面的链接（流沙）（以及文档和演示）。

流沙：http://razorjack.net/quicksand/

文档 http://razorjack.net/quicksand/docs-and-demos.html

该插件基本上会过滤我的<ul></ul>中包含的项目的结果。

我

多次尝试这样做，但我没有得到控制台错误或任何指向我出错的地方的东西，也不知道为什么它不起作用。

我有 3 个 <ul class="column"></ul> 标签，每个标签下面都有列表项（本例中为 3 个）。我需要能够使用插件过滤（和动画）所有这些。

我还用我的代码制作了一个 - JS Fiddle - 供您使用。（流沙作为"资源"包含在内）。

我的HTML的基本结构是：

菜单

<!-- On click of these, filter according to 'data-value' -->
<ul id="definations" class="wrapper">
    <li><a href="javascript:;">all</a></li>
    <li data-value="web"><a href="javascript:;">digital - web</a></li>
    <li data-value="iphone"><a href="javascript:;">digital - mobile</a></li>
    <li data-value="android"><a href="javascript:;">branding & print</a></li>
    <li><a href="javascript:;">event</a></li>
    <li><a href="javascript:;">motion</a></li>
</ul>

要过滤的内容

<div id="portfolio" class="wrapper">
    <ul class="column">
        <li class="work item" data-id="id-1" data-type="iphone" data-title="iPhone" data-project="iPhone and Android App" data-year="2012 Project">
            <a href="javascript:;"><img src="/css/img/product/work-demo1.png" alt="Omega"/></a>
            <a class="view" href="javascript:;"></a>
        </li>
        <li class="work item" data-id="id-2" data-type="android" data-title="Android" data-project="Rich Web Application" data-year="2012 Project">
            <a href="javascript:;"><img src="/css/img/product/work-demo3.png" alt="Description"/></a>
            <a class="view" href="javascript:;"></a>
        </li>
        <li class="work item" data-id="id-3" data-type="web" data-title="Web" data-project="Site Rebrand" data-year="2011 Project">
            <a href="javascript:;"><img src="/css/img/product/work-demo2.png" alt="Description"/></a>
            <a class="view" href="javascript:;"></a>
        </li>
    </ul>
    <!-- I have 3 of the above columns, I would like the filter to act on all of them -->
    <!-- I have only included 1 to keep it short -->
</div>

-准备：JSFiddle！！

-更新-

我最终决定购买和使用同位素插件。网站上的例子很棒，我可以达到我需要的效果。
非常可定制，是我需要它的完美插件。（如果你读到这篇文章，可能是你的追求）。
查看： http://isotope.metafizzy.co/

状态：以下是您希望使用下面的现场演示的示例： jsFiddle

我强烈推荐本教程的现场演示，它展示了使用流沙插件的绝佳方法。下面显示的评论包括我解释如何在导航中具有可点击链接的一些提示。

标记与你的非常相似，除了 Quicksand JavaScript 文件之外，还需要一个单独的资产文件来配置流沙，而你的 jsFiddle 没有使用它。

可以肯定的是，此资产文件是 Click 事件处理程序，它根据您的标记布局激活流沙过滤。例如，这个 jsFiddle 显示了流沙网站上的 5 个现成示例中的 1 个，这些示例在示例部分中链接。我所指的单独资产文件可以被视为 JavaScript 窗口中的 jQuery 标记。

另请注意，jQuery UI 库是必需的，并且作为资产加载到上面的 jsFiddle 中。

我根据原始演示创建了一个带有Shadowbox的流沙演示，这是一个灯箱替代品。它在Shadowbox论坛上。如果您需要帮助，请访问并在那里发布，我很乐意提供帮助。

此错误/错误是"因为该插件不适用于jQuery的最新版本。你可以只使用旧的jQuery来解决它（1.7.2我刚刚尝试过，它可以工作）。

请对不起我的英语...

相关文章：