jQuery UI选项卡阻止移动到IE8中的另一个页面

时间:2013-12-09 17:26:17

标签: jquery jquery-ui

我使用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);
    }
}
}

0 个答案:

没有答案