jQuery Mobile, il modo migliore per creare pop-up e contenuto dinamicamente

Question

Ho il seguente codice che crea un pop-up usando jQuery mobile. Il pop-up viene creato e un modulo viene creato e aggiunto al popup insieme a due pulsanti. Questo codice funziona ma mi chiedo se c'è un modo migliore per raggiungere l'obiettivo prefissato.

//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

L'esempio è ottimo, questo è un esempio di poster su come deve essere creato il contenuto dinamico di jQuery/jQuery Mobile.

Change solo tre cose:

• Alla fine si deve accodare popup alla pagina jQuery Mobile necessaria perché non è andare a lavorare al di fuori di un data-role = "pagina" div.
• Modificare la funzione bind con la funzione su. On è un metodo molto più rapido di associazione eventi. Ed è qui per sostituire bind e delegare.
• Verifica se il tuo codice funzionerà nei browser web kit come Chrome. Chrome ha un bug sgradevole che impedisce l'apertura programmatica del popup in ogni evento della pagina tranne pageshow. Ulteriori informazioni su questo problema: https://stackoverflow.com/a/15830353/1848600

Answer 2

Prima un tuffo popup con ur 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> 

pulsante per Open Popup

<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> 

Clicca pulsante

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

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

Pagina 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 può aiutarti. Hai ancora bisogno di contrassegnare il codice jQuery Mobile all'interno del contenuto del popup. Lo sto usando in produzione, ma per messaggi semplici.