Question

我在HTML / jQuery中创建了一个功能区，其中的实现可以在这里找到：http://jsfiddle.net/Complexity/qwV84/

在原生Office应用程序（Word，Excel，Powerpoint，...）中，当您将鼠标光标放在选项卡上并滚动显示下一个选项卡时。

通过javascript我已经创建了一个API，允许我显示给定标签的标签内容：

EnableTabContents: function() {

// Start by deactiving every tab element on the page.
$("li[role=tab]").each(function(index) {
  $(this).removeClass("active");
  $(".contents", this).removeClass("active");
});

// Activate the tab which is requested.
$(this).addClass("active");
$(".contents", this).addClass("active");

// Return the "tab" element.
return $(this);
},

但是，现在我想实现基于滚动激活选项卡。

所以，讽刺的是，我有两个问题：

如何确定我的鼠标光标位于功能区上？
如果我的光标在我想要的位置，如何在jQuery中实现scroll事件？

我知道jQuery中有mouseenter事件，但是在事件中设置事件处理程序是不是很痛苦？作为替代方案，如果变量具有适当的值，我可以设置变量并在滚动事件中进行切换。

对于那些对项目感兴趣的人，它是开源的：

https://github.com/Kevin-De-Coninck/OfficeWebControls

感谢您的建议。

Answer 1

确定，

经过一番搜索，我找到了这个问题的解决方案。对于有兴趣的人，这是解决方案：

有一个名为DOMMouseScroll的浏览器事件，该事件仅适用于Firefox。幸运的是，有一个替代事件可以支持Google Chrome和Internet Explorer，称为OnMouseWheel。

注意：滚动方向在两个事件中都是相反的，在DOMMouseScroll中，我们需要检查originalEvent的详细信息是否大于0以识别向下滚动。在OnMouseWheel中，原始事件的wheelDelta应小于0以识别向下滚动。

无论如何，要在各个标签之间滚动，请使用以下代码：

火狐：

    $("#ribbon").bind('DOMMouseScroll', function(e){
        if(e.originalEvent.detail > 0) {
            // Actives the tab that is the next element.
            var nextTab = $("li[role=tab].active").next();
            var attribute = $(nextTab).attr('role');

            if (attribute == 'tab') {
                $(nextTab).EnableTabContents();
            }

        }else {
            // Actives the tab that is the previous element.
            var previousTab = $("li[role=tab].active").prev();
            var attribute = $(previousTab).attr('role');

            if (attribute == 'tab' && !$(previousTab).hasClass('application')) {
                $(previousTab).EnableTabContents();
            }
        }

        //prevent page fom scrolling
        return false;
    });

对于Google Chrome和Internet Explorer（应该在Safari和Opera中使用，但我还没有测试过）：

    $("#ribbon").bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta < 0) {
            // Actives the tab that is the next element.
            var nextTab = $("li[role=tab].active").next();
            var attribute = $(nextTab).attr('role');

            if (attribute == 'tab') {
                $(nextTab).EnableTabContents();
            }

        } else {
            // Actives the tab that is the previous element.
            var previousTab = $("li[role=tab].active").prev();
            var attribute = $(previousTab).attr('role');

            if (attribute == 'tab' && !$(previousTab).hasClass('application')) {
                $(previousTab).EnableTabContents();
            }
        }

        //prevent page fom scrolling
        return false;
    });

在上面的示例中，您有一些额外的逻辑来确保我滚动到Tab元素，并且该元素不是应用程序选项卡。

您看到我正在使用EnableTabContents（）函数。这是我自己的函数，它是API的一部分，它只是将necesarry元素设置为可见或不可见，不，我不会在这里发布该代码。

我希望将来可以帮助任何人： - ）

jQuery允许滚动浏览各种LI元素

1 个答案: