jquery-mobile - JQuery Mobile 使用 simpledialog2 解决身份验证问题

Question

我正在尝试创建一个 jQuery 移动应用程序，它将有一个授权页面，(即一个带有文本输入的 jqm 对话框和一个提交按钮，用户将在其中输入他们的用户名，这将根据用户列表进行检查/从 Parse 中提取访问权限，如果授予访问权限，对话框将被删除，用户可以访问该应用程序)。我意识到我离那个阶段还有很长的路要走，但当时我已经使用带有空白模式的 simpledialog2 插件来创建我希望对话框外观的模型，我打算将其扩展为一个功能齐全的模块。

$(document).delegate('#opendialog', 'click', function() {
   $('<div>').simpledialog2({
     mode: 'blank',
     headerText: 'App Auth',
     headerClose: true,
     dialogAllow: true,
     dialogForce: true,
     blankContent : 
       "<p>Please enter your username:<br/></p>"+
       "<form><input/><br/>"+
       "<a data-role='button'>Submit</a></form>"
  })
})

当我试图扩展这段代码时，我不断收到类似“TypeError: 'undefined' is not a function (evaluating ...)” 的错误，并且找不到任何原因。我想知道是否有人可以告诉我我是否以正确的方式处理这个问题？我尝试使用按钮 w 创建一个授权页面。输入模式如 http://dev.jtsage.com/jQM-SimpleDialog/demos2/blankin.html#/jQM-SimpleDialog/demos2/button.html 中所述但它对我也不起作用。任何指导将不胜感激。 :)

Answer 1

您可以绑定(bind)到 pagebeforechange 事件来检查用户是否已通过身份验证。如果没有，您可以动态创建并显示身份验证对话框:

jQuery("body").live("pagebeforechange", function(e, data) {
    if(typeof data.toPage !== 'string')
        return; 
    if(!userIsAuthenticated) {
        showAuthDialog();
        e.preventDefault();
        return false;
    }
});

动态生成的对话框可以这样显示:

function showAuthDialog() {
    var dialog = jQuery('<div data-role="dialog"> <div data-role="content"> <h1>MyAuthDialog</h1> <p>Your auth form here.</p></div> </div>');

    // bind events to auth form here
    // ...

    jQuery.mobile.pageContainer.append(dialog);
    jQuery.mobile.changePage(dialog);
}