0

jQuery、CSS、HTML を使用して iOS スタイルのスイッチを作成しました。

現時点では、クリックでトリガーされます。クリック機能を維持したいのですが、ドラッグ機能も欲しいです。これはプラグインなしで可能で、どのように行われますか?

ドラッグ機能なしの作業例。 http://jsfiddle.net/buduR/5/

JS。

$(document).ready(function(){
    $('.element.switch').each(function(){
        $(this).css('width',($(this).find('li:first').width() + 40) + 'px');
        $(this).find('span').css('left',($(this).find('li:first').width() + 18) + 'px')
        $(this).find('li:last').css('left',($(this).find('li:first').width() + 30) + 'px').css('text-align','right');
        if($(this).find('li:first').attr('data-val') == $(this).find('input').val()){ $(this).find('ol').css('left',0); }
        else { $(this).find('ol').css('left','-' + ($(this).find('li:first').width() + 20) + 'px'); }
    });

    $('.element.switch').click(function(){
        if($(this).find('li:first').attr('data-val') == $(this).find('input').val()){
            $(this).find('ol').animate({left:- ($(this).find('li:first').width() + 20)},500);
            $(this).find('input').val($(this).find('li:last').attr('data-val'));
        }
        else {
            $(this).find('ol').animate({left:0},500);
            $(this).find('input').val($(this).find('li:first').attr('data-val'));
        }
    });
});
4

2 に答える 2

0

jQuery .draggableはおそらくiosでは機能しません。これらを調べることができます：

これを見てください：https ：//github.com/furf/jquery-ui-touch-punch

jQueryMobileにも興味があるかもしれません。

編集：

あなたの質問を正しく読んだかどうかはわかりません。WebブラウザでiOSスタイルのUIをシミュレートしたいだけなら、jquery .draggableは正常に機能しますが、モバイルタッチスクリーンで機能させたい場合は、提供したリンクを使用してください。

于 2012-09-01T18:21:06.123 に答える
0

はい、可能です。jquery には独自のドラッグ可能な pugin がありますが、jquery_ui.min を使用する必要があります。

このコードで

$(".drag").draggable({
    axis: "x",
    cursor: "move",
    containment: "parent",
    start: function(event, ui) {
        // do stuff when you start drag
    },
    stop: function(event, ui) {
        // do stuff when you finish drag
    }
});

クラスを「ドラッグ」してドラッグ可能にすることができます。そのため、class="drag" をスパンする必要がある場合は、css を操作するだけです。

ここにJsFiddleがあります

編集

私はJsFiddleを更新しました.jquery.ui.touch-punchをロードし、IOSで動作します（jsfiddleでは、jsfiddleの動作方法が原因ではありませんが、外部では動作します）。また、コンテインメント オプションをドラッグ可能に追加したので、ol 内にとどまります。

于 2012-09-01T17:23:52.237 に答える