jQuery Mobile最好的方式來創建彈出和動態內容

Question

我有以下代碼使用jQuery手機創建彈出。彈出窗口被創建並且一個窗體被創建並被附加到彈出窗口以及兩個按鈕。此代碼確實有用，但我想知道是否有更好的方法來實現我的預期目標。

//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 Mobile內容。

變化只做三件事：

• 末，因爲它不會給外界一個數據角色=「頁面」分區工作，你應該追加彈出窗口所需要的jQuery Mobile的頁面。
• 更改函數將綁定到函數的。 On是更快的事件綁定方法。它是在這裏取代綁定和委託。
• 檢查您的代碼是否可以在Chrome等瀏覽器中運行。 Chrome有一個令人討厭的錯誤，它會阻止每個頁面事件中的程序化彈出窗口打開，除了頁面顯示。有關此問題的更多信息：https://stackoverflow.com/a/15830353/1848600

Answer 2

首先彈出一個潛水與烏爾含量的不同

<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"); 
}); 

頁初始化

$(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代碼。 我在生產中使用此功能，但是用於簡單消息。