Question

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

不幸的是，当触发autopostback时，整个div会滑回到它的起始位置，虽然在将div滑回屏幕时，我可以看到autopostback例程工作并反弹第二个下拉。

是否有任何阻止div滑回其起始位置除非单击手柄按钮？

我正在使用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在pageload上初始化，我重新绑定，取决于在第一个下拉列表中使用服务器端VB上的ddContinent.SelectedIndexChanged类型函数选择的大陆。澄清 - 这一点是有效的。我试图找出当触发自动回发时如何阻止DIV滑回视野

有什么想法吗？

编辑：我还没有找到明确的答案，但在网上搜索，一个选项可能是使用按钮点击激活滑块而不是＆＃34; a＆＃34;链接。如果div应该是可见的，那么可以使用cookie或标签来存储。可以通过单击按钮单击来更新该值，这将是滑块滑动的条件。

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

在回发时停止JQuery Slide-in

1 个答案: