drop-down-menu - 複数の基準を持つ流砂-選択ドロップダウンの代わりにulメニューを使用する方法

Question

複数のフィルターでQuicksandを使用しようとしていますが、すばらしい例を見つけました： http ://www.danieltulp.nl/work/quicksand-multiple.htm

これは次のように機能します：

// DOMContentLoaded
$(function() {
// bind dropdowns in the form
var $filterAlpha = $('#filter select[name="alpha"]');
var $filterBeta = $('#filter select[name="beta"]');
var $filterGamma = $('#filter select[name="gamma"]');

// get the first collection
var $applications = $('#applications');

// clone applications to get a second collection
var $data = $applications.clone();

// attempt to call Quicksand on every form change
$('#filter li a').click(function() {
$(this).addClass('animate');
if ($($filterAlpha).val() == '0'){
if ($($filterBeta).val() == '0'){
if ($($filterGamma).val() == '0'){
    //0-0-0
    var $filteredData = $data.find('div');
} else {
    //0-0-1
    var $filteredData = $data.find('div[data-gamma=' + $($filterGamma).val() + ']' );
}
} else {
if ($($filterGamma).val() == '0'){
    //0-1-0
    var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' );
} else {
    //0-1-1
    var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
}
}
} else {
if ($($filterBeta).val() == '0'){
if ($($filterGamma).val() == '0'){
    //1-0-0
    var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' );
} else {
    //1-0-1
    var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
}
} else {
if ($($filterGamma).val() == '0'){
    //1-1-0
    var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']');
} else {
    //1-1-1
    var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
}
}
}

// finally, call quicksand
$applications.quicksand($filteredData, {
duration: 1000,
easing: 'easeInOutQuad',
adjustHeight:   'auto'
});
});
});

そしてhtml：

<form id="filter">
    <select name="alpha">
        <option value="0">All items</option>
        <option value="1">Pepper</option>
        <option value="2">Apple</option>
    </select>
    <select name="beta">
        <option value="0">All colours</option>
        <option value="1">Red</option>
        <option value="2">Green</option>
    </select>
    <select name="gamma">
        <option value="0">All places</option>
        <option value="1">Couche</option>
        <option value="2">Table</option>
    </select>
</form>
<div id="applications" class="image-grid">
    <div class="animate" data-id="id-1" data-alpha="2" data-beta="1" data-gamma="1">
        Apple<br />Red<br />Couche
    </div>
    <div class="animate" data-id="id-2" data-alpha="1" data-beta="1" data-gamma="2">
        Pepper<br />Red<br />Table
    </div>
    <div class="animate" data-id="id-3" data-alpha="1" data-beta="2" data-gamma="1">
        Pepper<br />Green<br />Couche
    </div>
    <div class="animate" data-id="id-4" data-alpha="2" data-beta="1" data-gamma="1">
        Apple<br />Red<br />Couche
    </div>
    <div class="animate" data-id="id-5" data-alpha="1" data-beta="2" data-gamma="2">
        Pepper<br />Green<br />Table
    </div>
    <div class="animate" data-id="id-6" data-alpha="1" data-beta="1" data-gamma="1">
        Pepper<br />Red<br />Couche
    </div>
    <div class="animate" data-id="id-7" data-alpha="1" data-beta="2" data-gamma="2">
        Pepper<br />Green<br />Table
    </div>
    <div class="animate" data-id="id-8" data-alpha="1" data-beta="2" data-gamma="1">
        Pepper<br />Green<br />Couche
    </div>
    <div class="animate" data-id="id-9" data-alpha="1" data-beta="1" data-gamma="2">
        Pepper<br />Red<br />Table
    </div>
    <div class="animate" data-id="id-10" data-alpha="2" data-beta="1" data-gamma="1">
        Apple<br />Red<br />Couche
    </div>
    <div class="animate" data-id="id-11" data-alpha="2" data-beta="2" data-gamma="2">
        Apple<br />Green<br />Table
    </div>
    <div class="animate" data-id="id-12" data-alpha="2" data-beta="2" data-gamma="2">
        Apple<br />Green<br />Table
    </div>
    <div class="animate" data-id="id-13" data-alpha="1" data-beta="1" data-gamma="2">
        Pepper<br />Red<br />Table
    </div>
</div>

しかし、代わりにhtmlが次のように機能することを望みます。

<ul id="filter" name="alpha">
    <li value="0"><a href="#">All items</a></li>
    <li value="1"><a href="#">Pepper</a></li>
    <li value="2"><a href="#">Apple</a></li>
</ul>
<ul id="filter" name="beta">
    <li value="0"><a href="#">All colours</a></li>
    <li value="1"><a href="#">Red</a></li>
    <li value="2"><a href="#">Green</a></li>
</ul>
<ul id="filter" name="gamma">
    <li value="0"><a href="#">All places</a></li>
    <li value="1"><a href="#">Couche</a></li>
    <li value="2"><a href="#">Table</a></li>
</ul>
<div id="applications" class="image-grid">
<div class="animate" data-id="id-1" data-alpha="2" data-beta="1" data-gamma="1">
    Apple<br />Red<br />Couche
</div>
<div class="animate" data-id="id-2" data-alpha="1" data-beta="1" data-gamma="2">
    Pepper<br />Red<br />Table
</div>
<div class="animate" data-id="id-3" data-alpha="1" data-beta="2" data-gamma="1">
    Pepper<br />Green<br />Couche
</div>
<div class="animate" data-id="id-4" data-alpha="2" data-beta="1" data-gamma="1">
    Apple<br />Red<br />Couche
</div>
<div class="animate" data-id="id-5" data-alpha="1" data-beta="2" data-gamma="2">
    Pepper<br />Green<br />Table
</div>
<div class="animate" data-id="id-6" data-alpha="1" data-beta="1" data-gamma="1">
    Pepper<br />Red<br />Couche
</div>
<div class="animate" data-id="id-7" data-alpha="1" data-beta="2" data-gamma="2">
    Pepper<br />Green<br />Table
</div>
<div class="animate" data-id="id-8" data-alpha="1" data-beta="2" data-gamma="1">
    Pepper<br />Green<br />Couche
</div>
<div class="animate" data-id="id-9" data-alpha="1" data-beta="1" data-gamma="2">
    Pepper<br />Red<br />Table
</div>
<div class="animate" data-id="id-10" data-alpha="2" data-beta="1" data-gamma="1">
    Apple<br />Red<br />Couche
</div>
<div class="animate" data-id="id-11" data-alpha="2" data-beta="2" data-gamma="2">
    Apple<br />Green<br />Table
</div>
<div class="animate" data-id="id-12" data-alpha="2" data-beta="2" data-gamma="2">
    Apple<br />Green<br />Table
</div>
<div class="animate" data-id="id-13" data-alpha="1" data-beta="1" data-gamma="2">
    Pepper<br />Red<br />Table
</div>
</div>

しかし、JavaScriptコードにどの変更を加えるかはわかりません。

score 0 · Accepted Answer

私は流砂プラグインでほぼ同じように開発しました。

ここで、私のコードと作業結果を見つけることができます。

http://jsfiddle.net/AVnzX/

私のフィルターにはさらにアイテムが含まれています:

<form id="filter">
<select name="country" id="filterCountry">
    <option value="alle">Alle</option>
    <option value="usa">USA</option>
    <option value="germany">Germany</option>
    <option value="australia">Australia</option>
</select>
<select name="city" id="filterCity">
    <option value="alle">Alle</option>
    <option value="newyork">New York</option>
    <option value="sydney">Sydney</option>
    <option value="paris">Paris</option>
    <option value="munich">Munich</option>
    <option value="berlin">Berlin</option>
    <option value="losangeles">Los Angeles</option>
    <option value="miami">Miami</option>
    <option value="hamburg">Hamburg</option>
    <option value="frankfurt">Frankfurt</option>
    <option value="sanfrancisco">San Francisco</option>
</select>
<select name="alphabet" id="filterName">
    <option value="name">Name</option>
    <option value="country">Country</option>
    <option value="city">City</option>
</select>

drop-down-menu - 複数の基準を持つ流砂-選択ドロップダウンの代わりにulメニューを使用する方法

1 に答える 1

Related

Reference