jQuery Mobile滑动

Question

jQuery Mobile滑动

3

我有一个动态页面内的选项卡。当用户按下选项卡时，选项卡很好用，但我想添加一个滑动功能，以便用户也可以滑动到下一个选项卡。

这是我尝试使滑动功能工作的方式：

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

}

!

- user3210416

你尝试过 $( "div" ).bind( "swipeleft", swipeleftHandler ); 吗？ - sharshi

1

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

尝试了两种方法，仍然不起作用。 - user3210416

你想要切换页面还是在选项卡之间切换？ - Omar

3个回答

0

我比其他人更容易。这不是整个解决方案，但你可以理解我的意思。

选项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 );
                });

不确定哪个更好 :)

- TrOnNe

0

试试这个简单的代码

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

- Swagat Mali

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ezanker · Accepted Answer

尝试使用事件委托：

因为fragment-1在创建处理程序时不存在，所以你将处理程序分配给文档并委派给任何现在或将来存在的名为fragment-1的子元素。

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

更新：

您不能使用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 );    
    } );         
});

这里有一个演示

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