Jquery移动滑动

我在动态页面中有选项卡。这些标签在按下时效果很好，但我想添加一个滑动功能，以便用户也可以滑动到下一个标签。Jquery移动滑动

这是我的努力让刷卡功能的工作

function goToMatchDetailPage(matchHome, matchAway){ 
    first_part_id = matchHome.substring(0,2); 
    sec_part_id = matchAway.substring(0,2); 
    var id = first_part_id.concat(sec_part_id); 
    //create the html template 
    var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>" 
     + matchHome + "</h1></div><div data-role='content'><div data-role='tabs'>" 
    + "<div data-role='navbar'>" 
    + "<ul>" 
    + "<li><a href='#fragment-1'>" + matchHome + "</a></li>" 
    + "<li><a href='#fragment-2'>" + matchAway + "</a></li>" 
    + "</ul>" 
    + "</div>" 
    + "<div id='fragment-1'>" 
    + "<p>This is the content of the tab 'One', with the id fragment-1.</p>" 
    + "</div>" 
    + "<div id='fragment-2'>" 
    + "<p>This is the content of the tab 'Two', with the id fragment-2.</p>" 
    + "</div></div></div>"); 

    //append the new page to the page contanier 
    matchPage.appendTo($.mobile.pageContainer); 

    //go to the newly created page 
    $.mobile.changePage(matchPage);

尝试这里是行不通

$(function(){ 
// Bind the swipeleftHandler callback function to the swipe event on div.box 
$("div").on("swipeleft", swipeleftHandler); 

// Callback function references the event target and adds the 'swipeleft' class to it 
function swipeleftHandler(event){ 
//go to the newly created page 
    $.mobile.changePage('#fragment-2'); 
} 
}); 

}

的ppart！

来源

2014-04-03 user3210416

你尝试'$（ “格”）.bind（“swipeleft “，swipeleftHandler）;' – sharshi

当你没有为每个按钮点击加载页面时，使用'document.ready'函数是一个坏主意，请查看事件文档：http://demos.jquerymobile.com/ 1.2.1 /文档/ API/events.ht毫升。在创建新元素时，初始绑定不会影响这些元素，因此您必须重新绑定到新元素或使用委托事件处理程序。有关Stack Overflow的大量信息。 – Jasper

尝试两个仍然没有工作 – user3210416

尝试使用事件代表团：

由于片段-1并不在你所创建的处理程序的时间存在，则处理程序分配给文档，并将其委托给存在所谓的片段1任何子元素现在或将来会存在。

为了使它更通用的，你可以指定类div和委托类的，而不是一个ID ...

UPDATE

不能使用changepage标签之间去，而不是使用选项卡小部件活动属性（http://api.jqueryui.com/tabs/#option-active）：

$(document).on("pagecreate", "#page1", function() { 
    $("#btngo").on("click", function(){ 
     goToMatchDetailPage('Liverpool', 'Southhampton');  
    }); 

    $(document).on("swipeleft", "#fragment-1", function(){  
      $(this).parents("div [data-role=tabs]").tabs("option", "active", 1);  
    }); 
     $(document).on("swiperight", "#fragment-2", function(){  
      $(this).parents("div [data-role=tabs]").tabs("option", "active", 0);  
    });   
});

这里是一个DEMO

挥击码被分配给该文档，然后委托给动态DIV。当您在选项卡div上滑动时，我们会找到它的父级是选项卡控件容器，然后设置其活动选项卡选项来更改选项卡。

来源

2014-04-03 21:24:46 ezanker

我认为这会自己工作，但现在屏幕上没有任何东西。一切都在一个功能，你认为它应该是分开的？ – user3210416

你已经使用了'$（function（）{}）;'：O – Omar

@Omar，我刚刚离开$（function（）{out of laziness;） – ezanker

试试这个简单的代码

$(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); 
        } 
       });

来源

2014-04-04 05:51:23

我比其他人更容易..这不是完整的解决方案，但你可以得到我的观点。

选项1

$(document).on("swipeleft", '#page1', function() { 
     $('#fragment-2').trigger('click'); 
       });

选项2

$(document).on("swipeleft", '#page1', function() { 
     $(this).find("div [data-role=tabs]").tabs("option", "active", 1); 
       });

不知道哪一个是更好的想法:)

来源

2014-11-30 22:07:00 TrOnNe

Jquery移动滑动

回答

相关问题