Fatal编程技术网
  • drop-down-menu/
  • Drop down menu 多标准流沙-如何使用ul菜单而不是选择下拉菜单

Drop down menu 多标准流沙-如何使用ul菜单而不是选择下拉菜单

drop-down-menu menu filter

Drop down menu 多标准流沙-如何使用ul菜单而不是选择下拉菜单,drop-down-menu,menu,filter,quicksand,Drop Down Menu,Menu,Filter,Quicksand,我尝试将流沙与多个过滤器结合使用，我发现了一个很好的例子： 其工作原理如下： // DOMContentLoaded $(function() { // bind dropdowns in the form var $filterAlpha = $('#filter select[name="alpha"]'); var $filterBeta = $('#filter select[name="beta"]'); var $filterGamma = $('#filter select[na

我尝试将流沙与多个过滤器结合使用，我发现了一个很好的例子：

其工作原理如下：

// 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代码做哪些更改

我开发了几乎相同的quicksand插件

在这里你可以找到我的代码和工作结果

我的筛选器包含更多项：

<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>


所有
美国
德国
澳大利亚
所有
纽约
悉尼
巴黎
慕尼黑
柏林
洛杉矶
迈阿密
汉堡
法兰克福
旧金山
名称
国家
城市