0

HTML でページを構築する代わりに、javascript で構築したいのですが、その方法がわかりませんでした。ということでを使ってみた.trigger("create")のですが、彼は何ページも作り続けているので、そうではありません。私が行った別の方法はappend、動作しますが、ウィジェットが提供されないため、希望する方法ではありません。しかし、レンダリングする必要がありますよね？それとももっと良い方法がありますか？

HTML

<div data-role="page" id="page1">
<div data-role="button" onclick="goToMenu()">Next</div>
</div>
<div data-role="page" id="page2">   
</div>

Javascript 

var menu = '<div data-theme="a" data-role="header"> \n' +
'<a data-role="button" onclick="" class="ui-btn-left">Back</a> \n' +
'<h3> Header</h3> \n' +
'</div> \n' +
'<div data-role="content"> \n' +
'</div> \n' +
'</div>';

function goToMenu() {
    $.mobile.changePage("#page2", {
        transition: "flow"
    });
    $('#page2').append(menu);
}
4

1 に答える 1

0

コードを少し再構築する必要があります。

  1. data-role="button"での使用はお勧めできませんdiv。タグの上aまたは上で使用してください。button
  2. ページを動的に生成するためのすべてのコードを関数に入れる必要がありgoToMenuます。それを追加してから使用しますchangePage。
  3. の使用はonclickお勧めできません。イベント委任の jQuery 方式を使用します。

マークアップは次のとおりです。

<div data-role="page" id="page1">
    <div data-role="content">
        <button id="nextPageLink">Next</button>
    </div>
</div>
<div data-role="page" id="page2"></div>

JavaScript は次のとおりです。

//pageinit event of page1
$(document).on("pageinit", "#page1", function () {
    //click event for button
    $(this).on("click", "button", function () {
        //create HTML
        var menu = '<div data-theme="a" data-role="header">' +
            '<a data-role="button" data-rel="back" class="ui-btn-left">Back</a> ' +
            '<h3> Header</h3>' +
            '</div>' +
            '<div data-role="content">' +
            '</div>' +
            '</div>';
        //append "menu" to #page2
        $(menu).appendTo("#page2");
        //changePage to redirect to #page2
        $.mobile.changePage("#page2");
    });
});

そして、ここにデモがあります: http://jsfiddle.net/hungerpain/3uybD/

于 2013-08-05T02:51:29.713 に答える