为 jquery 滚动窗格分配新的 Arrows div

发布于 2024-10-31 21:56:11 字数 677 浏览 2 评论 0原文

我正在自定义一个 UI 滚动窗口，它水平滚动并充满图片。我已将 jquery scroll-pane 应用到容器 div 并成功应用了客户滚动条。就这么简单......并将 main-scroll-pane 类添加到所描述的窗口中。

$(function()
{
    $('.main-scroll-pane').jScrollPane();
});

我想做的是将箭头 div 重新定义为驻留在容器 div 外部、两侧的箭头...

是否有任何类型的脚本我可以实现

$(function(){$('.main-scroll-pane-left-arrow').jScrollPane();});

以在 div class=".scroll 上发挥作用-pane-left-arrow"

我已经阅读了一点API，这是允许的： http://jscrollpane.kelvinluck.com/api.html

有谁知道有什么方法可以准确地澄清吗我应该如何实现这一点以及需要什么样的脚本来扩展插件以拥有这种功能而不仅仅是一个滚动窗格？

原文

I'm customizing a UI scrolling window, that scrolls horizontally filled with pictures. I've applied the jquery scroll-pane to the container div and it succesfully applied the customer scrollbars. it was as simple as this... and adding the main-scroll-pane class to the described window.

$(function()
{
    $('.main-scroll-pane').jScrollPane();
});

What i'm trying to do is redefine the arrow divs to arrows that reside outside the container div, on either side...

Is there any sort of script I could implement to get

$(function(){$('.main-scroll-pane-left-arrow').jScrollPane();});

functional on a div class=".scroll-pane-left-arrow"

I've read into the API a little and this is allowed :
http://jscrollpane.kelvinluck.com/api.html

Does anyone know any ways to clarify exactly how I should implement this and what sort of script is required to extend the plugin to have this sort of functionality for more than just one scroll pane?

分享到QQ

分享到微博

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

发布评论

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

亚希 2024-11-07 21:56:11

这个问题几乎在这里被问到并得到回答：
创建 jscrollpane-arrows 外站 jspContainer

但是为了详细说明我的答案，这里有一个例子：
http://jsfiddle.net/WzNM4/6/

您需要为链接添加侦听器然后使用jScrollPane API告诉jScrollPane滚动：

$(function()
{
    var api = $('.scroll-pane').jScrollPane().data('jsp');
    $('#scroll-up').bind(
        'mousedown',
        function()
        {
            var interval = setInterval(
                function()
                {
                    api.scrollByY(-5);
                },
                100
            );
            $(window).bind(
                'mouseup.jspExample',
                function()
                {
                    clearInterval(interval);
                    $(document).unbind('.jspExample');
                }
            );
        }
    );
    $('#scroll-down').bind(
        'mousedown',
        function()
        {
            var interval = setInterval(
                function()
                {
                    api.scrollByY(5);
                },
                100
            );
            $(window).bind(
                'mouseup.jspExample',
                function()
                {
                    clearInterval(interval);
                    $(document).unbind('.jspExample');
                }
            );
        }
    );
});

注意代码有点复杂因为我想展示如何在按住鼠标按钮时使滚动继续发生（因此需要 setInterval 和 mouseup 的附加侦听器）。代码也可以简化，因此两个按钮共享一个事件处理程序，但我认为这种形式更容易理解（虽然更长）......

This question was prettymuch asked and answered here:
creating jscrollpane-arrows outsite jspContainer

But to elaborate on my answer from then, here is an example:
http://jsfiddle.net/WzNM4/6/

You need to add listeners for the links and then use the jScrollPane API to tell the jScrollPane to scroll:

$(function()
{
    var api = $('.scroll-pane').jScrollPane().data('jsp');
    $('#scroll-up').bind(
        'mousedown',
        function()
        {
            var interval = setInterval(
                function()
                {
                    api.scrollByY(-5);
                },
                100
            );
            $(window).bind(
                'mouseup.jspExample',
                function()
                {
                    clearInterval(interval);
                    $(document).unbind('.jspExample');
                }
            );
        }
    );
    $('#scroll-down').bind(
        'mousedown',
        function()
        {
            var interval = setInterval(
                function()
                {
                    api.scrollByY(5);
                },
                100
            );
            $(window).bind(
                'mouseup.jspExample',
                function()
                {
                    clearInterval(interval);
                    $(document).unbind('.jspExample');
                }
            );
        }
    );
});

Note that the code is complicated a bit because I wanted to show how you can make the scroll continue happening while the mouse button is held down (hence the need for setInterval and an additional listener for mouseup). The code could also be simplified so both buttons shared an event handler but I think it is more understandable (although longer) in this form...

回复收藏 0 原文