MixItUpのフィルタ付きURLにハッシュを追加する

Question

達成したい機能についてのドキュメントがなく、オンラインで見つけることができないので、ここで試しています。

ユーザーがフィルタをクリックしたときにURLにハッシュを追加したいとします。私はMixItUp jQueryプラグインを使用しています。ユーザーが最後にクリックしたフィルターは、ユーザーがページを閉じたり更新したりする場合には、localstorageを使用してURLハッシュを覚えておく必要があります。

Isotopeはthe thing私は達成したいと思いますが、MixItUpで動作するようにはできませんが、これは似たようです。多分、ここの誰かがそれを働かせることができたでしょう。

ユーザーがフィルタをクリックしたときにURLにハッシュを追加する方法を知っていますが、リフレッシュ後にアクティブ状態が「すべて」にリセットされます。

フィルタのための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(); 

をしかし、私は物事の側にあなたの助言を与えるためにあなたのフィルタ市外局番が必要です。

これは役に立ちます。 :)