0
我想使負載檢查了所有複選框，但這並不縫工作Mixitup插件多能複選框
usualy您將添加的代碼，這peice的，但沒有什麼工作 負載：{ 過濾器：「 .square，.circle，.triangle」 }，
請參閱codepen http://codepen.io/anon/pen/GZxwzq
// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "checkboxFilter".
var checkboxFilter = {
// Declare any variables we will need as properties of the object
$filters: null,
$reset: null,
groups: [],
outputArray: [],
outputString: '',
// The "init" method will run on document ready and cache any jQuery objects we will need.
init: function(){
var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "checkboxFilter" object so that we can share methods and properties between all parts of the object.
self.$filters = $('#Filters');
self.$reset = $('#Reset');
self.$container = $('#Container');
self.$filters.find('fieldset').each(function(){
self.groups.push({
$inputs: $(this).find('input'),
active: [],
\t \t tracker: false
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a form value changes.
bindHandlers: function(){
var self = this;
self.$filters.on('change', function(){
self.parseFilters();
});
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters[0].reset();
self.parseFilters();
});
},
// The parseFilters method checks which filters are active in each group:
parseFilters: function(){
var self = this;
// loop through each filter group and add active filters to arrays
for(var i = 0, group; group = self.groups[i]; i++){
group.active = []; // reset arrays
group.$inputs.each(function(){
$(this).is(':checked') && group.active.push(this.value);
});
\t group.active.length && (group.tracker = 0);
}
self.concatenate();
},
// The "concatenate" method will crawl through each group, concatenating filters as desired:
concatenate: function(){
var self = this,
\t \t cache = '',
\t \t crawled = false,
\t \t checkTrackers = function(){
var done = 0;
for(var i = 0, group; group = self.groups[i]; i++){
(group.tracker === false) && done++;
}
return (done < self.groups.length);
},
crawl = function(){
for(var i = 0, group; group = self.groups[i]; i++){
group.active[group.tracker] && (cache += group.active[group.tracker]);
if(i === self.groups.length - 1){
self.outputArray.push(cache);
cache = '';
updateTrackers();
}
}
},
updateTrackers = function(){
for(var i = self.groups.length - 1; i > -1; i--){
var group = self.groups[i];
if(group.active[group.tracker + 1]){
group.tracker++;
break;
} else if(i > 0){
group.tracker && (group.tracker = 0);
} else {
crawled = true;
}
}
};
self.outputArray = []; // reset output array
\t do{
\t \t crawl();
\t }
\t while(!crawled && checkTrackers());
self.outputString = self.outputArray.join();
// If the output string is empty, show all rather than none:
!self.outputString.length && (self.outputString = 'all');
//console.log(self.outputString);
//^we can check the console here to take a look at the filter string that is produced
// Send the output string to MixItUp via the 'filter' method:
\t if(self.$container.mixItUp('isLoaded')){
\t self.$container.mixItUp('filter', self.outputString);
\t }
}
};
// On document ready, initialise our code.
$(function(){
// Initialize checkboxFilter code
checkboxFilter.init();
// Instantiate MixItUp
$('#Container').mixItUp({
load: {
\t \t filter: '.square,.circle,.triangle'
\t },
controls: {
enable: false, // we won't be needing these
toggleFilterButtons: true
},
animation: {
easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
duration: 600
}
});
});body{
background: #68b8c4;
}
body, button{
font-family: 'Helvetica Neue', arial, sans-serif;
color: #333333;
-webkit-font-smoothing: antialiased;
}
/**
* Form & Checkbox Styles
*/
.controls{
background: #333;
padding: 2%;
}
fieldset{
display: inline-block;
vertical-align: top;
margin: 0 1em 0 0;
padding: .5em;
border-radius: 3px;
}
/*.checkbox{
display: block;
position: relative;
cursor: pointer;
margin-bottom: 8px;
border: 3px soldi green;
}
.checkbox input[type="checkbox"]{
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
margin: 0;
opacity: 0;
z-index: 1;
}
.checkbox label{
display: inline-block;
vertical-align: top;
text-align: left;
padding-left: 1.5em;
}
.checkbox label:before,
.checkbox label:after{
content: '';
display: block;
position: absolute;
}
.checkbox label:before{
left: 0;
top: 0;
width: 18px;
height: 18px;
margin-right: 10px;
background: #ddd;
border-radius: 3px;
}
.checkbox label:after{
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 10px;
height: 10px;
border-radius: 2px;
background: #68b8c4;
opacity: 0;
pointer-events: none;
}
.checkbox input:checked ~ label:after{
opacity: 1;
}
.checkbox input:focus ~ label:before{
background: #eee;
}
*/
/**
* Container/Target Styles
*/
.container{
padding: 2%;
min-height: 400px;
text-align: justify;
position: relative;
}
.container .mix,
.container .gap{
width: 100px;
display: inline-block;
margin: 0 5%;
}
.container .mix{
width: 100px;
height: 100px;
margin: 5%;
background: white;
display: none;
}
.container .mix.green{
background: #a6e6a7;
}
.container .mix.blue{
background: #6bd2e8;
}
.container .mix.circle{
border-radius: 999px;
}
.container .mix.triangle{
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #68b8c4;
border-left-color: #68b8c4;
}
.container .mix.sm{
width: 50px;
height: 50px;
}
/**
* Fail message styles
*/
.container .fail-message{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
opacity: 0;
pointer-events: none;
-webkit-transition: 150ms;
-moz-transition: 150ms;
transition: 150ms;
}
.container .fail-message:before{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.container .fail-message span{
display: inline-block;
vertical-align: middle;
font-size: 20px;
font-weight: 700;
}
.container.fail .fail-message{
opacity: 1;
pointer-events: auto;
}
#ck-button {
margin:4px;
background-color:#ffffff;
border-radius:25px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#ck-button:hover {
background:red;
}
#ck-button label {
float:left;
/* width:4.0em;*/
padding:10px 15px;
}
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
}
#ck-button label input {
position:absolute;
top:-20px;
}
#ck-button input:checked + span {
background-color:#911;
color:#333;
}<div class="controls" id="Filters">
<!-- We can add an unlimited number of "filter groups" using the following format: -->
<fieldset>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".square"/>
<span>Local Events</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".circle"/>
<span>Beaches</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".triangle"/>
<span>Attractions</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".triangle"/>
<span>Places of Interests</span>
</label>
</div>
</fieldset>
<fieldset>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".white"/>
<span>January</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>February</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>March</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>April</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>May</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>June</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>July</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>August</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>September</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>October</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>November</span>
</label>
</div>
<div class="checkbox" id="ck-button">
<label>
<input type="checkbox" value=".green"/>
<span>December</span>
</label>
</div>
</fieldset>
</div>
<div id="Container" class="container">
<div class="fail-message"><span>No places were found</span></div>
<div class="mix triangle white lrg"></div>
<div class="mix square white sm"></div>
<div class="mix circle green lrg"></div>
<div class="mix triangle blue lrg"></div>
<div class="mix square white lrg"></div>
<div class="mix circle blue sm"></div>
<div class="mix triangle green lrg"></div>
<div class="mix square blue lrg"></div>
<div class="mix circle white lrg"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
任何幫助，將不勝感激
千恩萬謝 丹
humm我試過但沒有這樣的運氣:-( –