Question

我想修改jquery特色ui的例子。它在右边显示4个拇指，我想知道我是否有更多像8我怎么能让我的卷轴与突出显示的功能一起移动？。

我在这里有一个例子供大家查看。如何在显示所选项目时获取包含拇指的div？

此处示例： http://www.barberveri.com/featured/index.html

Answer 1

此页面使用jQuery UI Tabs plugin和jScrollPane插件。

我认为可以通过使用jScrollPane插件中的方法scrollToElement()和来自jQuery UI选项卡的show回调来实现此行为。

基本上，当自动显示下一个选项卡内容时，从jquery数据中获取jScrollPane插件的实例（以获取对API的访问权限），并使用ui.tab（当前选项卡按钮）来scrollToElement。

$(document).ready(function(){
    $("#featured > #thumbs ul")
        .tabs({
            fx: { opacity: "toggle" },
            show: function(e, ui) {
                // when the next tab is displayed, scroll to this new element
                var plugin = $('.ui-tabs-nav').data('jsp');
                if (plugin) {
                    plugin.scrollToElement(ui.tab, false);
                }
            }
        })
        .tabs("rotate", 5000, true);
});

编辑：悬停面板时如何停止旋转。

根据jquery tabs documentation，当为ms参数传递空值时，可以停止旋转（第二个）

通过选项卡窗格的选项卡设置自动旋转。第二参数是直到下一个选项卡的时间量（以毫秒为单位）循环被激活。使用0或null来停止旋转。该第三个控制是否在制表符后继续旋转已被用户选中。默认值：false。

使用.hover()方法在悬停面板时调用rotate方法：

$('.ui-tabs-panel').hover(
    // stops the rotation when mouse enters
    function() { $tabs.tabs("rotate", null); },
    // restart it when mouse goes out
    function() { $tabs.tabs("rotate", 2000, true); }
);

以下是jsfiddle上的工作示例。

jquery以ui卷轴为特色

1 个答案: