Question

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

所以想到了它，让我们玩Mootools。

问题是我是Js的废话。

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

现在我想做的是：

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

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

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

最后，在SUBMIT上传递用户输入的值。

任何帮助，非常感谢。

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

（我没有创作jQuery版本，它只是我通过Stack上的链接定制的一个）

Answer 1

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

避免与jQuery冲突

包含jQuery，在以这种方式使用jQuery..wrap jQuery脚本之前放置jQuery.noConflict();：

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

希望它有所帮助;）

Mootools拖动滑块帮助

1 个答案: