Jquery移动刷

Question

我在动态页面中有选项卡。标签工作时，按下，但我想添加一个滑动功能，以便用户也可以滑动到下一个选项卡。

这里是我试图使swipe功能工作的尝试。

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);

，这里是不工作的ppart，

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

}

Answer 1

尝试使用事件委托：

因为在创建处理程序时，片段-1并不存在，所以可以将处理程序分配给文档，并将其委托给任何称为片段-1的子元素，这些子元素现在存在或将来将存在。

为了使它更通用，您可以将类分配给div并委托给类，而不是id.

更新

不能使用交换器在选项卡之间切换，而是使用选项卡小部件active属性(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 );    
    } );         
});

这是一个演示

将swipe代码分配给文档，然后委托给动态div。当您在选项卡div上滑动时，我们会找到它的父部件，即选项卡小部件容器，然后将其活动选项卡选项设置为更改选项卡。

Answer 2

试试这个简单的代码

$(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 3

我比其他人容易..。这不是全部解决办法，但你可以理解我的观点。

备选案文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 );
                });

不确定哪一个更好:)