1

我正在尝试使用主干和 JQM 在项目中创建覆盖面板。覆盖面板应该像 JQM 文档中描述的示例一样工作：

http://jquerymobile.com/demos/1.2.0/docs/pages/popup/popup-panels.html

我的项目基于骨干网和 JQM 的第一步教程，使用骨干网路由。changePage() 的正常路由运行良好。我只是无法让覆盖面板工作。

我为我的项目创建了一个 git 存储库。如果我单击标题中的“菜单”按钮，覆盖面板应该像上面的演示一样滑入。

https://github.com/Devthias/BackboneJQM.git

在我的路由器内部，我尝试将 data-role 属性设置为 popup，然后调用 changePage 函数。

var AppRouter = Backbone.Router.extend({

routes:{
    "":"home",
    "settings":"settings",
    "menuPanel":"menuPanel"
},

initialize:function () {
    // Handle back button throughout the application
    $('.back').live('click', function(event) {
        window.history.back();
        return false;
    });
    this.firstPage = true;
},

....

menuPanel:function(){
    console.log('#menuPanel');
    this.openPopup(new MenuPanelView());
},

changePage:function (page) {
    $(page.el).attr('data-role', 'page');
    page.render();
    $('body').append($(page.el));
    var transition = $.mobile.defaultPageTransition;
    $.mobile.changePage($(page.el), {changeHash:false, transition: transition});
},

openPopup:function (page){
    $(page.el).attr('data-role', 'popup');
    page.render();
    $('body').append($(page.el));
    var transition = $.mobile.defaultPageTransition;
    $.mobile.changePage($(page.el), {});
}

});

有人知道我做错了什么并且可以帮助我吗？

非常感谢！

4

1 回答 1

0

更改页面绝对是错误的举动..

对我来说，一旦我在模板中放置了一个占位符，它就开始工作了：

<div data-role="page">    
  <div data-role="content">

    ...

    <div data-role="popup" id="myPopup" data-history="false">
      <span>&nbsp;<span>
    </div>
  </div>
</div>

然后我在路由器上做了类似的事情：

openPopup:function (page){
    $('#myPopup').html($(page.el)).popup('open');
}
于 2013-03-21T18:36:18.973 回答