0

こんにちは (私はこれを正しく行っていない可能性があります) - 「changePage()」を使用してページをダイアログとしてロードしようとすると、JQuery Mobile (JQM) アプリケーションのページに移動しようとして問題が発生しています。私は周りを見回して、運がないいくつかの代替案を試しました:(

たとえば、アプリケーションの init でダイアログとして正常に開くログイン ページがあります。

$.mobile.changePage(page, {transition: 'pop', role: 'dialog' });

ログイン画面にはログイン ボタンがあり、時計を合わせると通常の (ダイアログ以外の) ページに転送されます。

$.mobile.changePage( page );

この問題は、ダイアログでログイン ページを再度読み込もうとしたときに発生します (ログアウト時など)。クリックするとログインページに戻るログアウトボタンがあります。

$.mobile.changePage(page, {transition: 'pop', role: 'dialog' });

ただし、今回は JQM lib で次の例外が発生します。

問題を再現するコードの例を次に示します。

<script type="text/javascript">

$(function()  {
    createPage("login");
});

function createPage( pageStr ) {  
    var page = $("<div id='pageWrapper' class='pageWrapper' data-role='page' ></div>");
    var header = createHeader( pageStr );
    var content = createContent( pageStr );

    page.append(header, content);

    $("body").append( page );

    if(pageStr == "login") {     
        $.mobile.changePage(page, {transition: 'pop', role: 'dialog' }); 
    }
    else {
        $.mobile.changePage( page );
    }
}

function createHeader( pageStr ) {
    var headerContainer = $("<div id='header' class='header' data-role='header' data-position='fixed'></div>");

    if(pageStr != "login") {
        var logOutButton = $("<a onclick='logout()' class='ui-btn-right' data-rel='dialog'>Logout</a>");
        headerContainer.append(logOutButton);
    }

    var headerTitle = $("<h1>Page: " + pageStr + "</h1>");
    headerContainer.append(headerTitle);
    return headerContainer;
}

function createContent( pageStr ) {
    var contentDiv = $("<div id='content' class='content' data-role='content'></div>");
    var contentBuilder = $("<div></div>");

    if(pageStr == "login") {
        contentBuilder.append(createloginForm());
    }
    else {
        contentBuilder.append(createWrapper());
    }
    contentDiv.append(contentBuilder);
    return contentDiv;
}

function createloginForm() {
    var form = $("<form id='loginForm' method='post'></form>");
    var loginButton = $("<p><input type='button' value='Login' onclick='login()'></input></p>");
    form.append(loginButton);
    return form;
}

function createWrapper() {
    var tmpText = $("<h2>some content ...</h2>");
    return tmpText;
}

function login() {
    createPage("main")
}

function logout() {
    createPage("login"); // pages[0] = login page
}

</script>

ありがとう、ジョン。

4

1 に答える 1

0

コメントありがとうございます - 毎回ページをクリーニングしているため、重複する要素や ID は追加されていません (一度に 1 つのページのみが追加/レンダリングされます)。

ハングする前にページを手動で初期化することで問題を修正したと思います-「より良い」修正かどうかはわかりませんが、うまくいくようです：

changePage() メソッドを呼び出す前に、まず新しいページを初期化する必要があります。

ありがとう、ジョン。

于 2013-01-28T12:04:47.960 に答える