我正在尝试使用主干和 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), {});
}
});
有人知道我做错了什么并且可以帮助我吗?
非常感谢!