jQuery Mobile 动态创建弹出窗口和内容的最佳方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16015810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile best way to create pop up and content dynamically
提问by user1812741
I have the following code creating a pop up using jQuery mobile. The pop up is created and a form is created and appended to the popup along with two buttons. This code does work but I am wondering if there is a better way to achieve my intended goal.
我有以下代码使用 jQuery mobile 创建一个弹出窗口。创建弹出窗口并创建一个表单并将其与两个按钮一起附加到弹出窗口。这段代码确实有效，但我想知道是否有更好的方法来实现我的预期目标。
//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");
采纳答案by Gajotres
Your example is great, this is poster example how dynamic jQuery/jQuery Mobile content should be created.
您的示例很棒，这是应该如何创建动态 jQuery/jQuery Mobile 内容的海报示例。
Change only three things:
只改变三件事：
- At the end you should append popup to the needed jQuery Mobile page because it is not going to work outside a data-role="page" div.
- Change the function bindto the function on. On is much faster method of event binding. And it is here to replace bind and delegate.
- Check if your code is going to work in web kit browsers like Chrome. Chrome has a nasty bug which prevents programmatic popup open in every page event except pageshow. More info about this problem: https://stackoverflow.com/a/15830353/1848600
- 最后，您应该将弹出窗口附加到所需的 jQuery Mobile 页面，因为它不会在 data-role="page" div 之外工作。
- 功能更改绑定的功能上。On 是更快的事件绑定方法。它在这里取代了绑定和委托。
- 检查您的代码是否可以在 Chrome 等网络工具包浏览器中运行。Chrome 有一个令人讨厌的错误，它阻止在除pageshow之外的每个页面事件中打开程序化弹出窗口。有关此问题的更多信息：https: //stackoverflow.com/a/15830353/1848600
回答by ?erban Ghi??
https://github.com/serbanghita/jQM-dynamic-popupcan help you. You still need to markup the jQuery Mobile code inside the popup's content. I'm using this in production, but for simple messages.
https://github.com/serbanghita/jQM-dynamic-popup可以帮助你。您仍然需要在弹出窗口的内容中标记 jQuery Mobile 代码。我在生产中使用它，但用于简单的消息。
回答by Amit
First a Popup dive with 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>
Button for 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>
Click for button
点击按钮
$('#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' );
}
});
});
