我正在自定义一个 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
有谁知道有什么方法可以准确地阐明我应该如何实现这一点,以及需要什么样的脚本来扩展插件以拥有这种功能,而不仅仅是一个滚动 Pane ?
最佳答案
这个问题在这里被问到并得到了回答: creating jscrollpane-arrows outsite 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 的附加监听器)。代码也可以简化,因此两个按钮共享一个事件处理程序,但我认为这种形式更容易理解(尽管更长)...
关于jquery - 为 jquery 滚动 Pane 分配新的 Arrows div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5606978/