Справка Mootools Drag Slider

Question

Я делал слайдер jQuery в течение дня или около того, и у нас просто есть конфликты с другими элементами jQuery.

Так что подумайте, давайте поиграем с Mootools.

Проблема в том, что я дерьмо в Js.

Так вот ссылка на то, что у меня есть, http://sitehelp.com.au/slider/

Теперь я хочу сделать следующее:

Ползунок обновляет сумму в элементе ввода. Поле ввода для отображения $ 0 при загрузке страницы. По мере скольжения ползунка значение в элементе Input увеличивается.

В качестве альтернативы Хотелось бы иметь возможность ТИПОВАТЬ в элементе ввода и заставить слайдер скользить к этой точке вдоль правила скольжения.

Также это нужно, чтобы иметь возможность сидеть на странице с вещами jQuery, я, кажется, помню исправление для Mootools и jQuery на странице вместе, но не могу вспомнить это.

Наконец, при SUBMIT передайте введенное пользователем значение.

Любая помощь, с благодарностью.

Посмотреть мою версию jQuery. >> http://sitehelp.com.au/slider2/

(я не писал версию jQuery, ее просто я настроил по ссылке в стеке)

Answer 1

Вы могли бы достичь этого таким образом (скрипка здесь: http://jsfiddle.net/steweb/qg9M6/):

Избегать конфликтов с jQuery

Включить jQuery, поставить jQuery.noConflict(); перед тем, как что-то делать со скриптами jQuery..., оберните скрипты 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;
}

Надеюсь, это поможет;)