first commit
This commit is contained in:
108
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/index.html
Normal file
108
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/index.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp Demo - Checkboxes with Reset Checkbox</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<div class="checkbox-group">
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">All</label>
|
||||
<input type="checkbox" value="all" checked/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Green</label>
|
||||
<input type="checkbox" value=".green"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Blue</label>
|
||||
<input type="checkbox" value=".blue"/>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="checkbox-label">Pink</label>
|
||||
<input type="checkbox" value=".pink"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
|
||||
<script>
|
||||
// In this example, we must bind a 'change' event handler to
|
||||
// our checkboxes, then interact with the mixer via
|
||||
// its .filter() API methods.
|
||||
|
||||
var containerEl = document.querySelector('.container');
|
||||
var checkboxGroup = document.querySelector('.checkbox-group');
|
||||
var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
|
||||
var allCheckbox = checkboxGroup.querySelector('input[value="all"]');
|
||||
|
||||
var mixer = mixitup(containerEl);
|
||||
|
||||
checkboxGroup.addEventListener('change', function(e) {
|
||||
var selectors = [];
|
||||
var checkbox;
|
||||
var i;
|
||||
|
||||
if (e.target === allCheckbox && e.target.checked) {
|
||||
// If the "all" checkbox was checked, uncheck all other checkboxes
|
||||
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
checkbox = checkboxes[i];
|
||||
|
||||
if (checkbox !== allCheckbox) checkbox.checked = false;
|
||||
}
|
||||
} else {
|
||||
// Another checkbox was changed, uncheck "all".
|
||||
|
||||
allCheckbox.checked = false;
|
||||
}
|
||||
|
||||
// Iterate through all checkboxes, pushing the
|
||||
// values of those that are checked into an array
|
||||
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
checkbox = checkboxes[i];
|
||||
|
||||
if (checkbox.checked) selectors.push(checkbox.value);
|
||||
}
|
||||
|
||||
// If there are values in the array, join it into a string
|
||||
// using your desired logic, and send to the mixer's .filter()
|
||||
// method, otherwise filter by 'all'
|
||||
|
||||
var selectorString = selectors.length > 0 ?
|
||||
selectors.join(',') : // or '.' for AND logic
|
||||
'all';
|
||||
|
||||
mixer.filter(selectorString);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/style.css
Normal file
200
mixitup-3.3.1/demos/checkboxes-with-reset-checkbox/style.css
Normal file
@@ -0,0 +1,200 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control[data-sort]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
background: #2a2a2a;
|
||||
margin-right: .75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.checkbox:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkbox-input,
|
||||
.checkbox-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
color: white;
|
||||
font-family: 'helvetica-neue', arial, sans-serif;
|
||||
font-size: .9rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user