Mootools拖动滑块帮助

Question

我已经做了一天左右的jQuery滑块,我们只是与其他jQuery元素冲突.

所以想到了它,让我们玩Mootools吧.

问题是我是Js的废话.

所以这里有我所拥有的链接,http://sitehelp.com.au/slider/

现在我想做的是:

滑块更新输入元素中的金额.输入框在页面加载时显示$ 0.随着滑块滑动沿Input元素的数量增加.

或者希望能够将TYPE输入到输入元素中,并使滑块沿着滑动规则滑动到该点.

还需要这个能够坐在页面上的jQuery东西,我似乎回想起Mootools和jQuery在页面上的修复,但不能记住它.

最后,在SUBMIT上传递用户输入的值.

任何帮助,非常感谢.

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

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

Answer 1

你可以用这种方式实现它(在这里小提琴:http://jsfiddle.net/steweb/qg9M6/):

避免与jQuery冲突

包含jQuery,jQuery.noConflict();在以这种方式使用jQuery..wrap jQuery脚本之前放入:

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

并且在jQuery脚本包括mootools lib和拖动滑块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>

拖动滑块的代码

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;
}

希望能帮助到你 ;)