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.
精彩评论