jquery 流沙链接到预过滤页面
jquery Quicksand linking to prefiltered page
我正在使用jquery流沙,我想知道如何在列表预选的情况下返回该页面。我对javascript不是很了解,所以任何帮助将不胜感激。
编辑
为类似的过滤器 http://savethefix.wordpress.com/2011/12/06/filterable-portfolio-with-jquery-with-external-link-support/找到了此解决方案
但看不出如何将其与流沙联系起来
如果
有人感兴趣,我想通了。
$(document).ready(function() {
// get the action filter option item on page load
var $filterType = $('#filterOptions li.active a').attr('class');
// get and assign the ourHolder element to the
// $holder varible for use later
var $holder = $('ul.ourHolder');
// clone all items within the pre-assigned $holder element
var $data = $holder.clone();
var $button = $('#filterOptions li');
var $all = $('ul.ourHolder li').data('type') === 'all';
if (window.location.hash) {
// reset the active class on all the buttons
$button.removeClass('active');
// assign the class of the clicked filter option
// element to our $filterType variable
var $filtered = window.location.hash.replace('#', '');
$('a[class=' + $filtered + ']').parent().addClass('active');
var $filteredData = $data.find('li[data-type~=' + $filtered + ']').show();
// call quicksand and assign transition parameters
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
});
}
// attempt to call Quicksand when a filter option
// item is clicked
// Main Filter
$('#filterOptions li a').on('click', function(e) {
// reset the active class on all the buttons
$button.removeClass('active');
// assign the class of the clicked filter option
// element to our $filterType variable
var $filterType = $(this).attr('class');
$(this).parent().addClass('active');
var $filterData = $data.find('li[data-type~=' + $filterType + ']').show();
// call quicksand and assign transition parameters
$holder.quicksand($filterData, {
duration: 800,
easing: 'easeInOutQuad'
});
});
//Main Containers
$('ul.ourHolder').on('click', 'li.all', function(e) {
// reset the active class on all the buttons
$button.removeClass('active');
// assign the class of the clicked filter option
// element to our $filterType variable
var $ba = $('#filterOptions li a');
var $filteringType = $(this).attr('id');
var $navFilter = $ba.attr('class');
var $filteringData = $data.find('li[data-type=' + $filteringType + ']').show();
// call quicksand and assign transition parameters
$holder.quicksand($filteringData, {
duration: 800,
easing: 'easeInOutQuad'
});
});
});
相关文章:
- 有可能过滤来自嵌入式YouTube的声音吗
- 为什么我的d3.jsselectAll+过滤器没有过滤
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- Angular:使用选择列表选择过滤代码中的对象
- 在单击时过滤 JSON
- 如何在BookshelfJS中通过加入来过滤结果
- 如何使用javascript过滤复杂的json对象
- '单击'事件在Backbone中消失.使用流沙后查看
- 如何应用带过滤器的ng if来过滤记录,并在同一页面中显示两个不同的视图
- 过滤AngularJs中的数据
- 通过API调用过滤数据
- 使用angularjs内置过滤器过滤代码中的特定属性
- 如何在重建URL后从URL中传递过滤值,目的是使用Angular2和Typescript实现无限滚动
- 相对于角度控制器中的另一个阵列过滤阵列项目
- 如何在D3.js中绘制地图投影上的点,并使用范围滑块过滤数据
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- 尝试过滤“;引号"基于'"类别“;使用流星&mongo
- Angular中的过滤和$http承诺
- 使用jquery grep过滤具有值数组的json对象
- jquery 流沙链接到预过滤页面