MixItUp의 필터가있는 URL에 해시를 추가하십시오.

Question

달성하고자하는 기능에 대한 문서가 없기 때문에 온라인에서 찾을 수 없으므로 여기에서 시도하고 있습니다.

사용자가 필터를 클릭 할 때 URL에 해시를 추가하고 싶습니다. jQuery 플러그인 MixItUp을 사용하고 있습니다. 사용자가 localstorage를 사용하여 url 해시를 기억해야하므로 사용자가 페이지를 닫거나 새로 고치면 마지막으로 클릭 한 필터가 계속 활성화됩니다.

Isotope은 the thing입니다. 달성하고 싶지만 비슷한 기술인 것처럼 보이지만 MixItUp에서 작동시키지 못합니까? 어쩌면 여기있는 누군가가 그걸 작동시킬 수 있었을 것입니다.

사용자가 필터를 클릭 할 때 해시를 추가하는 방법을 알고 있지만 새로 고침 후 활성 상태가 '모두'로 재설정됩니다. 필터

HTML : 추가 해시에 대한

<section id="menu"> 
    <a id="one" class="filter menu-button active" data-filter="all">One</a> 
    <a id="two" class="filter menu-button" data-filter=".selected:not(.button-exclude)">Two</a> 
    <a id="three" class="filter menu-button" data-filter=":not(.selected)">Three</a> 
</section>` 

JS :

$(document).ready(function() { 
    $("#menu a").click(function(e) { 
    window.location.hash = $(this).attr("id"); 
    e.preventDefault(); 
    }); 
}); 

미리 감사드립니다.

Answer 1

나는 그것이 약간 지연된 응답이라는 것을 안다. 그러나 나는이 질문에 대해서만 지금 만난다.

해시를 기반으로 필터를 초기화하려면 필터링 된 영역에 대해 코드 HTML을 조금 더 추가해야합니다. 그동안 데이터 필터 속성을 사용하여 작동하는 내 솔루션을 여기에 복사합니다. 필자는 클래스를 사용하여 데이터 필터를 필터링 가능한 요소에 연결했습니다.

되는 HTML은 다음과 같다 :

<div class="filtering"> 
    <span><a data-filter="all"><span>Show all</span></a></span> 
    <ul> 
    <li><a data-filter="._training-videos">Training Videos</a></li> 
    <li><a data-filter="._how-to-guides">How-To Guides</a></li> 
    <li style="display: none;"><a data-filter="all">Show all</a></li> 
    </ul> 
</div> 


<section class="filter">  
    <article class="video _training-videos"> 
    <a class="various fancybox.iframe" href="https://www.youtube.com/embed/CY1wYKq5sLU?autoplay=1&amp;rel=0"> 
     <img src="/images/videos/CY1wYKq5sLU.jpg" /> 
    </a> 
    <h4>What you need to know about online marketing</h4> 
    </article> 

    <article class="video _how-to-guides"> 
    <a class="various fancybox.iframe" href="https://www.youtube.com/embed/L2QfjcgDjsY?autoplay=1&amp;rel=0"> 
     <img src="/images/videos/L2QfjcgDjsY.jpg" /> 
    </a> 
    <h4>Handling, Cleaning, Playing your Vinyl</h4> 
    </article> 
</section> 

상단 블록 아래쪽 온 (section.filter)에 연결된 이미지 영역 인 반면, 필터 드롭 (카테고리)된다 (div.filtering) YouTube 동영상. 설정 대신에 당신은 {{필터 data_filter}로드}을 사용해야합니다

$('.filter').mixItUp(); 

처럼 MixItUp 코드를 초기화하는 중, 필터를 미리로드하기 위해

. URL에서 해시 값을 얻으면 분명히 알 수 있습니다. 드롭 다운 (.filtering)와 별도로 필터링 할 수있는 영역 (.filter)을 설정해야한다는 점,

// MixItUp init script 
$(function() { 
    // Get the hash value from the URL 
    var hashedValue = window.location.hash; 
    if (hashedValue.replace('#', '') == '') { 
     hashedValue = 'all';   // Use the default filter if there's no hash value 
    } else { 
     hashedValue = '._' + hashedValue.replace('#', '');  // Try to figure out the filter class based on the hash value 
    } 

    // Make sure the filter dropdown selects the hash item 
    $('.filtering').find('[data-filter="' + hashedValue + '"]').click(); 

    // Init MixItUp 
    $('.filter').mixItUp({ 
     load: { 
      filter: hashedValue 
     } 
    }); 
}); 

참고 :

여기에 전체 코드입니다.

은 당신의 코드를 기반으로, 나는 변화가 당신이 할 필요가 있다고 생각 :

hashedValue = hashedValue.replace('#', ''); 

그리고

$('#menu').find('#' + hashedValue).click(); 

을하지만 일의 측면에 조언을 제공하기 위해 필터링 된 지역 코드가 필요합니다.

그래도 도움이 되길 바랍니다. :)