我使用jQuery UI Tabs编写的图像旋转器有一个奇怪的问题。旋转器工作正常,但是,如果用户尝试通过单击链接,使用URL工具栏或选择书签来移动到另一个页面,并且在下载页面加载之前旋转器移动到下一个图像,则重定向是已取消,用户在旋转器页面上“卡住”。
有没有人听说过这个问题,更好的是,如何解决这个问题?
我正在使用:
jquery.1.7.min.js 的jquery-ui.1.8.21.min.js
以下源代码:
/*Our main js library*/
var spLib = {
rotator:
{
ROTATION_DELAY: 9000,
init: function () {
this.beginRotator();
//Stretch control links to appropriate width based on the number of them
var links = $('#rotatorLinks a[href^=#tabs-]');
var controlLinkCount = links.length;
//Divide the 600px of reserved space into allotments for the control links
var linkWidth = 600 / controlLinkCount;
//Apply width
links.each(function () {
$(this).css('width', linkWidth + 'px');
});
var $this = this;
//When pause button is clicked, determine current pause state and either unpause rotation, or pause it
$('.pauseButton').click(
function () {
if ($('.pauseButton').data('pauseState') === 'unpaused') {
$("#tabs").tabs("rotate", 0, false);
//Flip pause button to play button
$('.pauseButton').css('background-image', 'url(/_layouts/images/RotatorWebPart/play.png)');
$('.pauseButton').data('pauseState', 'paused')
} else {
$this.beginRotator();
$this.moveToNext();
}
return false;
});
},
beginRotator: function () {
var $this = this;
$('#tabs').tabs({
fx:
{
opacity: "toggle"
}
}).tabs("rotate", $this.ROTATION_DELAY, false);
$('#tabs img').css('left', '0');
$('.pauseButton').css('background-image', 'url(/_layouts/images/RotatorWebPart/pause.png)');
$('.pauseButton').data('pauseState', 'unpaused');
},
moveToNext: function () {
//Get currently selected control link
var selected = $('#tabs .ui-tabs-selected');
//Get number of control links
var links = $('#rotatorLinks li');
var selectedIndex = 1;
for (var i = 0; i < links.length; i++) {
if ($(links[i]).hasClass('ui-tabs-selected')) {
if (i === links.length - 1) {
selectedIndex = 0
}
else {
selectedIndex = i;
}
break;
}
}
$('#tabs').tabs('select', selectedIndex);
}
}
}