当前位置：文江博客话题详情

jquery 特色 ui 滚动条

发布于 2024-12-24 03:24:36 字数 268 浏览 1 评论 0原文

我希望修改 jquery 特色 ui 示例。它在右侧显示 4 个拇指，我想知道如果我有更多类似 8 个拇指，我怎样才能让我的滚动条随着突出显示的功能移动？

我这里举一个例子，供大家参考。如何让包含拇指的 div 在显示所选项目时移动？

示例在这里： http://www.barberveri.com/featured/index.html

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蒗幽 2024-12-31 03:24:36

此页面使用 jQuery UI 选项卡插件和 jScrollPane 插件。

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

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

$(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 文档，当传递 null 值时可以停止旋转ms 参数（第二个）

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

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

$('.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。

This page uses jQuery UI Tabs plugin and jScrollPane plugin.

I think this behavior can be achieve by using the method scrollToElement() from the jScrollPane plugin and the show callback from jQuery UI Tabs.

Basically, when the next tab content is displayed automatically, get the instance of the jScrollPane plugin from jquery data (to get access to the API) and use ui.tab (current tab button) to 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);
});

Edit: How to stop rotation when hovering a panel.

According to the jquery tabs documentation, the rotation can be stopped when passing a null value for the ms parameter (second)

Set up an automatic rotation through tabs of a tab pane. The second
argument is an amount of time in milliseconds until the next tab in
the cycle gets activated. Use 0 or null to stop the rotation. The
third controls whether or not to continue the rotation after a tab has
been selected by a user. Default: false.

Use the .hover() method to call the rotate method when hovering the panels:

$('.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); }
);

Here is working example on jsfiddle.

回复收藏 0 原文

~没有更多了~