2017-09-15 1 views
0

概要:スワイプを1つのプラグインに追加するj.Query 1.6.1

ウェブサイトで2つのj.Queryプラグインを使用しています。私はそれらのいずれかの機能として左と右にスワイプを追加する必要があります。私は以下のj.Queryモバイル最新バージョンで正常にそれを行っている:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
    1.4.5.min.js"></script> 

すべてが他のプラグインの外に、唯一の孤立コードで正常に動作します。

問題:

は、残念ながら、他のプラグインはただのj.Queryバージョンj.Query-1.6.1よりも高いと私は上記以降のバージョンが含まれている場合、他のプラグインが正常に動作しなくなったでは動作しません。

1.6.1と互換性のあるj.Query Mobileが見つからないため、2つのプラグインが同じバージョンで動作する可能性があります。私はそうのように私のスワイプを追加することができるように互換性のj.Queryモバイル版はあります:

function swiping(){ 

    $(function(){ 

    var anim = $('div#carousel'); 
    $(anim).on("swipeleft", swiper); 
    $(anim).on("swiperight", swiper1); 

    function swiper(e){ 

    e.stopPropagation(); 
    e.preventDefault(); 
    $('div#carousel').roundabout('animateToNextChild', showCaption); 

    } 

    function swiper1(e){ 

    e.stopPropagation(); 
    e.preventDefault(); 
    $('div#carousel').roundabout('animateToPreviousChild', showCaption); 

    } 
    }); 

    } 

ない場合は、私は2つのプラグインそのような方法で、携帯用(左および書き込み)スワイプを追加するにはどうすればよいです同じj.Query 1.6.1上で動作する可能性があります。どちらもうまく動作しますが、スワイプがなくても1つだけに追加する必要があります。

答えて

0

j.Queryの同じバージョン内にすべてを保持し、モバイル用のスワイプを1つのプラグインに追加するために、私は自分の関数を書いた方法を変更しなければなりませんでした。モバイルのクエリ:

<!DOCTYPE html> 
<html> 
<head> 
<script type='text/javascript' 
    src='http://code.jquery.com/jquery-1.6.1.js'></script> 
<link rel="stylesheet" type="text/css" 
    href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css"> 
<script type='text/javascript' 
    src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
<style type='text/css'> 
.add-border { 
    border-style: solid; 
    border-width: 1px; 
    width: 100%; 
    text-align: center; 
} 
</style> 
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
function bindEvent(element) { 
    element.bind('tap taphold swipe swiperight swipeleft', function(event, ui) { 
     alert('Event: '+event.type); 
    }); 
} 
bindEvent($('#display-event')); 
});//]]> 
</script> 
</head> 
<body> 
    <div data-role="page" id="home"> 
    <div data-role="content"> 
     <div id="display-event" class="add-border"> 
     <p>Tap, TapHold (for 1 second), Swipe, SwipeRight or SwipeLeft</p> 
     </div> 
    </div> 
    </div> 
</body> 
</html> 
関連する問題