Question

我正在玩这个例子：

http://jquerytools.org/demos/rangeinput/scrollbar.htm

我如何将其中两个（每个都有自己的控件）放在同一页面上？

Answer 1

我猜你会通过为每个卷轴使用唯一ID（它总是唯一的）来做这样的事情：

<head>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jquerytools.org/media/css/standalone.css"/>
</head>
<body>

<!-- our first scrollable element -->
<div id="scrollwrap">
  <div id="scroll">
    This is the first slider on the same page !!!
  </div>
</div>

<!-- rangeinput that controls the scroll -->
<input type="range" max="2600" step="10" id="range"/>

<br><br>

<!-- our next scrollable element -->
<div id="scrollwrap2">
  <div id="scroll2">
    This is the second slider on the same page !!!
  </div>
</div>

<!-- rangeinput that controls the scroll -->
<input type="range" max="2600" step="10" id="range2" />

<script>
var scroll = $("#scroll");
$("#range").rangeinput({
    onSlide: function(ev, step)  {
        scroll.css({left: -step});
    },
    progress: true,
    value: 100,
    change: function(e, i) {
        scroll.animate({left: -i}, "fast");
    },
    speed: 0
});

var scroll2 = $("#scroll2");
$("#range2").rangeinput({
    onSlide: function(ev, step)  {
        scroll2.css({left: -step});
    },
    progress: true,
    value: 100,
    change: function(e, i) {
        scroll2.animate({left: -i}, "fast");
    },
    speed: 0
});
</script>
</body>
</html>

FIDDLE

两个div - 每个都在同一页面上有滚动条？

1 个答案: