我正在玩这个例子:
http://jquerytools.org/demos/rangeinput/scrollbar.htm
我如何将其中两个(每个都有自己的控件)放在同一页面上?
我猜你会通过为每个滚动条使用唯一 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>