Javascript “多维数据集公文包插件活动”选项卡显示页面加载上的所有项目,而不仅仅是活动项目
我正在使用多维数据集公文包插件在我的页面上显示一组事件。我还使用过滤器,根据数据过滤器显示不同的项目 有一个类为“cbp filter item active”的“all”筛选器显示页面加载上的所有项目,但我删除了它,因为我不想要它,并将“cbp filter item active”类移动到下一个筛选器,但它仍然显示所有项目,而不是页面加载上仅显示在该类别中的项目 我只想在页面加载时显示活动类别中的项目,而不是所有项目 我想是js中的某个东西告诉它显示所有加载的项目?我只是不知道该换哪一部分或者怎么换 原始过滤器:Javascript “多维数据集公文包插件活动”选项卡显示页面加载上的所有项目,而不仅仅是活动项目,javascript,jquery,html,jquery-plugins,Javascript,Jquery,Html,Jquery Plugins,我正在使用多维数据集公文包插件在我的页面上显示一组事件。我还使用过滤器,根据数据过滤器显示不同的项目 有一个类为“cbp filter item active”的“all”筛选器显示页面加载上的所有项目,但我删除了它,因为我不想要它,并将“cbp filter item active”类移动到下一个筛选器,但它仍然显示所有项目,而不是页面加载上仅显示在该类别中的项目 我只想在页面加载时显示活动类别中的项目,而不是所有项目 我想是js中的某个东西告诉它显示所有加载的项目?我只是不知道该换哪一部分或
<div id="filters-container" class="cbp-l-filters-text content-xs">
<div data-filter="*" class="cbp-filter-item-active cbp-filter-item"> All </div> |
<div data-filter=".identity" class="cbp-filter-item"> Identity </div> |
<div data-filter=".web-design" class="cbp-filter-item"> Web Design </div> |
<div data-filter=".graphic" class="cbp-filter-item"> Graphic </div> |
<div data-filter=".logos" class="cbp-filter-item"> Logo </div>
</div><!--/end Filters Container-->
可能要将js从defaultFilter:“*”更改为defaultFilter:“.identity”
<div id="filters-container" class="cbp-l-filters-text content-xs">
<div data-filter=".identity" class="cbp-filter-item-active cbp-filter-item"> Identity </div> |
<div data-filter=".web-design" class="cbp-filter-item"> Web Design </div> |
<div data-filter=".graphic" class="cbp-filter-item"> Graphic </div> |
<div data-filter=".logos" class="cbp-filter-item"> Logo </div>
</div><!--/end Filters Container-->
(function ($, window, document, undefined) {
var gridContainer = $('#grid-container'),
filtersContainer = $('#filters-container');
// init cubeportfolio
gridContainer.cubeportfolio({
defaultFilter: '*',
animationType: 'fadeOut',
gapHorizontal: 20,
gapVertical: 20,
gridAdjustment: 'responsive',
caption: 'zoom',
displayType: 'sequentially',
displayTypeSpeed: 100,
// lightbox
lightboxDelegate: '.cbp-lightbox',
lightboxGallery: true,
lightboxTitleSrc: 'data-title',
lightboxShowCounter: true,
// singlePage popup
singlePageDelegate: '.cbp-singlePage',
singlePageDeeplinking: true,
singlePageStickyNavigation: true,
singlePageShowCounter: true,
singlePageCallback: function (url, element) {
// to update singlePage content use the following method: this.updateSinglePage(yourContent)
},
// singlePageInline
singlePageInlineDelegate: '.cbp-singlePageInline',
singlePageInlinePosition: 'below',
singlePageInlineShowCounter: true,
singlePageInlineInFocus: true,
singlePageInlineCallback: function(url, element) {
// to update singlePageInline content use the following method: this.updateSinglePageInline(yourContent)
var t = this;
$.ajax({
url: url,
type: 'GET',
dataType: 'html',
timeout: 5000
})
.done(function(result) {
t.updateSinglePageInline(result);
})
.fail(function() {
t.updateSinglePageInline("Error! Please refresh the page!");
});
}
});
// add listener for filters click
filtersContainer.on('click', '.cbp-filter-item', function (e) {
var me = $(this), wrap;
// get cubeportfolio data and check if is still animating (reposition) the items.
if ( !$.data(gridContainer[0], 'cubeportfolio').isAnimating ) {
if ( filtersContainer.hasClass('cbp-l-filters-dropdown') ) {
wrap = $('.cbp-l-filters-dropdownWrap');
wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
me.addClass('cbp-filter-item-active');
} else {
me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
}
}
// filter the items
gridContainer.cubeportfolio('filter', me.data('filter'), function () {});
});
// add listener for load more click
$('.button').on('click', function(e) {
e.preventDefault();
var clicks, me = $(this), oMsg;
if (me.hasClass('cbp-l-loadMore-button-stop')) return;
// get the number of times the loadMore link has been clicked
clicks = $.data(this, 'numberOfClicks');
clicks = (clicks)? ++clicks : 1;
$.data(this, 'numberOfClicks', clicks);
// set loading status
oMsg = me.text();
me.text('LOADING...');
// perform ajax request
$.ajax({
url: me.attr('href'),
type: 'GET',
dataType: 'HTML'
})
.done( function (result) {
var items, itemsNext;
// find current container
items = $(result).filter( function () {
return $(this).is('div' + '.cbp-loadMore-block' + clicks);
});
gridContainer.cubeportfolio('appendItems', items.html(),
function () {
// put the original message back
me.text(oMsg);
// check if we have more works
itemsNext = $(result).filter( function () {
return $(this).is('div' + '.cbp-loadMore-block' + (clicks + 1));
});
if (itemsNext.length === 0) {
me.text('NO MORE WORKS');
me.addClass('cbp-l-loadMore-button-stop');
}
});
})
.fail(function() {
// error
});
});
})(jQuery, window, document);