iPhone Разблокировать слайдер с Mootools?

Я пытаюсь сделать слайдер, похожий на разблокировку слайдера iPhone, который пересылается на связанный сайт, когда он завершен, и возвращается в исходное положение, когда ползунок не был перетащен в конец.iPhone Разблокировать слайдер с Mootools?

Это не предназначено для iPhone webapp, я просто хочу разместить его на общем веб-сайте как эффект.

До сих пор я пробовал эти два теста, но я застрял на обоих.

Первый:

// First Example 
var el = $('slideOne'), 

// Create the new slider instance 
var sliderOne = new Slider(el, el.getElement('.slider'), { 
    steps: 20, // There are 35 steps 
    range: [8], // Minimum value is 8 

}).set(20);

Проблема здесь в том, что я не могу стрелять событие на (0) не на (20) как хорошо, я попытался OnComplete, но это запускает функцию немедленно после того, как страница загружается !?

Второй

$$('.textslider').setStyle('opacity', 0.8); 

    $('slider1').makeDraggable({ 
     snap: 0, 
     container: 'slideOne', 
     droppables: '.slidedrop1', 

    onDrop: function(element, droppable, event){ 
     if (!droppable); 
     else console.log(element, 'dropped on', droppable, location = 'index.php/kredite.html', event); 
    }, 
});

Проблема здесь в том, что Droppable не работают так хорошо, как я надеялся, иногда я переместить ползунок на невидимое Droppable, который указывает на то, если ползунок перетаскивается до конца, и ничего не происходит, иногда это прекрасно работает, я думаю, это может быть связано с разным расположением курсора на слайдере. и я не могу сделать так, что можно только горизонтально скользить, так как это не перетащить слайдер, так что я думаю, что это было бы правильно.

На обоих тестах я не понял, кто я могу вернуть ползунок в исходное положение, с эффектом слайда.

Есть ли какие-то mootools трещины вокруг, которые могут помочь мне с этим? Спасибо уже за отличные идеи y'all.

источник

2009-11-06 Anonymous

Никто не получил никакого вклада в это ?? – 2009-11-07 18:57:15

Me! Меня! У меня есть ответ. – artlung

@Marcel - что-то примечательное, так это то, что MooTools - менее популярная структура, поэтому я думаю, что меньше людей SO следуют за этим тегом. Кроме того, специфика вашего запроса такова, что это немного сложнее, чем некоторые вопросы. Во всяком случае, я надеюсь, что мой ответ был полезен. – artlung

<html> 
<head> 
    <script type="text/javascript" 
     src="http://demos.mootools.net/demos/mootools.js"></script> 
    <script type="text/javascript"> 
    window.addEvent('domready', function(){ 
     var el = $('slideOne'); 
     var debug = $('debug'); 
     var ACTIVATE_VALUE = 20; 
     var mySlider = new Slider(el, el.getElement('.knob'), { 
      range: [0], // Minimum value 
      steps: ACTIVATE_VALUE, // Number of steps 
      onChange: function(value){ 
       if (value == ACTIVATE_VALUE) { 
        debug.setStyles({color:'green'}); 
        // go to url after delay 
        (function(){ 
         location.href='http://joecrawford.com/'; 
        }).delay(500); 
       } else { 
        debug.setStyles({color:'red'}); 
        // if not activated, reset after 2 second delay 
        (function(){ 
         value = 0; 
         mySlider.set(value); 
        }).delay(3000); 
       } 
       debug.set('text', value); 
      } 
     }); 
     mySlider.set(0); 
    }); 
    </script> 
    <style type="text/css"> 
    div.slider { 
     width: 200px; 
     height: 50px; 
     background: #eee; 
    } 
    div.slider div.knob { 
     background: #000; 
     width: 50px; 
     height: 50px; 
    } 
    div#debug { 
     font-family: sans-serif; 
     font-size: xx-large; 
    } 
    </style> 
    <title>Slider that resets if it does not reach the end</title> 
</head> 
<body> 
    <div id="slideOne" class="slider"> 
     <div class="knob"></div> 
    </div> 
    <div id="debug">-</div> 
</body> 
</html>

источник

2009-11-08 18:42:33 artlung

Привет, artlung, спасибо за ваши комментарии и ответ, я только что прошел мимо, когда я получил почту ответа. Большое спасибо за вашу попытку, но на самом деле мое желание состояло в том, что слайдер скользит назад, как на iPhone. Но не беспокойтесь, я получаю помощь на mooforum.net. Сценарий работает сейчас, более или менее. Как я могу пометить этот вопрос как «решенный»? – 2009-11-10 11:11:25

Вы отметили мой ответ как проверенный, и это сработало. Но вы можете ответить на свой вопрос и отметить, что, как принято, я думаю. Вы также можете отредактировать свой вопрос и показать, что у вас получилось. – artlung

iPhone Разблокировать слайдер с Mootools?

ответ

Смежные вопросы