0

私はこの例で遊んでいます：

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

これらのうちの 2 つ (それぞれに独自のコントロールがあります) を同じページに配置するにはどうすればよいでしょうか?

4

1 に答える 1

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>​

フィドル

于 2012-08-25T11:10:02.837 に答える