2

基本的に....これを機能させてください... JSFiddle！

3 つの UL 内の項目をフィルタリングするために jQuery プラグインを使用しようとしています。(それぞれ<ul></ul>にリスト アイテムの数に制限はありません。)

私が使用しているプラ​​グインは、以下のリンク ( Quicksand ) にあります (ドキュメントとデモとともに)。

流砂: http://razorjack.net/quicksand/

ドキュメント http://razorjack.net/quicksand/docs-and-demos.html

プラグインは、基本的に my に含まれるアイテムの結果をフィルタリングします<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!!

- アップデート -

結局、 Isotopeプラグインを購入して使用することにしました。サイトの例は素晴らしく、必要な効果を得ることができました.
非常にカスタマイズ可能で、必要なものに最適なプラグインです。（これを読んでいるなら、それはおそらくあなたのその後です）。http://isotope.metafizzy.co/
でチェックしてください。

4

2 に答える 2

3

ステータス:以下のライブ デモを使用して必要なものの例を次に示します: jsFiddle

Quicksandプラグインの優れた使用方法を示すライブ デモ付きのこのチュートリアルを強くお勧めします。以下のコメントには、ナビゲーションにクリック可能なリンクを表示する方法を説明する、私によるいくつかのヒントが含まれています。

マークアップは、Quicksand JavaScript ファイルに加えて、jsFiddle が使用していない Quicksand を構成する別のアセット ファイルが必要であることを除いて、あなたのものと非常に似ています。

確かに、このアセット ファイルは、マークアップ レイアウトに基づいて流砂フィルタリングをアクティブにするクリック イベントハンドラーです。たとえば、このjsFiddleは、例のセクションにリンクされている Quicksand Web サイトからすぐに使用できる 5 つの例のうちの 1 つを示しています。私が参照していた別のアセット ファイルは、JavaScript ウィンドウの jQuery マークアップと見なすことができます。

また、jQuery UI ライブラリが必要であり、上記の jsFiddle でアセットとして読み込まれることに注意してください。

元のデモに基づいて、ライトボックスの代替であるShadowbox を使用して Quicksand Demoを作成しました。それはShadowbox Forumにあります。ヘルプが必要な場合は、そこにアクセスして投稿してください。喜んでお手伝いします。

于 2012-05-28T22:04:44.120 に答える
0

このエラー/バグは、プラグインが jQuery の最新バージョンで動作しないことが原因です。古いjQuery（1.7.2を試しただけで動作します）を使用して解決できます。

私の英語をごめんなさい...

于 2014-02-10T11:13:18.297 に答える