开发者

how to stop page scrolling down while using jQuery Accordion

I am using jQuery UI Accordion in my App, one problem I have is: i开发者_如何学运维nside the 2nd tab, there is a very long form. Everytime when user come to the 2nd tab, the page automatically scroll down to the bottom of the form. even after I hard code and set the focus to the first text box of the form.

any ideas?

thank you all in advance


Well i have tried to sue focus while index change, however, at least, it doesn't work for me. here is my final solution which is turn off the animation in accordion UI:

$("#accordion").accordion(
                     {
                         autoHeight: false,
                         animated: false,
                         active: parseInt(index),
                         event: ""
                     }
);

Thank you for your answer.


The page scrolling effect is an artifact of activating (either automatically or manually) an accordion option.

The following code in the _toggle function of the ui.accordion widget (ui version 1.8.24) makes an explicit call to the focus method:

toShow.prev()
    .attr({
        "aria-expanded": "true",
        "aria-selected": "true",
        tabIndex: 0
    })
    .focus();

This feature was removed in jQuery UI version 1.9.0 circa October 2012.

To eliminate the page scrolling down effect, either remove the .focus() method call or upgrade to a newer version of jQuery UI (recommended).


I'm not sure without some code if this works, but there is a change event which according to the doco:

This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately.

So is it possible to use this event and set focus to a valid target once the expand has happened.

I have tested this with the according demo /demos/according/default.html and it is called after the expand:

<script type="text/javascript">
$(function() {
    $("#accordion").accordion({
        change: function(event, ui) {
            alert('blah');
            // Add your focus code in here
        }
    });
});
</script>

I'd also like to mention in all cases I have used the accordian the page doesn't jump down after expanding.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜