javascript-jQuery移动刷卡

2019-11-21 23:37:42 阅读：242 来源： 互联网

标签：jquery-mobile swipe javascript 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');
 }
});

}

！

解决方法:

尝试使用事件委托：

由于fragment-1在创建处理程序时不存在,因此可以将处理程序分配给文档,并将其委派给现在存在或将来将存在的称为fragment-1的所有子元素.

为了使其更通用,可以将类分配给div并委托给该类,而不是id.

UPDATE

您不能使用changepage在标签之间切换,而应使用tabs小部件的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 );    
    } );         
});

Here is a 07001

刷卡代码已分配给文档,然后委托给动态div.在选项卡div上滑动时,我们找到其父级,即选项卡小部件容器,然后设置其活动选项卡选项以更改选项卡.

标签：jquery-mobile,swipe,javascript,jquery
来源： https://codeday.me/bug/20191121/2055293.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-jQuery移动刷卡