Question

我创建的页面的移动/平板电脑版本有问题我需要这个：当有人看到产品细节并将他移动到右/左（触摸/滑动）时，我需要加载下一个/上一个产品细节（=示例：现在我在页面上，当我向右走时id = 2，然后我加载页面id = 3，npw我在页面上id = 3然后我向左走然后我加载页面id = 2 .. etc ..用不同的页面id）。

我查看了帖子here，但这个解决方案不是动态的，我有问题应用它。接下来我在W3C here中启发。

现在我有这些代码不起作用：

JS档案：

$(document).on('pageinit', function() {

    $('.epicFullscreen').bind('swipeleft',  function(event,ui)
    {
        $.mobile.changePage("http://www.some_domain.cz/category/page_name-1/","slide");
    });

    $('.epicFullscreen').bind('swiperight',  function()
    { 
        $.mobile.changePage("http://www.some_domain.cz/category/page_name-3/","slide"); 
    });

});
$(document).on('pagehide', function () { $(this).off('swipeleft swiperight'); });

HTML：

  <script src="funkce/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script src="funkce/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
  <script src="funkce/skripty.js" type="text/javascript"></script>

我需要使用旧的JQuery 1.7.1。因为这个站点使用它并且一切正常，使用较新的JQuery我可能会遇到新问题。为此，我使用旧的JQuery-mobile 1.3.2。哪个必须与JQuery 1.7.1一起使用。（“jQuery Mobile 1.3支持jQuery 1.7及更新版本”）。我不能包含“jquery.mobile-1.3.2.min.css”，因为这些样式不能正确地与我的样式一起使用。

正文中的HTML就是这样：

<div class="epicFullscreen">
      <img class="epicImg" src="../../data_9/11normal.jpg" alt="inspirace č.2" title="inspirace č.2" border="0" />
  </div>

现在我有箭头的动态解决方案（右/左）并使用PHP添加正确的网址，但在平板电脑/移动用户上使用触摸而不是点击箭头等...

=＆GT;我有问题，为什么不工作我目前的解决方案？我如何将这个静态JS改为动态JS？

Answer 1

尝试这个简单的代码.....

$(document).on("swipeleft", '#'+event.target.id, function () {
                        var nextpage = $(this).next('div[data-role="page"]');
                    if (nextpage.length > 0) {
                        alert(nextpage.attr('id'));
                        $.mobile.changePage(nextpage, "slide", false, true);
                    }
                });

                $(document).on("swiperight", '#'+event.target.id, function () {
                    var prevpage = $(this).prev('div[data-role="page"]');
                    if (prevpage.length > 0) {
                        $.mobile.changePage(prevpage, { transition: "slide", reverse:           true }, true, true);
                        }
                    });

Answer 2

我找到了解决方案，我做出了这个答案。我简化了我的问题并创建了简单的页面。

<强>代码

<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">-->
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

<script>
$(document).on("pageinit",function(){

  var pathname = $(location).attr('href');
  var leva = $('#le').attr("href");
  var prava = $('#pr').attr("href");

  $("body").on("swiperight",function(){
    <!--alert("You swiped right!");-->
    location.href=prava;
  });                       
  $("body").on("swipeleft",function(){
    <!--alert("You swiped left!");-->
    location.href=leva;
  });
});
</script>
</head>
<body>


<div id="test_div" style="display: block;">
    <img src="test.gif" width="100px">
    <a id="le" href="http://www.some_domain.cz/category/page_name-1/">left</a>
    <a id="pr" href="http://www.some_domain.cz/category/page_name-3/">right</a>
</div>

</body>
</html>

我有一个黑客 - 在PHP中我知道我在哪个页面，哪个页面在之前，接下来是哪个页面，我将其链接到箭头（标签为“a”）。这个功能很完美。但我使用此功能代码来获取正确的URL =＆gt;我不需要JQuery中的一些大功能，它可以使用RegEx分割实际URL，知道我在哪个页面，知道是否存在下一页等...现在我必须只将这个代码设置为我的页面，但这是有效的。

我感谢奥马尔的时间，我关闭了这个话题。

在swipeleft / swiperight上更改页面

2 个答案: