0

iPhone のロック解除スライダーに似たスライダーを作成してみました。完了するとリンク先のサイトに転送され、スライダーが最後までドラッグされていない場合は最初の位置に戻ります。

これはiPhoneのWebアプリを意図したものではなく、一般的なWebサイトにエフェクトとして入れたいだけです。

これまでのところ、これら2つのテストを試しましたが、両方に行き詰まっています。

1 つ目は次のとおりです。

// 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);

ここでの問題は、(20) ではなく (0) でイベントを起動できないことです。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);
    },
});

ここでの問題は、ドロッパブルが期待どおりにうまく機能しないことです。時々、目に見えないドロッパブルでスライダーを動かします。これは、スライダーが最後までドラッグされたかどうかを示し、何も起こらず、時にはうまく動作すると思います。これは、スライダー上のカーソルの位置が異なることが原因である可能性があります。スライダー機能ではなくドラッグするため、水平方向にしかスライドできないということはできません。これが適切な方法であると思います。

どちらのテストでも、スライド効果を使用してスライダーを最初の位置に戻すことができる人を見つけられませんでした。

これで私を助けてくれるかもしれないmootoolsのクラックがいくつかありますか？皆さんの素晴らしいアイデアをありがとう。

4

1 に答える 1

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>
于 2009-11-08T18:42:33.407 に答える