jquery - 在回发时停止 JQuery 滑入

Question

我正在开发一个 asp.net 网页，它使用 jquery slider 来滑入和滑出 div。 div 包括三个 asp 下拉列表，其值由服务器端 VB 中的页面加载例程初始化。在第一个下拉列表中，我想要自动回发，因此根据所选的项目，第二个下拉列表是反弹。

不幸的是，当自动回发被触发时，整个 div 会滑回其起始位置，尽管在将 div 滑回到屏幕上时，我可以看到自动回发例程起作用并反弹了第二个下拉列表。

是否有办法阻止 div 滑回其起始位置除非单击 handle 按钮？

我正在使用 jquery.tabSlideOut.v1.3.js，但我已复制并粘贴到下面(如果有任何用途):

(function($){
$.fn.tabSlideOut = function(callerSettings) {
    var settings = $.extend({
        tabHandle: '.handle',
        speed: 300, 
        action: 'click',
        tabLocation: 'right',
       topPos: '1px',
       leftPos: '20px',
        fixedPosition: false,
        positioning: 'absolute',
        pathToTabImage: null,
        imageHeight: null,
        imageWidth: null,
        onLoadSlideOut: true                       
    }, callerSettings||{});

    settings.tabHandle = $(settings.tabHandle);
    var obj = this;
    if (settings.fixedPosition === true) {
        settings.positioning = 'fixed';
    } else {
        settings.positioning = 'absolute';
    }

    //ie6 doesn't do well with the fixed option
    if (document.all && !window.opera && !window.XMLHttpRequest) {
        settings.positioning = 'absolute';
    }

    //set initial tabHandle css

    if (settings.pathToTabImage != null) {
        settings.tabHandle.css({
        'background' : 'url('+settings.pathToTabImage+') no-repeat',
        'width' : settings.imageWidth,
        'height': settings.imageHeight
        });
    }

    settings.tabHandle.css({ 
        'display': 'block',
        'textIndent' : '-99999px',
        'outline' : 'none',
        'position' : 'absolute'
    });

    obj.css({
        'line-height' : '1',
        'position' : settings.positioning
    });

    var properties = {
                containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
                containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
                tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
                tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
            };

    //set calculated css
    if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
        obj.css({'left' : settings.leftPos});
        settings.tabHandle.css({'right' : 0});
    }

    if(settings.tabLocation === 'top') {
        obj.css({'top' : '-' + properties.containerHeight});
        settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
    }

    if(settings.tabLocation === 'bottom') {
        obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
        settings.tabHandle.css({'top' : '-' + properties.tabHeight});

    }

    if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
        obj.css({
            'height' : properties.containerHeight,
            'top' : settings.topPos
        });

        settings.tabHandle.css({'top' : 0});
    }

    if(settings.tabLocation === 'left') {
        obj.css({ 'left': '-' + properties.containerWidth});
        settings.tabHandle.css({'right' : '-' + properties.tabWidth});
    }

    if(settings.tabLocation === 'right') {
        obj.css({ 'right': '-' + properties.containerWidth});
        settings.tabHandle.css({'left' : '-' + properties.tabWidth});

        $('html').css('overflow-x', 'hidden');
    }

    //functions for animation events

    settings.tabHandle.click(function(event){
        event.preventDefault();
    });

    var slideIn = function() {

        if (settings.tabLocation === 'top') {
            obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
        } else if (settings.tabLocation === 'left') {
            obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
        } else if (settings.tabLocation === 'right') {
            obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
        } else if (settings.tabLocation === 'bottom') {
            obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
        }    

    };

    var slideOut = function() {

        if (settings.tabLocation == 'top') {
            obj.animate({top:'-3px'},  settings.speed).addClass('open');
        } else if (settings.tabLocation == 'left') {
            obj.animate({left:'-3px'},  settings.speed).addClass('open');
        } else if (settings.tabLocation == 'right') {
            obj.animate({right:'-3px'},  settings.speed).addClass('open');
        } else if (settings.tabLocation == 'bottom') {
            obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
        }
    };

   var clickAction = function(){
        settings.tabHandle.click(function(event){
            if (obj.hasClass('open')) {
                slideIn();
            } else {
                slideOut();
            }
        });

    };

    if (settings.action === 'click') {
        clickAction();
    }

    if (settings.action === 'hover') {
        hoverAction();
    }

    if (settings.onLoadSlideOut) {
        slideOutOnLoad();
    };

};
})(jQuery);

我正在滑动的 div 中的下拉菜单是...

<asp:DropDownList ID="ddContinent" AutoPostBack="true"   runat="server">
                <asp:ListItem>ALL</asp:ListItem>
                <asp:ListItem>Africa</asp:ListItem>
                <asp:ListItem>Americas</asp:ListItem>
                <asp:ListItem>Asia</asp:ListItem>
                <asp:ListItem>Europe</asp:ListItem>
</asp:DropDownList>

<asp:DropDownList ID="ddCountry"   runat="server">
</asp:DropDownList>

ddCountry 在页面加载时初始化，我根据在服务器端 VB 上使用 ddContinent.SelectedIndexChanged 类型函数在第一个下拉列表中选择的大陆重新绑定(bind)。澄清一下 - 这一点是有效的。我正在尝试弄清楚如何在触发自动回发时阻止 DIV 滑回 View 之外

有什么想法吗？

编辑:我还没有找到明确的答案，但是在网上翻阅，一个选择可能是使用按钮单击来激活 slider 而不是“a”链接。然后可以使用 cookie 或标签来存储 div 是否可见。该值可以通过单独单击按钮来更新，并且是 slider 滑动的条件。

Answer 1

我使用 C# 而不是 VB.Net，但这应该有帮助:

.ASPX

<asp:DropDownList ID="ddContinent" AutoPostBack="true" OnSelectedIndexChanged ="UpdateCountry" runat="server">

代码隐藏:

   Private Sub UpdateCountry(ByVal sender As Object, _
        ByVal e As System.EventArgs) 
   // update countries
  End Sub