同位素下拉选择具有哈希历史记录集成的过滤

时间:2013-05-03 20:00:17

标签: select drop-down-menu hash jquery-isotope

有谁能告诉我如何将同位素下拉列表与哈希历史相结合?

谢谢!

我找到了解决方案!以下是它需要的人的代码!

这是HTML:

<nav id="filterGroup" class="clearfix">

   <select id="projects" class="filter option-set clearfix" data-filter-group="proyectos" onchange="selectProject()">
          <option data-filter-value="*" selected="selected">todos</option>  
          <option data-filter-value=".laywers">laywers</option>  
          <option data-filter-value=".computers">computers</option>  
          <option data-filter-value=".construction">construction</option>  
          <option data-filter-value=".consultants">consultants</option>                                      
    </select>

</nav> <!-- nav -->

同位素下拉代码:

$(function() {
    var $container = $('#container'),
        $select = $('nav#filterGroup select');
    filters = {};

    $container.isotope({
        itemSelector: '.element'
    });
        $select.change(function() {
        var $this = $(this);

        var $optionSet = $this;
        var group = $optionSet.attr('data-filter-group');
    filters[group] = $this.find('option:selected').attr('data-filter-value');

        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }
        var selector = isoFilters.join('');

        $container.isotope({
            filter: selector
        });

        return false;
    });

});

然后最后添加代码来更改值名称:

    function selectProject(){
    var projects = document.getElementById('projects');
    var selectedProject = projects.options[projects.selectedIndex];
    if (selectedProject.value != "*"){
            window.location.hash = selectedProject.value;
    }
}

Checj出来!有用!

0 个答案:

没有答案