2017-09-15 8 views
0

提纲:仅将滑动添加到一个插件j.Query 1.6.1

我在网站上使用了两个j.Query插件。我需要将左右滑动功能添加到其中一个功能。我已经用j.Query Mobile最新版本成功完成了:

<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-1.6.1更高版本的任何版本j.Query,当我包括上面提到更高的版本,其他插件停止工作,正常工作。

我找不到与1.6.1兼容的j.Query Mobile,因此两个插件可以在同一个版本上运行。是否有一个兼容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); 

    } 
    }); 

    } 

(左和写入)的移动,这两个插件可以运行在相同的j.Query 1.6.1上。两者都运行良好,但没有滑动,我只需要添加到其中的一个。

回答

0

为了让所有内容都保存在同一个版本的j.Query中,并为一个插件添加手机滑动功能,我不得不改变我编写函数的方式,我遵循下面的例子,并添加了旧版本的j。查询手机:

<!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>