0

では、 jScrollPaneを使用して、ブラウザのデフォルトのスクロールバー（メインのスクロールバー）を置き換えています。私はこの関数を使用して、上記のリンクから取得して実行します。

// Set jscroll for window
$(function()
{
    var win = $(window);
    // Full body scroll
    var isResizing = false;
    win.bind(
        'resize',
        function()
        {
            if (!isResizing) {
                isResizing = true;
                var container = $('#grid');
                // Temporarily make the container tiny so it doesn't influence the
                // calculation of the size of the document
                container.css(
                    {
                        'width': 1,
                        'height': 1
                    }
                );
                // Now make it the size of the window...
                container.css(
                    {
                        'width': win.width(),
                        'height': win.height()
                    }
                );
                isResizing = false;
                container.jScrollPane(
                    {
                        'showArrows': false,
                        'verticalGutter': 10
                    }
                );
            }
        }
    ).trigger('resize');

    // Workaround for known Opera issue which breaks demo (see
    // http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
    $('body').css('overflow', 'hidden');

    // IE calculates the width incorrectly first time round (it
    // doesn't count the space used by the native scrollbar) so
    // we re-trigger if necessary.
    if ($('#grid').width() != win.width()) {
        win.trigger('resize');
    }
});

今私の問題は、 imagesloadedプラグインで石積みとajaxページの読み込みを使用して、画像が読み込まれるまで石積みを適用するのを待つことです。このメソッドを使用して、ロードされた画像で石積みをトリガーします。

$(document).ready(function() {
  var $container = $('#boxes');
  // var settings = {
    // 'showArrows': false,
    // 'verticalGutter': 10
  // };
  // var pane = $('#grid')
  // pane.jScrollPane(settings);
  // var api = pane.data('jsp');
  $container.imagesLoaded(function(){
    $('#boxes').fadeIn('fast');
    $('#boxes').masonry({
      itemSelector: '.box',
      columnWidth: 234,
      gutterWidth: 12,
      isFitWidth: true,
      isResizable: true
    });
    // api.reinitialise();
  });
});

この方法を使用すると、ブラウザのサイズが変更されるまでスクロールバーは表示されません。api.reinitialise（）を使用してみましたが、コンテンツのサイズが正しく設定されておらず、ウィンドウのサイズが変更されるまでスクロールバーがコンテンツ上に重なっています。

ここで、新しいページにajaxが読み込まれたときに、jscrollpaneを再初期化する必要もあります。私は自分のワードプレスサイトでこのメソッドを使用して、新しいコンテンツをロードしています。

//Ajax page loading!!
$(document).ready(function($) {
    var $mainContent = $("#grid"),
        siteUrl = "http://" + top.location.host.toString(),
        url = '',
        type = '',
        contentType = ''; 
    $(document).on("click", "a[href^='"+siteUrl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/'])", function() {
        type = $(this).data("type");
        location.hash = this.pathname;
        return false;
    });
    $("#searchform").submit(function(e) {
        location.hash = '?s=' + $("#s").val();
        e.preventDefault();
    }); 
    $(window).bind('hashchange', function(){
        url = window.location.hash.substring(1); 
        if (!url) {
            return;
        } 
        contentType = $("#sector").data("type");
        url = url + " #sector"; 
        $mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
            $mainContent.animate({opacity: "1"});
            if (type === "masonry" || contentType === "masonry") {
              var $container = $('#boxes');
              $container.imagesLoaded(function(){
                $('#boxes').fadeIn('fast');
                $('#boxes').masonry({
                  itemSelector: '.box',
                  columnWidth: 234,
                  gutterWidth: 12,
                  isFitWidth: true,
                  isResizable: true
                });         
              });
            }           
        });
    });
    $(window).trigger('hashchange');
});

したがって、一部のページに石積みがあり、一部にはない場合、ページの読み込み時にjscrollを設定し、石積みとajaxが読み込まれたページ用に再初期化するメソッドが必要です。ここでの方法は何ですか？

4

1 に答える 1

0

あなたはこれを使わなければなりません：

var data = 'blah blah';
var pane = $('#scroll-pane')
var api = pane.data('jsp');
api.getContentPane().append(data);
api.reinitialise();
于 2013-01-12T12:17:04.157 に答える