Question

我正在使用Jquery Mobile pagination插件并尝试将其用于我的插件。

分页允许在移动设备上滑动页面。

我的插件正在使用分屏，所以我在我正在使用的其中一个面板中刷页面。因此，我需要调整原始插件以允许：

点击/按键更改面板页面=工作
在向左/向右滑动时更改面板页面不起作用

问题在于刷卡页面并没有真正改变，因此我需要模仿常规jQuery Mobile changePage期间发生的所有事情。

除了将URL设置为正在刷入的页面外，一切正常。

我可以获取页面ID，但我无法设置它的URL。我认为this使用dataURL很有帮助，但我无法理解。

非常感谢任何帮助！

以下是修改过的插件的相应代码：

snapTo = function( newOffset, immediate ){
   var $newActive = newOffset === 0 ? $page : newOffset > 0 ? $prevPage : $nextPage,
       samePage = !$newActive || $newActive.is( $page ),
       newUrl = samePage && $page.jqmData( "url" ) || $newActive.jqmData( "url"),
       // so I have the new page and it's url when the page is "swiped in"

       // this fires when the swipe is done
       doneCB = function(){ 

           if( !samePage){
              // checking for panel
              if ( $('html').hasClass( "multiview") ) {
                  // ... stuff
                  // I need to set the URL here without triggering a transition

                  } else {
                  //this is how the plugin does it
                  $page.removeClass( $.mobile.activePageClass )

                  //disable hash listening
                  $.mobile.urlHistory.ignoreNextHashChange = true;

                  // pagination uses this but it triggers a changePage, which I don't want
                  $.mobile.path.set( newUrl );

                  //set "toPage" as activePage
                  $.mobile.activePage = $newActive;
                  ... 
                  }
              }

解
不确定是否有人使用它，但无论如何这里是解决方案：

您必须致电changePage
类似于分页设置 ignoreNextHashChange = true ，我需要在我自己的插件中设置一个类似的阻止程序，以阻止hashChanges触发不需要的转换。

分页内的代码：

var fakeOptions = {};

fakeOptions.transition="none";
// set a blocker! 
$(_pluginTriggerElement_).plugin("option", "$blockPaginationHashChange", true);

// fire a transition
$.mobile.changePage( $newActive, fakeOptions );

这将触发changePage而不进行转换。我的插件有一个类似于JQM的例程，因为每个changePage也会触发一个后续的hashChange。就像JQM $ ignoreNextHashChange选项一样，我定义了我自己的 $ blockPaginationhashChange 选项并在我的面板Hashchange例程中设置了一个阻止程序，如下所示：

// block pagination hashChanges
if ( self.options.$blockPaginationHashChange == true ) {
     self.options.$blockPaginationHashChange = false;
     // stop here
     return;
     }

这样，当刷页时，hashChange不会反转。非常眨眼，但它的工作原理。

Answer 1

我不熟悉您正在使用的插件，但如果您发布指向您网站的链接，我可能会提供更多帮助。

话虽这么说，jQuery Mobile公开了$.mobile.changePage()函数，使更改页面变得容易。

$(document).delegate('[data-role="page"]', 'swipeleft swiperight', function (event) {
    event.preventDefault();
    if (event.type == 'swipeleft') {
       $.mobile.changePage(<URL-BASED-ON-SWIPELEFT>, {<options>});
    } else {
       $.mobile.changePage(<URL-BASED-ON-SWIPERIGHT>, {<options>});
    }
});

请注意，<URL-BASED-ON-*>也可以是DOM中已有的对象，例如$('#some-page-id')。

$.mobile.*的文档：http://jquerymobile.com/demos/1.0/docs/api/methods.html

<强>更新

当用户滑动时，如何在左/右箭头上触发click事件，这样您可以保持Pagination插件使用的相同逻辑：

$(document).bind('swipeleft swiperight', function (event) {
    if (event.type == 'swipeleft') {

        //swipeleft
        $('.ui-pagination-next').children().trigger('click');
    } else {

        //swiperight
        $('.ui-pagination-prev').children().trigger('click');
    }
});

有没有办法在使用jquery-mobile将新页面刷入视图时手动设置URL？

1 个答案: