0

必死にBBQ HashでIsotopeを設定しようとして失敗。すでにデモに時間を費やしています: http://isotope.metafizzy.co/tests/combo-sort-history.htmlとまだ取得していません。

以下のコードは現在、アイテムをフィルタリングするために機能しています...ハッシュ設定を取得できません。フィルタ リンクの 1 つに直接リンクできるようにするために、これが必要です。どんな助けでも素晴らしいでしょう。私がすでに持っているものにそれを統合するのに苦労しているので、それを覚えておいてください...

<script>
    var $container = $('.container');
    $(window).load(function() {
         $('.container').isotope({
            itemSelector : '.item',
            isFitWidth: true,
            // sortBy : 'random',
        });

        $('.filter a').click(function(){
          var selector = $(this).attr('data-filter');
          $container.isotope({ filter: selector });
          return false;
        });


    });

      $(window).load()
  </script>
4

1 に答える 1

0

Isotope BBQ サイトへのリンクは許可されていないようですが、Isotopes サイトにアクセスして Hash History with Jquery BBQ を選択すると、以下に投稿している内容が表示されます。

数日前にこれをインストールしようとしたとき、かなり迅速に動作させることができました。もちろん、これへの最初のステップは、BBQ ハッシュ jquery を含めることです。

  1. HASH リクエストをより適切に表すために URL を変更しました。使用する代わりに:

    <a href="#" data-filter=".television">

    私が使用した:

    <a href="#filter=.television">

    フィラーの型を理解するには、print または log を使用$.param({ filter: ':not(.transition)' })して、それがどのように見えるべきかを伝えることができます。

  2. 次に、これをjQueryに含めました。この部分は、コード内のクリック機能を置き換えます。

    $('.filter a').click(function(){
      // get href attr, remove leading #
      var href = $(this).attr('href').replace( /^#/, '' ),
      // convert href into object
      // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
      option = $.deparam( href, true );
      // set hash, triggers hashchange on window
      $.bbq.pushState( option );
      return false;
    });
    
  3. 最後に、このコードは新しいフィルターです。これを window.load 関数内に配置し、その関数内のすべての下に配置します。まず、オプションを設定します。

    $(window).bind( 'hashchange', function( event ){
         // get options object from hash
     var hashOptions = $.deparam.fragment();
         // apply options from hash
     $container.isotope( hashOptions );
     })
        // trigger hashchange to capture any hash data on init
    .trigger('hashchange');
    

上記のコードをここにリストしたものに置き換え、<a>フィルター リストを変更すると、問題なく動作するようになります。しかし、私はそれが私のために働いたので、同位体に含まれていたものをリストしました! 問題がある場合はお知らせください。

于 2013-07-12T13:34:33.110 に答える