jQuery quicksand multiselect - konverter fra <select> til checkbox hjælp
Jeg har fundet dette multiselectscript hvor man kan vælge flere ting at vise - problemet er at det kører med selectbox og jeg skal bruge det med checkboxe og er jo som bekendt ikke noget ørn til javascript - håber i kan hjælpe mig her. Jeg skal faktisk bruge det med 2 hovedkategorier: Hovedkat1, Hovedkat2 - og under disse kan der være 5 underkategorier.Smider lige hele siden her:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" >
<head>
<title>Quicksand with multiple criteria</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--load jqeury lib-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--quicksand en easing laden, alleen nodig voor projectenpagina-->
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
// 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
$('select').change(
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'
});
});
});
</script>
<style type="text/css">
div.animate {float:left; padding:30px; display:block; border:1px dotted; margin:15px; text-align:left;}
</style>
</head>
<body>
<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>
</body>
</html>
