jQueryモバイルポップアップとコンテンツを動的に作成するための最良の方法

Question

jQueryモバイルを使用してポップアップを作成する次のコードがあります。ポップアップが作成され、フォームが作成され、2つのボタンとともにポップアップに追加されます。このコードは機能しますが、私の意図した目標を達成するためのよりよい方法があるのだろうかと思います。

//create a div for the popup 
    var $popUp = $("<div/>").popup({ 
     dismissible : false, 
     theme : "a", 
     overlyaTheme : "a", 
     transition : "pop" 
    }).bind("popupafterclose", function() { 
        //remove the popup when closing 
     $(this).remove(); 
    }); 
    //create a title for the popup 
    $("<h2/>", { 
     text : PURCHASE_TITLE 
    }).appendTo($popUp); 

      //create a message for the popup 
    $("<p/>", { 
     text : PURCHASE_TEXT 
    }).appendTo($popUp); 

    //create a form for the pop up 
    $("<form>").append($("<input/>", { 
     type : "password", 
     name : "password", 
     placeholder : PASSWORD_INPUT_PLACEHOLDER 
    })).appendTo($popUp); 

    //Create a submit button(fake) 
    $("<a>", { 
     text : SUBMIT_BTN_TXT 
    }).buttonMarkup({ 
     inline : true, 
     icon : "check" 
    }).bind("click", function() { 
     $popUp.popup("close"); 
     that.subscribeToAsset(callback); 
    }).appendTo($popUp); 

    //create a back button 
    $("<a>", { 
     text : BACK_BTN_TXT, 
     "data-jqm-rel" : "back" 
    }).buttonMarkup({ 
     inline : true, 
     icon : "back" 
    }).appendTo($popUp); 

    $popUp.popup("open").trigger("create"); 

Answer 1

あなたの例は素晴らしいです、これは動的jQuery/jQueryモバイルコンテンツの作成方法のポスターの例です。データ・役割=「ページ」のdivの外に仕事に行くのではありませんので、あなたが必要なのjQueryモバイルページにポップアップを追加する必要があり終わりで

• ：

  の変更だけで3つのことを。

• バインドをのに変更してください。 Onははるかに速いイベントバインディングの方法です。バインドと代理を置き換えるのがここです。
• コードがChromeのようなウェブキットブラウザで動作するかどうかを確認します。 Chromeは、pageshow以外のすべてのページイベントでプログラム的なポップアップを開くのを防ぐ厄介なバグを持っています。この問題の詳細：https://stackoverflow.com/a/15830353/1848600

Answer 2

ボタンのウルContantを

<div id="popupPhotoLandscape" class="photopopup" data-role="popup" data-theme="none" data-  shadow="false" data-overlay-theme="a"> 
      <a href="#home" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 

//Content 
     </div> 

ボタン

<a data-role="button" data-theme="c" data-inline="true" data-mini="true" id="snap_view_btn" style="float:left;margin-top: 4px;" >Snap View</a> 

オープンポップアップ表示するためのクリック

$('#snap_view_btn').click(function() { 

    $('#popupPhotoLandscape').popup(); 
    $('#popupPhotoLandscape').popup("open"); 
}); 

ページのInit

との最初のポップアップダイビング

$(document).on("pageinit", function() { 

    $(".photopopup").on({ 
    popupbeforeposition: function() { 
     var maxHeight = $(window).height() - 60 + "px"; 
     $(".photopopup").css("height", '800px'); 
     $(".photopopup").css("width", '600px'); 
    } 

}); 

}); 

Answer 3

https://github.com/serbanghita/jQM-dynamic-popupお手伝いをします。 まだポップアップの内容の中にjQuery Mobileコードをマークアップする必要があります。 私はこれを本番環境で使用していますが、単純なメッセージ用です。