jQuery Mobile najlepszy sposób tworzenia pop-upu i zawartości dynamicznie

Question

Mam następujący kod tworząc wyskakujące okienko przy użyciu jQuery mobile. Wyskakujące okienko jest tworzone, a formularz jest tworzony i dołączany do wyskakującego okienka wraz z dwoma przyciskami. Ten kod działa, ale zastanawiam się, czy istnieje lepszy sposób na osiągnięcie zamierzonego celu.

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

Twój przykład jest świetny, to jest przykładowy przykład tworzenia dynamicznej zawartości jQuery/jQuery Mobile.

Zmień tylko trzy rzeczy:

• Na koniec należy dołączyć okienko do potrzebnej strony jQuery Mobile nie będzie działać poza data-role = „strona” div.
• Zmień funkcję bind na funkcję na. On jest znacznie szybszą metodą wiązania zdarzeń. I to tutaj zastąpić bind i delegata.
• Sprawdź, czy Twój kod będzie działał w przeglądarkach internetowych, takich jak Chrome. Chrome ma nieprzyjemny błąd, który zapobiega uruchamianiu programowego popup przy każdym zdarzeniu na stronie z wyjątkiem pagehow. Więcej informacji na temat tego problemu: https://stackoverflow.com/a/15830353/1848600

Answer 2

pierwsze nurkowanie Popup z 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> 

guzik Otwórz 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> 

Kliknij na przycisk

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

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

Page 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 może pomóc. Nadal musisz oznaczać kod jQuery Mobile wewnątrz zawartości wyskakującego okienka. Używam tego w produkcji, ale w przypadku prostych wiadomości.