jquery - Mootools 拖动 slider 帮助

Question

我已经做了一个 jQuery slider 一天左右了，我们只是与其他 jQuery 元素发生了冲突。

算了，让我们来玩一下 Mootools吧。

问题是我对 Js 很烂。

这是我所拥有的链接，http://sitehelp.com.au/slider/

现在我想做的是:

slider 更新输入元素中的数量。输入框在页面加载时显示 $0。 随着 slider 滑动，输入元素中的数量会增加。

或者希望能够在输入元素中键入内容，并使 slider 沿着计算尺滑动到该点。

还需要它能够与 jQuery 内容一起位于页面上，我似乎记得 Mootools 和 jQuery 一起在页面上修复，但不记得了。

最后，在提交时传递用户输入的值。

任何帮助，非常感谢。

查看我的 jQuery 版本。 >> http://sitehelp.com.au/slider2/

(我没有创作 jQuery 版本，它只是我通过 Stack 上的链接自定义的版本)

Answer 1

你可以通过这种方式实现它(在这里 fiddle :http://jsfiddle.net/steweb/qg9M6/):

避免与 jQuery 冲突

包含 jQuery，在使用 jQuery 进行操作之前放置 jQuery.noConflict();。以这种方式包装 jQuery 脚本:

(function($) {
  //jquery stuff
})(jQuery);

之后的 jQuery 脚本包括 mootools lib 和拖动 slider moo 脚本。即

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    (function($) {
        //jquery stuff
    })(jQuery);
</script>

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
    window.addEvent('domready',function(){
        //mootools stuff
    });
</script>

<小时/>

拖动 slider 的代码

JS

window.addEvent('domready',function(){

    var slider = $('slider'); //grab slider
    var amount = $('amount'); //grab input 'amount'
    var sliderInstance = new Slider(slider, slider.getElement('.knob'), {
        range:[0,3000000], //range of the slider instance
        wheel:true, //try to use mousewheel when u are over the slider
        steps:3000, //number of steps (3.000.000/1.000)
        initialStep:0, //starting from
        onChange: function(value){
            //when it changes, update the amount 
            amount.set('value',value);
        }
    });
    amount.addEvent('blur',function(){ //when u input something and u click outside of the imput
        sliderInstance.set(this.value); //update slider instance
    });

});

标记

<p>$0 to $3,000,000 ($1000 increments):</p>
<div id="slider" class="slider">
  <div class="knob"></div>
</div>
<label>$<input type="text" id="amount" name="amount" value="" /></label>

CSS

.slider {
  background: #CCC;
  height: 16px;
  width: 200px;
  float:left;
  margin:5px 10px 0px 2px;
}
  .slider .knob {
    background: #000;
    width: 16px;
    height: 16px;
  }

input[type="text"]{
    font-size:14px;
    padding:3px;
}

希望有帮助;)