jQuery Mobile 动态创建弹出窗口和内容的最佳方式答案

【问题标题】：jQuery Mobile best way to create pop up and content dynamicallyjQuery Mobile 动态创建弹出窗口和内容的最佳方式
【发布时间】：2013-09-30 18:53:55
【问题描述】：

我有以下代码使用 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");

【问题讨论】：

它的工作 jsfiddle.net/Palestinian/YCZrg 我喜欢它。很有创意的想法。正如 Gajotres 下面所说，将 .bind 替换为 .on。
感谢 Omar，我正在编写一个几乎没有 HTML 标记的应用程序，所以认为这是最好的方法
我唯一不喜欢的是它看起来有点“hacky”你对此有何看法？
我不同意。看起来很专业；简单直接。

标签： html jquery-mobile jquery jquery-mobile-popup

【解决方案1】：

您的示例很棒，这是如何创建动态 jQuery/jQuery Mobile 内容的海报示例。

只改变三件事：

最后，您应该将弹出窗口附加到所需的 jQuery Mobile 页面，因为它无法在 data-role="page" div 之外工作。
将函数 bind 更改为函数 on。 On 是更快的事件绑定方法。它在这里取代了绑定和委托。
检查您的代码是否可以在 Chrome 等 Web 工具包浏览器中运行。 Chrome 有一个讨厌的错误，它会阻止在除 pageshow 之外的每个页面事件中打开程序化弹出窗口。有关此问题的更多信息：https://stackoverflow.com/a/15830353/1848600

【讨论】：

非常感谢您的反馈。我不确定的一段代码是我在哪里添加“data-jqm-rel”：“back”。我看不到任何其他添加此属性的方法。
将它添加到用于弹出关闭的标签中。它应该看起来像这样： Close 在这种情况下，不要在标签上使用 href，或者如果您仍然要使用它，那么让它变成这样：href="#"。一个
嗨 Gajotres，我尝试将弹出窗口附加到 jQuery 移动页面，但没有成功。我在 Omar 这里jsfiddle.net/Palestinian/YCZrg 创建的 jsFiddle 示例中尝试了它，我也在我的应用程序中尝试过。问题是覆盖覆盖了整个弹出窗口，并且弹出窗口的宽度是页面的完整大小。
@Gajotres 我们可以在上述情况下修复弹出窗口的高度和宽度吗？？.. 目前它只覆盖内容的宽度和大小，如果我们指定宽度和高度，我看不到任何区别。我们如何固定高度和宽度？谢谢:)

【解决方案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");
});

页面初始化

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

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

 });

 });

【讨论】：

【解决方案3】：

https://github.com/serbanghita/jQM-dynamic-popup 可以帮助你。您仍然需要在弹出窗口的内容中标记 jQuery Mobile 代码。我在生产中使用它，但用于简单的消息。

【讨论】：