2009-11-06 2 views
0

아이폰의 잠금 해제 슬라이더와 비슷한 슬라이더를 만들려고합니다. 링크가 완료되면 링크 된 사이트로 전달되고 슬라이더가 끝까지 드래그되지 않을 때 초기 위치로 돌아갑니다.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); 

문제점 I (0) 안 (20) aswell, 난 onComplete를 시도에 대한 이벤트가 발생하지 수 있지만 이것은 후에 immediatly 기능 화재 :

은 페이지가로드!? 드롭 가능한 i가 기대만큼 잘 작동하지 않도록 여기

$$('.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); 
    }, 
}); 

문제

, 가끔 슬라이더 끌면 나타내는 보이지 않는 낙하 할상의에게 슬라이더를 이동 결국, 아무 일도 일어나지 않는다. 때로는 잘 동작한다. 나는 이것이 슬라이더상의 커서의 다른 위치 때문일 것이라고 생각한다. 그리고 그것은 그것이 슬라이더 기능이 아니라 드래그이기 때문에 수평으로 슬라이드하는 것만 가능하다는 것을 알았습니다. 그래서 이것이 올바른 방법이라고 생각합니다.

두 테스트에서 나는 슬라이더를 원래 위치로 되돌릴 수있는 사람이 누구인지 알지 못했습니다.

누가이 문제를 도와 줄 수있는 주위에 mootools 균열이 있습니까? 모두의 위대한 아이디어에 대해 이미 감사드립니다.

+0

아무에게도이 의견이 없습니다. –

+0

나! 나를! 나는 대답이있다. – artlung

+0

@Marcel - MooTools는 덜 인기있는 프레임 워크이므로 주목하지 않는 사람이 적습니다. 또한 요청의 구체성은 일부 질문보다 다소 어려울 정도입니다. 어쨌든 내 대답이 도움이되기를 바랍니다. – artlung

답변

0
<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> 
+0

안녕하세요. 귀하의 의견과 답변을 보내 주셔서 감사합니다. 답변 메일을 받았을 때 방금 전달했습니다. 시도해 줘서 고마워,하지만 실제로, 내 소망은 아이폰처럼 슬라이더가 뒤로 움직이는 것이다. 그러나 mooforum.net에서 도움을 얻을 수있는 걱정은 없습니다. 스크립트는 현재 다소 효과가 있습니다. 이 질문을 어떻게 "해결 된"것으로 표시 할 수 있습니까? –

+0

내 대답에 선택 표시를했는데 성공했습니다. 그러나 당신은 당신 자신의 질문에 대답 할 수 있고 내가 받아 들인대로 생각할 수 있습니다. 또한 질문을 편집하고 마지막 결과물을 보여줄 수도 있습니다. – artlung

관련 문제