温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery mobile的swipeleft的使用

发布时间:2020-06-21 23:47:03 来源:网络 阅读:1015 作者:Steven2018 栏目:web开发


  1. 今天要用swipeleft这个事件,然后就找了jQuery mobile的官方文档看了一下。然后自己在里面又做了一个向右滑动的扩展,可以正常使用。但是有一个问题,向右滑动后,再往左滑动就没有反应了。但是代码里明明是给向左滑动添加了事件的。


  2. 下面是源代码:

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>swipeleft demo</title>

  <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">

  <script src="jquery-1.10.2.min.js"></script>

  <script>

    $(document).bind('mobileinit',function(){

        $.mobile.changePage.defaults.changeHash = false;

        $.mobile.hashListeningEnabled = false;

        $.mobile.pushStateEnabled = false;

    });

  </script> 

  <script src="jquery.mobile-1.4.5.min.js"></script>

  <style>

  

  html, body { padding: 0; margin: 0; }

  html, .ui-mobile, .ui-mobile body {

    height: 105px;

  }

  .ui-mobile, .ui-mobile .ui-page {

    min-height: 105px;

  }

  #nav {

    font-size: 200%;

    width:17.1875em;

    margin:17px auto 0 auto;

  }

  #nav a {

    color: #777;

    border: 2px solid #777;

    background-color: #ccc;

    padding: 0.2em 0.6em;

    text-decoration: none;

    float: left;

    margin-right: 0.3em;

  }

  #nav a:hover {

    color: #999;

    border-color: #999;

    background: #eee;

  }

  #nav a.selected,

  #nav a.selected:hover {

    color: #0a0;

    border-color: #0a0;

    background: #afa;

  }

  div.box {

    width: 30em;

    height: 3em;

    background-color: #108040;

  }

  div.box.swipeleft {

    background-color: #7ACEF4;

  }

  div.box.swiperight {

background-color: blue;

  }

  </style>

</head>

<body>

 

<h4>Swipe the green rectangle in the left direction to change its color:</h4>

<div class="box"></div>

 

<script>

$(function(){

  // Bind the swipeleftHandler callback function to the swipe event on div.box

  $( "div.box" ).on( "swipeleft", swipeleftHandler );

  $( "div.box" ).on( "swiperight", swiperightHandler );

 

  // Callback function references the event target and adds the 'swipeleft' class to it

  function swipeleftHandler( event ){

    $( event.target ).addClass( "swipeleft" );

  }

  function swiperightHandler(event){

$( event.target ).addClass( "swiperight" );

  }

});

</script>

 

</body>

</html>



参考:http://api.jquerymobile.com/swipeleft/


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI