Question

我尝试通过SudoSlider向Jquery Mobile添加滑动支持，但到目前为止它似乎无效。尝试滑动时，ipad和iphone都没有任何反应。

我页面的最小工作示例：

<!doctype html>
<html>
  <head>
    <title></title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="javascripts/jquery.sudoSlider.min.js"></script>
    <script type="text/javascript" src="javascripts/jquery.mobile.custom.min.js"></script>
  </head>
    <body>
      <div id="container">
            <div id="pages">
                <ul class="pages">
                    <li class="page" id="front"></li>
                    <li class="page" id ="about"></li>
                    <li class="page" id ="who"></li>
                    <li class="page" id="services"></li>
                    <li class="page" id="projects"></li>
                    <li class="page" id="contact"></li>
              </ul>
            </div>
      </div>
<script type="text/javascript" >
$(document).ready(function(){
    var sudoSlider = $("#pages").sudoSlider({
        history:           true,
        prevNext:          false,
        continuous:        true,
        customLink:        'a.slide-controller',
        numericText:['home', 'mission', 'about', 'services', 'portfolio', 'contact']
        });

        $(document).keyup(function(e) {
        switch(e.keyCode) {
          case 37 : sudoSlider.goToSlide("prev"); break;
          case 39 : sudoSlider.goToSlide("next"); break;
        }

        $("#pages").swiperight(function() {
            sudoSlider.goToSlide("next");
        });

        $("#pages").swipeleft(function() {
            sudoSlider.goToSlide("prev");
        });
      });
    });
</script>
    </body>
</html>

Answer 1

虽然我不是jquery移动专家，但我认为您需要将滑动事件绑定到页面，例如$("#pages").bind("swipeleft", function() {...});

另外，您应该查看文档以使用$(document).bind('pageinit')代替$(document).ready()

访问http://jquerymobile.com/demos/1.2.0/docs/api/events.html并查看第一个黄色框;滑动事件也在下面解释。

添加滑动支持到sudoslider，滑动不起作用

1 个答案: